Most of the time on this site when we give you text effect tutorials, it’s shadow and border properties that are used to create the effects. For this tutorial, we’re going to show you how to create a pure CSS text effect that’s actually animated. In the following tutorial, we’ll create “shattered” text. The text that we’re creating looks like it’s slightly shattered, and then when it’s hovered upon, it breaks apart with a smooth CSS transition to reveal just how shattered it is. This effect is adapted from a CodePen tutorial.
To start, we’ll need some simple HTML. For this tutorial, we’ve put our text in a span tag inside a wrapper div, like this:
<div class="wrapper"> <h1><span>Shatter</span></h1> </div>
Now we’ll need to add some CSS to create our animated shattering effect. To create the effect, we use a lot of instances of the :before and :after pseudo-selectors and we also take advantage of the clip-path property. For the hover effect, we use the :hover pseudo-selector in conjunction with the :before and :after pseudo-selectors, and we also use the CSS transition property to give the text its animated effect upon hover.
Take a look at the excerpt below to see how your CSS should look:
body {
background-color: #ff4040;
}
.wrapper {
width: 500px;
margin: 0 auto;
position: relative;
text-align: center;
}
h1 {
text-transform: uppercase;
font-weight: bold;
font-size: 6rem;
position: relative;
color: transparent;
margin-bottom: 0;
}
h1:before {
content: "Shatter";
position: absolute;
top: 0px;
left: 22px;
color: white;
-webkit-clip-path: inset(0px 298px 0px 0px);
clip-path: inset(0px 298px 0px 0px);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
h1 span:before {
content: "Shatter";
position: absolute;
top: 0px;
left: 22px;
color: white;
-webkit-clip-path: inset(0px 200px 0px 154px);
clip-path: inset(0px 200px 0px 154px);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
h1:after {
content: "Shatter";
position: absolute;
right: 24px;
top: 0px;
color: white;
-webkit-clip-path: inset(0px 100px 0px 250px);
clip-path: inset(0px 100px 0px 250px);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
h1 span:after {
content: "Shatter";
position: absolute;
right: 24px;
top: 0px;
color: white;
-webkit-clip-path: inset(0px 0px 0px 353px);
clip-path: inset(0px 0px 0px 353px);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
h1:hover:after {
top: 10px;
cursor: pointer;
color: rgba(255, 255, 255, 0.6);
}
h1:hover:before {
top: -10px;
left: 0px;
cursor: pointer;
color: rgba(255, 255, 255, 0.6);
}
h1:hover span:before {
top: 4px;
cursor: pointer;
}
h1:hover span:after {
top: -8px;
left: 30px;
cursor: pointer;
}
The way that the CSS splits up the HTML into fragments is by using the :before and :after pseudo-selectors in conjunction with the content property to layer several different versions of the word “Shattered” on top of each other, then it clips them all so that they all appear as separate entities that don’t sit on top of one another and can be controlled individually using its own selector, like h1:before or h1 span:before.
After you’ve applied this CSS to your HTML code, your shattered text should look like this when its hovered upon:
As you can see, the text has shifted in position, and the color of different fragments of the text has changed. Achieving this effect is actually fairly simple — if you take a look at the CSS, you’ll see that the effect is created by using the top and left property to shift around the positions of the letters.