Akhil Arjun

Posted on Aug 10, 2020

Four subtle Text-Effects to spice up your web-site

#beginners #css #tutorial #webdev

Happy Monday everyone! Let's learn four subtle CSS text effects that can add some dynamic to your website. ✨✨

Live Demo

So without further ado, let's begin

1. Vibrating Text on hover ⚡

This is a subtle effect where we can vibrate the individual characters when they are hovered on.

Code



.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 using the transform attribute to move the character across the y-axis and x-axis and loop the animation whenever hovered on.

We also add a small amount of blur to the character to emphasize the motion effect.

One important thing to note here is we have to make sure the span element has a display property of inline-block. Because transforms only work on elements that have a block display.

Codepen

2. Waves inside a text 🌊

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

Code



<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 a -WebKit property called text-stroke to add a stroke effect to the text.

And then we use pseudo after element to fill in with white color.

And then we animate the clipping path property of the pseudo-element to form the wave effect.

For easy clip-path effects use this tool Clippy to create custom clipping paths. Please find below the gif to understand how I created the wave effect.

How to use Clippy

Codepen

3. Glowing Text 🌟

Code



.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 use stacked text-shadow to create a glow effect.

We can use multiple values for text-shadow to stack on top of each other to create other stunning effects.

Here we kept on gradually increasing the blur-radius of the shadow and gave it a color of bright blue. Which accounts for the neon-blue glow

Codepen

4. Text Reveal Effect 🙈

Code



.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 pseudo :after selector to add the additional text.

And then we use the transform property to scale the character on hover and add a little margin too, to enforce the pushing away effect.

Codepen

I hope you all learned something here. And if you have any doubts about any of the techniques do let me know.

My days are fueled with coffees and only coffees. So I know, you know what we all should do 🤞

Cheers 🍻
< Akhil />

All the images in live demo are sourced from Pexels

Top comments (8)

Michael Fasani • Aug 10 '20

Hi @akhilarjun ,

I just added the third effect (3. Glowing Text) to my site as the idea works well with my current font (which is kind of Alien/Space inspired). My goodness, that looks great on a single letter but trying to apply it to a 30+ character string, Chrome turns really sluggish. I was quite surprised to see such bad performance on what seems a very simple effect.

Just wanted to say thank you anyway for the inspiration, I ended up just doing a single shadow (even with 2 shadows it's noticeably slower on hover even without the transition effect), I think it looks great still. I have pushed the changes already so it is live here: michaelfasani.com

Akhil Arjun • Aug 11 '20

Awesome! Am so glad it worked out for your website 🐱‍👤.
Now as a suggestion for the slowness detected it could be because of the huge transition we are applying. So why don't you try adding this will-change: text-shadow to the glow span selector. This will tell the browser to render the effect with the help of the GPU. Thereby reducing the load on browser thread.
I will try to write a small write-up for GPU forced rendering in CSS someday ✌
For now, read this awesome article in Smashing Magazine

Michael Fasani • Aug 11 '20

I will give it a shot. Just checked caniuse.com it looks like it’s a no go for IE11 but I will see how performance is there and in other places with that prop and get back to you.

Akhil Arjun • Aug 11 '20

And by the way i checked out the site. It is dope 😍👾

Michael Fasani • Aug 12 '20

Hey, thanks, I tried will-change: text-shadow; but it did not seem to make a difference tbh.

I did, however, come up with the following with @keyframes which I think looks great, exactly the kind of thing I was trying to achieve.

.header a:hover {
    animation: glow 0.3s linear forwards;
}

@keyframes glow {
    0% {
        text-shadow: 0 0 0px #ffffff;
    }
    50% {
        color: #ffffff;
        text-shadow: 0 0 10px #8be9fd;
    }
    100% {
        text-shadow: 0 0 0px #8be9fd;
        color: #8be9fd;
    }
}

I mapped the number of animation states (3) to the timing in ms (0.3) as this seemed to have better performance. If you have 4 states, I think 0.4 may be a better time choice and so on, but I can't verify that claim it is just my subjective opinion.

New demo: michaelfasani.com