loading...
Cover image for Four subtle Text-Effects to spice up your web-site

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

akhilarjun profile image Akhil Arjun ・4 min read

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 ⚑

Vibrating Text

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.

More on this here

Codepen

2. Waves inside a text 🌊

Waves Text Effect

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 🌟

Glow 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 πŸ™ˆ

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 🀞


Buy Me A Coffee

Cheers 🍻
< Akhil />

All the images in live demo are sourced from Pexels

Posted on by:

akhilarjun profile

Akhil Arjun

@akhilarjun

I am a passionate front end developer who enjoys immense guilt-pleasure for writing vanilla Javascript.

Discussion

markdown guide
 

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

 

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

 

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.

And by the way i checked out the site. It is dope πŸ˜πŸ‘Ύ

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

 
 

Oh wow this wave effect is awesome! πŸ”₯

 

Thanks a lot βœŒπŸ±β€πŸ‘€