Home > text shadow animation > Advanced Techniques: Creating Dynamic Text Shadow CSS Animation

Advanced Techniques: Creating Dynamic Text Shadow CSS Animation

October 18, 2023

Introduction

In the world of web design, attractive graphics can be an important part of making your website stand out. Among the many options available to you, text shadow CSS animations offer a powerful and dynamic way to grab your visitors’ attention. In this blog, we’ll explore advanced techniques for creating dynamic text shadow CSS animations that will make a lasting impression on your audience.





Why Text Shadow CSS Animation?

It can be used to create subtle, beautiful objects or subtle, dynamic graphics, depending on your design goals. These images can be used for a variety of purposes, including highlighting text, clicking interactive buttons, or adding depth to text. With a little creativity and skill, you can bring elements of your website to life with text shadow animation.

Before diving into advanced techniques, it’s important to understand the basics of text shadow CSS. The 'text-shadow' property can add shadows to text, and can be animated with CSS transitions or keyframes. 

Create Text Shadow animation : in 2 steps







first step  add HTML Code: 

you can copy this code and paste in your IDE . you can use any software like vs code , codepen etc..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text shadow Effect | untoldcoding</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="untoldcoding">
        <span>J</span>
        <span>a</span>
        <span>i&#160&#160</span>
        <span>S</span>
        <span>h</span>
        <span>r</span>
        <span>i</span>
        <span>&#160&#160</span>
        <span>R</span>
        <span>a</span>
          <span>m</span>
     
      </div>
</body>
</html>



Second Step Add CSS file: 

link this css file in html head section 

@import url("https://fonts.googleapis.com/css2?family=Titan+One&display=swap");
.untoldcoding {
  width: 100vw;
  text-align: center;
}
.untoldcoding span {
  -webkit-text-stroke-width: 1.25px;
  -webkit-text-stroke-color: #ffffff;
  font-size: 100px;
  text-shadow: 0 0px #f3bc23, 0 0px #f2aaaa;
  transform: translate(0, 100%) rotate(4deg);
  animation: jump 2s ease-in-out infinite;
  display: inline-block;
  font-family: "Titan One", cursive;
  color: #ffffff;
}
.untoldcoding span:nth-child(1) {
  animation-delay: 120ms;
}
.untoldcoding span:nth-child(2) {
  animation-delay: 240ms;
}
.untoldcoding span:nth-child(3) {
  animation-delay: 360ms;
}
.untoldcoding span:nth-child(4) {
  animation-delay: 480ms;
}
.untoldcoding span:nth-child(5) {
  animation-delay: 600ms;
}
.untoldcoding span:nth-child(6) {
  animation-delay: 720ms;
}
.untoldcoding span:nth-child(7) {
  animation-delay: 840ms;
}
.untoldcoding span:nth-child(9) {
  animation-delay: 960ms;
}
.untoldcoding span:nth-child(10) {
  animation-delay: 1080ms;
}
.untoldcoding span:nth-child(11) {
  animation-delay: 1200ms;
}

@keyframes jump {
  33% {
    text-shadow: 0 60px #f37121, 0 150px #f2aaaa;
  }
  50% {
    transform: translate(0, 0) rotate(-4deg);
    text-shadow: 0 0px #8fc0a9, 0 0px #84a9ac;
  }
  66.67% {
    text-shadow: 0 -60px #4074d5, 0 -150px #8fc0a9;
  }
}
html {
  width: 100%;
  height: 100vh;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
}

@media screen and (max-height: 200px) {
  .untoldcoding {
    transform: scale(0.3, 0.3);
  }
}
@media screen and (max-width: 576px) {
  .untoldcoding span {
    font-size: 50px;
  }
}


note:  CSS file name should be style.css.



Output: 


See the Pen Text Shadow CSS Animation by vishaltewatia (@vishaltewatia) on CodePen.


Want to download source code : click here

want to join our telegram group:   click here | untoldcoding 

Here’s a simple example to get you started:

css:

h1 { 

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

  transition: text-shadow 0.3s easy-go-out;

} 


h1:hover {

  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.8);

}


Dynamic impact creation

1.Rainbow Text Shadows: To create a dramatic rainbow effect, you can define multiple text-shadow targets and animate them with keyframes. This can be especially effective with headers or buttons.

2. Mouse Interaction : Use JavaScript and let text shadows react to mouse movements. As the cursor moves over the text, shadows can follow, creating an interactive and interesting effect.

3. Glowing Text : By animating the color and intensity of the text shadow, you can make the text appear to glow or vibrate, drawing the user’s attention to specific elements.

4. 3D Depth : Experiment with multiple shadow layers to create a 3D effect for your text. Use CSS variables to control depth and angle, resulting in a dynamic look.

5. Text Anaglyph : Create a stereoscopic 3D effect with two different colored shadows, mimicking the iconic anaglyph 3D effect.

6. Text Liquid Effect : Apply a wavy or water animation to the text shadows. This can be achieved by changing the ‘blur’ property of the shadow using the keyframe.




Post a Comment

No comments

Subscribe to: Post Comments ( Atom )
Powered by Blogger.