Animating text-shadow color in CSS from left to right

I need help with transitioning the text-shadow color horizontally on hover. I found a solution that demonstrates how to do this here:

Although it shouldn't matter, I am working in react with styled-components.

Here is an example of what I am trying to achieve:

.styled {
  background-color: black;
  font-size: 30px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.styled:hover {
  text-shadow: -1px -1px 0 cyan, 1px -1px 0 cyan, -1px 1px 0 cyan, 1px 1px 0 cyan;
}
<li class="styled">Test</li>

htmlcssreactjsstyled-components

Answer №1

To achieve the desired effect, you can follow these steps:

  1. Instead of using text-shadow, try setting -webkit-text-stroke and -webkit-text-fill-color to create a border-like appearance.
  2. Create a pseudo-class and utilize attrs() to extract values from data attributes.
  3. Utilize background-clip to clip the text and apply a gradient effect.
  4. Ensure browser compatibility by using @supports to handle scenarios where -webkit-text-stroke and -webkit-text-fill-color are not supported.

https://codesandbox.io/s/animate-text-shadow-color-left-to-right-css-56y6ob?file=/src/App.tsx

@supports (-webkit-text-stroke: 0 #000) and (-webkit-text-fill-color: #000) {
  .styled {
    display: flex;
    background-color: black;
    font-size: 5rem;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    font-family: sans-serif;
    
    -webkit-text-fill-color: white;
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: transparent;
  }
  .styled::after {
    content: attr(data-css); /* get value from html */
    position: absolute;
    top: 0;
    left: 0;
    font-size: inherit;
    transition: all .5s linear;
    
    background-image: linear-gradient(to left, white 50%, cyan 50%);
    background-size: 200%;
    background-position: 100%;
    background-clip: text;
    -webkit-background-clip: text;

  }
  .styled:hover::after {
    background-position: 0;
  }
}

@supports not ((-webkit-text-stroke: 0 #000) or (-webkit-text-fill-color: #000)) {
  .styled {
    background-color: black;
    font-size: 30px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
  }
  .styled:hover {
    text-shadow: -1px -1px 0 cyan, 1px -1px 0 cyan, -1px 1px 0 cyan, 1px 1px 0 cyan;
  }
}
<li class="styled" data-css="Test">Test</li>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to unsubscribe the listener for React Firebase

Currently, I am attempting to incorporate the Firebase Real Time Database into a project using react hooks. I have implemented the following code to read data and unsubscribe when the component is unmounted. However, for some unknown reason, the unsubscrib ...

reactjsfirebasefirebase-realtime-databasereact-hooks

How well are DOM Mutation Observers supported across different web browsers?

I attempted to search for a solution by Googling, but was unsuccessful in finding an answer. Does anyone know if there is a compatibility matrix available for this feature that works across all browsers? In case someone is interested in the answer, here ...

javascripthtmldommutation-observers

Selenium alert: element click blocked: Another element is in the way of receiving the click

I'm currently using Selenium in an attempt to click on the "show more" option under the "about this show" section on the following URL: https://www.bandsintown.com/e/1024477910-hot-8-brass-band-at-the-howlin'-wolf?came_from=253&utm_medium=we ...

pythonhtmlseleniumgoogle-chromeselenium-chromedriver

Add extra space to the dimensions of the div by incorporating padding

Showing my issue with an accompanying image: I am looking for a solution to include padding in the width: 50%; calculation. Currently, the first div's width is actually 50% + 2em because the padding was not factored in initially. Is there a way to i ...

htmlcsswidthpadding

Applying custom CSS designs to images using Thymeleaf

Currently working on a web application using Spring MVC and Thymeleaf for templating. I'm struggling to figure out how to apply rules to an image, especially when using an external CSS file. I have tested code that works: page.html <a class="nav ...

htmlcsstwitter-bootstrapspring-mvcthymeleaf

Loading 3D models in Three.js from the cache

Every time my page reloads, the loader loads objects from the URL instead of cache. Is there a way to check if the resource is in cache and load it directly? Appreciate your help! ...

javascripthtmlthree.js

Using Google fonts offline: a step-by-step guide

Is it possible to download Google fonts and link them offline for a localhost webpage? ...

htmlcss

I encountered a violation of hooks rules when using React with MUI's useStyles() function

Encountering the React "Invalid Hook Call" error even though there are no hooks being used. Started with creating React app using CRA Added MUI library Created a simple styles page: import { makeStyles } from '@material-ui/core/styles'; cons ...

reactjsmaterial-ui

What is the reason this JavaScript code functions properly within a <script> tag but not when placed in a separate .js

After researching various image sliders online, I came across this specific one. It worked perfectly fine when I included the JavaScript directly in a script tag within the HTML file. However, as soon as I tried to link it via a .js file, the slider stoppe ...

javascripthtmlcss

Encounter an incorrect route in react-router

My current setup involves a router similar to the following: const Routes = (props) => { const { store } = props; const { loggedIn } = props; const checkAuth = (nextState, replace) => { auth.checkAuth(nextState, replace, loggedIn); }; ...

reactjsreduxreact-router

Concealing inactive select choices on Internet Explorer versions greater than 11 with the help of AngularJS

I am having trouble hiding the disabled options in AngularJS specifically for IE. Check out this fiddle for a better idea: https://jsfiddle.net/s723gqo1/1/ While I have CSS code that works for hiding disabled options in Chrome/Firefox, it doesn't see ...

htmlcssangularjsselectdrop-down-menu

Unable to launch ReactJS using npm start anymore

When I create a new ReactJS app using npx create-react-app testapp, the issue arises where the command npm start (or any other npm-script) does not work in ANY of my react projects. There is no output to the console, and upon checking the log files in ~/.n ...

linuxreactjsnpmcreate-react-app

How can you delay the return of a function until after another asynchronous call has finished executing?

Currently, I am working on implementing route authentication in my project. To achieve this, I have decided to store the authenticated status in a context so that other React components can check whether a user is logged in or not. Below is the relevant co ...

javascriptnode.jsreactjsasynchronousrace-condition

Keep the Bootstrap dropdown menu open when the search bar is in focus

I am working on a customized bootstrap dropdown menu that needs to remain open when the search bar within the Events dropdown is focused. I have managed to make it open and close on hover, but now I need it to stay open under certain conditions. Below is ...

javascriptjquerycsstwitter-bootstrapdrop-down-menu

Capture line breaks from textarea in a JavaScript variable with the use of PHP

I need help with handling line breaks in text content from a textarea. Currently, I am using PHP to assign the textarea content to a Javascript variable like this: var textareaContent = '<?php echo trim( $_POST['textarea'] ) ?>'; ...

javascriptphphtml

Exploring the Power of JQuery Load and CSS styling

Currently, I am dynamically loading text into a div. However, I am encountering an issue where the content below this div is constantly shifting depending on the loaded text. Is there a way to restrict the space allocated to the div with the dynamic conte ...

jquerycssajax

Encountering difficulties when trying to display a nested object with two levels of depth using

I am currently developing an application where I need to display a nested object with two levels using the map method. The data structure is as follows: const categories = [ { catName: "Education", subCategory: [ { subCatName: "Col ...

javascriptreactjs

The Javascript function is designed to function exclusively with onclick events or setTimeout functions

I am currently working on a website that I want to be responsive to the window size. However, I am facing an issue with vertical alignment. I have created a jQuery function to handle this, and it works well for divs with images but not so well for a div wi ...

javascriptjqueryhtmlwebraphael

Ways to align a Unordered List (ul) in the middle

I have a list of items with some elements floated to the left. Currently, it looks like this: | A | B | C | D | E < empty space> | I would like it to appear as: | A | B | C | D | E | Centered on the page with centered contents as well. HTML < ...

htmlcss

The React table in TanStack is encountering an issue where it is unable to access the properties of undefined when trying to read the

After deciding to incorporate a React library into my project, I stumbled upon the tanstack v8 table. Following a basic table tutorial, I encountered some errors along the way. //Parent next component 'use client' import React, { useEffect, useS ...

reactjsnext.jstanstackreact-table-v8