Four text effects to bring your website to life | VPS and VPN
HostArmada - Affordable Cloud SSD Web Hosting

Four text effects to bring your website to life


Four text effects to bring your website to life

From the author: Let’s explore four subtle CSS text effects that can add dynamism to your website.

So, without further ado, let’s get started.

1. Vibration text on hover

This is a subtle effect with which we can set the vibration of individual characters on hover.

.vibration span{
    transition: all 500ms;
    color: rgba(255, 255, 255, 0.8);
    display: inline-block;
    margin-right: 10px;
    text-shadow: 1px 2px 3px #999;
}
.vibration span:hover{
    filter: blur(3px);
    animation: vibrate 50ms linear infinite forwards;
}
@keyframes vibrate{
    0% {
        transform: translateX(-1px) translateY(1px);
    }
    100% {
        transform: translateX(1px) translateY(-2px);
    }
}

We achieve this effect by using the transform attribute to move the character along the y-axis and x-axis and to loop the animation on hover.

We also add a slight blur to the symbol to emphasize the motion effect.

One important thing to note here is that we need to ensure that the span element has a display inline-block property. Because transforms only work with block elements.

2. Waves inside the text

In this effect, we are using an experimental chrome feature to add a stroke effect to the text. And then we use the clipping path property to create the wave effect.

<section class="waves-demo">
        <div class="waves" data-word="WAVES">
            WAVES
        </div>
</section>
.waves {
    color: transparent;
    -webkit-text-stroke: 2px #fff;
    position: relative;
}
.waves:after{
    content: attr(data-word);
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    animation: waves 2s ease-in-out infinite forwards;
}
@keyframes waves{
    0%, 100% {
        clip-path: polygon(0 66%, 11% 59%, 18% 51%, 26% 46%, 35% 41%, 48% 44%, 55% 54%, 63% 63%, 76% 60%, 82% 50%, 92% 48%, 100% 53%, 100% 100%, 0% 100%);
    }
    50% {
        clip-path: polygon(0 66%, 8% 74%, 17% 77%, 28% 70%, 35% 57%, 48% 44%, 56% 39%, 69% 41%, 75% 47%, 84% 60%, 92% 61%, 100% 53%, 100% 100%, 0% 100%);
    }
}

Here we use the —WebKit text-stroke property to add a stroke effect to the text. We use the :: after pseudo-element to fill it with white. Next, we’ll animate the clipping path property of the pseudo-element to form the wave effect.

For easier creation of clipping path effects use this Clippy tool. With the gif below you can see how I created the ripple effect.

3. Glowing text

.glow span {
    color: #fff;
    transition: all 300ms;
}
.glow span:hover {
    text-shadow: 0 0 10px #0698a5,
                 0 0 30px #0698a5,
                 0 0 80px #0698a5,
                 0 0 120px #0698a5,
                 0 0 200px #0698a5;
}

For this effect, we are using stacked text-shadows to create a glow effect. We can use multiple text-shadow values ​​to overlap and create other amazing effects. Here we continued to gradually increase the blur radius of the shadow and give it a bright blue color. Which explains the neon blue glow.

4. Text display effect

.reveal {
  color: #fff;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

.reveal span {
  display: inline-block;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

.reveal span:after {
  content: 'can stop it';
  position: absolute;
  font-size: 20px;
  font-weight: 700;
  bottom: -10px;
  left: 50%;
  width: 200px;
  text-align: center;
  opacity: 0;
  transform: translateX(-50%) scale(0);
  transition: all 400ms;
}

.reveal:hover {
  color: rgba(255, 255, 255, 0.1);
}

.reveal:hover span {
  transform: scale(2);
  color: #fff;
  margin: 0 45px;
}

.reveal:hover span:after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

Again, for this effect, we use the :: after pseudo selector to add additional text. We then use the transform property to scale the character on hover and add some padding to enhance the offset effect.

Author: Akhil arjun

Source: https://dev.to

Editorial staff: The webformyself command.

Leave a Reply

Your email address will not be published. Required fields are marked *