From our sponsor: Leverage AI for dynamic, custom website builds with ease.
With a little bit of CSS magic we can transform text into beautiful typography and omit the use of images in many cases. In this tutorial we will be creating different web typography styles using the lettering.js jQuery plugin and various CSS techniques. For some of the examples we will also add hover transitions to make things a bit more interactive.
We won’t include any vendor specific prefixes in the tutorial below, but you will of course find them in the files
We’ll use lettering.js in most of the cases.
In the following we will be going through eight examples.
Example 1
The idea of the first example is to separate or slice a word when hovering and making another word appear in the gap. For that we will need a special structure.
<h2 class="cs-text"> <span class="cs-text-cut">Smooth</span> <span class="cs-text-mid">Operator</span> <span class="cs-text-cut">Smooth</span> </h2>
The word that will be visible initially, will be duplicated. (Note that all these examples are intended for decorative purposes and might not be “SEO friendly”.)
We will apply the lettering.js plugin for the words meaning that we will have another span around the first and last word (the duplicates):
$(".cs-text-cut").lettering('words');
Now, let’s take a look at the styling. First of all, we will give a fixed width to the whole thing:
.cs-text {
width: 645px;
margin: 120px auto 30px;
cursor: default;
}
The first-layer spans will be displayed as block elements:
.cs-text > span {
display: block;
}
The two outer spans with the class “cs-text-cut” will have a height of 90px and we’ll set the overflow to hidden. The idea is to make this span half of the height of its inner one, cutting the text into half. We’ll also add a transition to these elements:
.cs-text-cut {
width: 100%;
height: 90px;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
Let’s add a border to the top and to the bottom:
.cs-text-cut:first-child {
border-top: 1px solid rgba(255,255,255,0.5);
}
.cs-text-cut:last-child {
border-bottom: 1px solid rgba(255,255,255,0.5);
}
Let’s set the font size and the line-height of the inner span to 180px which is the double of its parent, and add some text styling:
.cs-text-cut span {
display: block;
line-height: 180px;
color: rgba(255,255,255,1);
font-size: 180px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
margin-top: 6px;
font-family: 'Sancreek', cursive;
text-shadow: 7px 2px 0 rgba(255,255,255,0.3);
}
The second duplicate which is the last child in our structure will have its span “pulled up”. This will show the lower part of the word:
.cs-text-cut:last-child span {
margin-top: -84px;
}
The middle text, the one that we’ll want to appear on hover will be positioned absolutely and we’ll set the opacity to 0. It will also be scaled down to 0.5:
.cs-text-mid {
font-family: 'Raleway', sans-serif;
font-weight: 100;
text-transform: uppercase;
font-size: 50px;
letter-spacing: 50px;
line-height: 50px;
text-indent: 20px;
position: absolute;
top: 50%;
margin-top: -25px;
color: rgba(255,255,255,0.3);
text-shadow: 0 0 0 rgba(255,255,255,0.9);
opacity: 0;
transform: scale(0.5);
transition: all 0.4s ease-in-out 0s;
}
When we hover over the words, we want the upper half to move up, so we’ll translate it on the Y-axis and decrease its opacity:
.cs-text:hover .cs-text-cut:first-child {
transform: translateY(-25px);
opacity: 0.5;
}
The lower half will be moved down:
.cs-text:hover .cs-text-cut:last-child {
transform: translateY(25px);
opacity: 0.5;
}
And finally, we will make the middle text appear by animating its opacity and scaling it up. Notice that we’ve added a transition delay of 0.3 seconds. This will give us time to first move the halves of the initial word up and down. The transition delay of the normal state is 0 seconds meaning that when we move the mouse out, it will disappear immediately:
.cs-text:hover .cs-text-mid {
transition-delay: 0.3s;
opacity: 1;
transform: scale(1);
}
And that’s the first example. Let’s check out the second one.
Example 2
In the second example we will play a bit with transforms and create a semi-transparent panel look for the letters.
<h2 class="cs-text" id="cs-text">Glass</h2>
We will apply lettering in order to have every letter wrapped in a span:
$("#cs-text").lettering();
We’ll give the main wrapper a fixed width and add the clearfix hack by Nicolas Gallagher because our spans will be floating:
.cs-text {
width: 600px;
margin: 70px auto 30px;
}
/* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
.cs-text:before,
.cs-text:after {
content: " ";
display: table;
}
.cs-text:after {
clear: both;
}
/* end clearfix hack */
Each span will be floating and we’ll add a semi-transparent background. We’ll also apply a box shadow that will make a nice thick border. Then we’ll skew the element and add a transition:
.cs-text span {
float: left;
width: 120px;
font-size: 120px;
line-height: 230px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
cursor: default;
font-family: 'Medula One', cursive;
display: block;
z-index: 1;
position: relative;
color: rgba(255,255,255,0.7);
text-shadow: 5px 5px 2px rgba(0,0,0,0.5);
background: rgba(0,0,0,0.05) url(../images/scratch-texture.png);
box-shadow:
-6px 2px 10px rgba(0,0,0,0.5),
inset 0 0 0 20px rgba(255, 255, 255, 0.4);
border-radius: 5px;
transform: skewY(8deg);
transition: all 0.5s ease-in-out;
}
We’ll use the pseudo class :before in order to create another inset shadow effect. There are other ways of doing that but let’s be fancy 🙂
So, what we do is to stretch it until the shadow which is 20px and give it a white box shadow and a black inset box shadow (semi-transparent RGBA):
.cs-text span:before {
content: '';
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
box-shadow:
1px 1px 1px rgba(255,255,255,0.4),
inset 1px 1px 1px rgba(0,0,0,0.1);
}
The :after pseudo class will be the little dot on top of the element:
.cs-text span:after {
content: '';
position: absolute;
left: 50%;
top: 5px;
margin-left: -5px;
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.4);
background: rgba(255, 255, 255, 0.2);
}
And finally, on hover, we’ll translate the element and scale it up a bit while changing its text-shadow and increasing the opacity value:
.cs-text span:hover {
transform: translateY(-10px) scale(1.1);
color: rgba(255,255,255,1);
text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}
Example 3
The style of th third example is completely based on a Photoshop tutorial about creating scrabble tiles for a neat text effect by textuts.com. It’s a great tutorial, so check it out, especially to understand the shadow effects for the scrabble tiles.
We’ll try to create the same effect with pure CSS.
<h2 class="cs-text"> To sing is to ♥love and affirm, to fly and soar, to coast into the hearts of the people who listen, to tell them that life is to live, that love is there, that nothing is a promise, but that beauty exists, and must be hunted for and found. </h2> <h3 class="cs-text">Joan Baez</h3>
We will apply lettering.js to the words and the letters:
$(".cs-text").lettering('words').children('span').lettering()
This will wrap every word into a span with a class starting with “word” and every letter of the word into a wrapper with a class starting with “char”.
Let’s center the text:
.cs-text {
text-align: center;
margin-top: 70px;
}
The words will be displayed as inline-blocks and we’ll give them a lateral margin:
.cs-text span[class^="word"] {
display: inline-block;
margin: 0 15px;
}
The characters will have a scrabble-style background color and we’ll set a width and height for them. The text shadow will create a carved effect for the letters and the multiple box shadows will add some depth to the tile:
.cs-text span[class^="char"] {
width: 90px;
height: 100px;
display: inline-block;
background: #e4d095;
color: #2a1f1b;
border-radius: 4px;
font-size: 60px;
font-weight: 400;
line-height: 100px;
margin: 10px 3px;
text-align: center;
cursor: default;
font-family: "Spinnaker", Arial, sans-serif;
text-shadow:
1px 1px 1px rgba(255, 255, 255, 0.9),
0 -1px 1px rgba(255,255,255,0.2);
text-transform: uppercase;
box-shadow:
1px 7px 15px rgba(0,0,0,0.8),
inset 3px 0 2px rgba(255,255,255,0.4),
inset 0 3px 0px rgba(255,255,255,0.5),
inset -2px -3px 0px rgba(143,128,82,0.6);
}
Now, let’s add some “randomness” to the the tiles by rotating every odd one and every third one slightly:
.cs-text span[class^="char"]:nth-child(odd) {
transform: rotate(2deg);
}
.cs-text span[class^="char"]:nth-child(3n) {
transform: rotate(-3deg);
}
The fifth word and the last heading will have red letters and the last heading will be a bit smaller than the rest of the text:
.cs-text > span:nth-child(5) span,
h3.cs-text span[class^="char"] {
color: #a62a19;
}
h3.cs-text span[class^="char"] {
font-size: 40px;
width: 50px;
height: 60px;
line-height: 60px;
}
And that’s it! Scrabble tile text!
Example 4
The forth example is a style for a typographic background. We’ll make the letters big and semi-transparent, add some text shadow and rotate/translate some letters “randomly”.
<h2 class="cs-text" id="cs-text">Nothing can be more hopeless than to attempt to explain this similarity of pattern in members of the same class, by utility or by the doctrine of final causes. The hopelessness of the attempt has been expressly admitted by Owen in his most interesting work on the "Nature of Limbs." On the ordinary view of the independent creation of each being, we can only say that so it is; that it has pleased the Creator to construct all the animals and plants in each great class on a uniform plan; but this is not a scientific explanation.</h2>
Since we don’t really care about the text itself, we’ll simply wrap every letter into a span with lettering.js:
$("#cs-text").lettering();
The whole text will be fluid: we’ll give it a width of 100%:
.cs-text {
width: 100%;
text-align: center;
margin-top: 80px;
}
The letters will be semi-transparent by giving a RGBA color with a low opacity value. We’ll also add a text shadow with a big offset:
.cs-text span {
font-family: 'Cantata One', 'Trebuchet MS', sans-serif;
font-size: 180px;
line-height: 150px;
font-weight: 400;
color: rgba(255,255,255,0.3);
display: inline-block;
text-transform: uppercase;
text-shadow: 15px 15px 0 rgba(0,0,0,0.2);
cursor: default;
pointer-events: none;
}
Since we want to use this a a background, we’ll use pointer-events: none. This will avoid making the text clickable/selectable.
Now, let’s go nuts and randomly rotate, translate, enhance or enlarge some of the letters. We will use the :nth-child selector to target specific spans:
.cs-text span:nth-child(2n) {
transform: rotate(-6deg);
color: rgba(255,255,255,0.4); ;
}
.cs-text span:nth-child(3n) {
transform: translateY(20px);
}
.cs-text span:nth-child(4n) {
color: rgba(255,255,255,0.2);
}
.cs-text span:nth-child(3n+3) {
transform: scale(1.4) rotate(5deg);
}
.cs-text span:nth-child(7n) {
font-size: 110px;
}
.cs-text span:nth-child(12n) {
font-size: 200px;
}
And that’s it, a very simple, yet exciting text effect.
Example 5
Example 5 will have a nice 3D effect which will create some nice depth.
<h2 class="cs-text" id="cs-text">Disarmer</h2>
Since we want every letter to be wrapped in two spans, we’ll first apply lettering.js and then wrap the created span into another one:
$("#cs-text").lettering().children('span').wrap('');
Let’s give a with/height and a margin to the main wrapper:
.cs-text {
position: relative;
width: 960px;
height: 100px;
margin: 100px auto;
cursor: default;
}
The first-layer spans will have perspective and float:
.cs-text > span {
perspective: 200px;
float: left;
position: relative;
}
Since we will be rotating and translating the inner spans, we’ll need a specific stacking order for the perspective containers (from the center outwards):
.cs-text > span:first-child,
.cs-text > span:last-child {
z-index: 1;
}
.cs-text > span:nth-child(2),
.cs-text > span:nth-child(7){
z-index: 2;
}
.cs-text > span:nth-child(3),
.cs-text > span:nth-child(6){
z-index: 3;
}
.cs-text > span:nth-child(4) {
z-index: 5;
}
.cs-text > span:nth-child(5){
z-index: 4;
}
The inner spans will have multiple backgrounds: the gradient and a semi-transparent texture. We’ll also apply a box shadow that will give some depth to the elements:
.cs-text span span {
display: block;
background: url(../images/scratch-texture.png), linear-gradient(to right, #00b7ea 0%,#009ec3 100%);
box-shadow:
-1px 0 2px rgba(255,255,255,0.4),
-2px 0 0 #00adda,
-2px 7px 9px rgba(0, 0, 0, 0.5);
color: #fff;
text-shadow: -1px -1px 2px rgba(0,0,0,0.6);
width: 120px;
height: 150px;
font-weight: 700;
line-height: 150px;
font-size: 140px;
text-align: center;
text-transform: uppercase;
}
The last four letters will have the reverse gradient, box shadow and text shadow:
.cs-text > span:nth-child(n+5) span {
background: url(../images/scratch-texture.png), linear-gradient(to right, #009ec3 0%,#00b7ea 100%);
box-shadow:
1px 0 2px rgba(255,255,255,0.4),
2px 0 0 #00adda,
-2px 7px 9px rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
Now we’ll translate the inner spans on the z-index and rotate them in order to create the effect. Each one will have different values, so we will target them with the respective :nth-child selector:
.cs-text > span:nth-child(4) span{
transform: translateZ(40px) rotateY(40deg);
}
.cs-text > span:nth-child(5) span{
transform: translateZ(40px) rotateY(-40deg);
}
.cs-text > span:nth-child(3) span{
transform: translateZ(30px) rotateY(30deg);
}
.cs-text > span:nth-child(6) span{
transform: translateZ(30px) rotateY(-30deg);
}
.cs-text > span:nth-child(2) span{
transform: translateZ(20px) rotateY(20deg);
}
.cs-text > span:nth-child(7) span{
transform: translateZ(20px) rotateY(-20deg);
}
.cs-text > span:first-child span{
transform: translateZ(10px) rotateY(10deg);
}
.cs-text > span:last-child span{
transform: translateZ(10px) rotateY(-10deg);
}
Let’s move the spans a bit by translating them on the x-axis:
.cs-text > span:nth-child(-n+4) {
transform: translateX(14px);
}
.cs-text > span:nth-child(n+5) {
transform: translateX(-14px);
}
And that’s it, we have a neat 3D text effect!
Example 6
This example is inspired a bit by Origami. It’s going to have several semi-transparent spans that we will rotate and skew. On hover, they will remove all the transforms so that they all appear as boxes.
<h2 class="cs-text" id="cs-text">Bird</h2>
We need each letter to be wrapped in a span, preceded by three other spans and all that wrapped into a span (yes, insane!):
$("#cs-text").lettering().children('span').wrap('').parent().prepend('');
Let’s add a width and some margins to the main wrapper and clear the floats:
.cs-text {
width: 600px;
margin: 70px auto 30px;
}
/* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
.cs-text:before,
.cs-text:after {
content: " ";
display: table;
}
.cs-text:after {
clear: both;
}
/* end clearfix hack */
All the spans will be displayed as block elements:
.cs-text span{
cursor: default;
display: block;
position: relative;
}
The first-layer spans will all have a height and width of 130 pixels and some margin:
.cs-text > span {
float: left;
width: 130px;
height: 130px;
margin: 10px;
}
All inner spans will have a RGBA background which will make them semi-transparent white. We will also add a transition to them:
.cs-text span span {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(255,255,255,0.3);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
transition: all 0.3s ease-in-out;
}
The last child of the inner spans is the letter and we will size it to fit and add some colored text shadows. It will also have a gradient as background that will simulate a subtle fold:
.cs-text span span:last-child{
font-size: 70px;
line-height: 130px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
color: rgba(255,255,255,0.8);
font-family: 'Michroma', sans-serif;
text-shadow:
1px 1px 1px rgba(0,0,0,0.1),
-1px -1px 1px rgba(0,0,0,0.1),
5px 5px 0 rgba(216,65,40,0.6),
-5px -5px 0 rgba(37,166,164,0.6);
background:
linear-gradient(
45deg,
rgba(249,249,249,0.08) 0%,
rgba(234,234,234,0.5) 49%,
rgba(255,255,255,0.51) 50%,
rgba(244,244,244,0.94) 100%
);
}
Let’s add some arbitrary rotation and skew transforms to the resting spans:
.cs-text > span:nth-child(odd) span:first-child {
transform: rotate(5deg) skewY(-14deg);
}
.cs-text > span:nth-child(even) span:first-child {
transform: rotate(-35deg) skewY(-5deg);
}
.cs-text > span:nth-child(odd) span:nth-child(2) {
transform: rotate(45deg) skewY(-10deg);
}
.cs-text > span:nth-child(even) span:nth-child(2) {
transform: rotate(27deg) skewY(-12deg);
}
.cs-text > span:nth-child(odd) span:nth-child(3) {
transform: rotate(45deg);
}
.cs-text > span:nth-child(even) span:nth-child(3) {
transform: rotate(30deg);
}
On hover, we will set all the spans transforms to 0 and apply a different text shadow to the text in order to create a nice effect:
#cs-text > span:hover span {
transform: rotate(0deg) skewY(0deg);
text-shadow:
1px 1px 0 rgba(216,65,40,0.1),
-1px -1px 0 rgba(37,166,164,0.1);
}
And that was example 6! There are many possibilities, just try to change the transform values or nest the spans for some interesting effects.
Example 7
In this example we want to show a logo initially and make some letters appear when we hover. We’ll not use lettering here, we’ll simply create the following structure:
<h2 class="cs-text"> <span>C</span> <span>o</span> <span>d</span> <span>r</span> <span>o</span> <span>p</span> <span>s</span> <span></span> </h2>
Let’s define some text properties and the width of the whole thing:
.cs-text {
font-size: 50px;
text-transform: uppercase;
margin: 80px auto 0 auto;
width: 580px;
height: 100px;
padding-left: 20px;
font-family: 'McLaren', Arial;
font-weight: 400;
position: relative;
}
/* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
.cs-text:before,
.cs-text:after {
content: " ";
display: table;
}
.cs-text:after {
clear: both;
}
/* end clearfix hack */
The spans will be floating and we’ll make them round. We’ll also add a transition.
.cs-text span {
cursor: default;
display: block;
float: left;
border-radius: 50%;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 0 0 0 -20px;
color: rgba(255,255,255,0.95);
text-shadow: 0 -1px 1px rgba(0,0,0,0.1);
transition: all 0.4s ease-in-out;
}
The spans will alternate in background color and we’ll add a subtle texture to them:
.cs-text span:nth-child(odd) {
background: rgba(118,176,204, 0.8) url(../images/noise.png);
}
.cs-text span:nth-child(even) {
background: rgba(58,126,162, 0.8) url(../images/noise.png);
}
All the spans will be moved to the center. We’ll apply the transform twice: the first one is the percentage that we know, i.e. the first span needs to be 3 positions so it’s 300%, and the second transform is for the compensation of the margin:
.cs-text span:nth-child(1) {
transform: translate(300%) translate(-60px);
}
.cs-text span:nth-child(2) {
transform: translate(200%) translate(-40px);
}
.cs-text span:nth-child(3) {
transform: translate(100%) translate(-20px);
}
.cs-text span:nth-child(5) {
transform: translate(-100%) translate(20px);
}
.cs-text span:nth-child(6) {
transform: translate(-200%) translate(40px);
}
.cs-text span:nth-child(7) {
transform: translate(-300%) translate(60px);
}
All of the spans except the last one will have opacity 0:
.cs-text span:not(:last-child) {
opacity: 0;
pointer-events: none;
}
The last span is the special logo span. We’ll give it a different background and position it absolutely in the center of the main wrapper:
.cs-text span:last-child{
position: absolute;
top: 0;
left: 50%;
margin-left: -50px;
z-index: 100;
background: url(../images/codrops_logo.jpg) no-repeat center center;
}
On hover, all the translated spans will be set back to their natural position and we’ll increase the opacity value to 1:
.cs-text:hover span:not(:last-child){
transform: translate(0%);
opacity: 1;
}
The logo span will scale up a bit and fade out:
.cs-text:hover span:last-child {
opacity: 0;
transform: scale(1.4);
}
Example 8
In the last example we’ll just play a bit with multiple text shadows.
<h2 class="cs-text">Time for Thyme</h2>
We’ll use lettering.js to wrap all the words in spans:
$(".cs-text").lettering('words');
Let’s add a width to the main heading and center it. We’ll also skew it a bit:
.cs-text {
width: 660px;
margin: 120px auto 30px;
cursor: default;
transform: skewY(-12deg);
text-align: center;
}
The spans are going to be display block and we’ll add a top margin to position them:
.cs-text span {
display: block;
color: #fff;
font-weight: 400;
text-transform: uppercase;
margin-top: 6px;
font-family: 'Stint Ultra Expanded', cursive;
}
The first word will have a font size of 100 pixels and a large letter spacing:
.cs-text span:first-child {
font-size: 100px;
letter-spacing: 96px;
text-shadow: 6px 6px 0px rgba(255,255,255,0.3);
}
The second word will be in an italic serif font and we’ll give it a dark color:
.cs-text span:nth-child(2) {
font-family: Georgia, serif;
font-weight: 400;
text-transform: none;
font-style: italic;
line-height: 60px;
font-size: 67px;
color: #392f2c;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
position: relative;
}
We’ll style the pseudo-classes :before and :after to create two lines to the left and right:
.cs-text span:nth-child(2):before,
.cs-text span:nth-child(2):after {
content: '';
width: 240px;
height: 2px;
background: #392f2c;
position: absolute;
top: 50%;
margin-top: -1px;
box-shadow: 0 1px 0 rgba(255,255,255,0.2);
}
.cs-text span:nth-child(2):before {
left: 0px;
}
.cs-text span:nth-child(2):after {
right: 0px;
}
The last word will have multiple text shadows to create a pile effect. The trick is to alternate between the text color and the body background which is a dark brown in our case:
.cs-text span:nth-child(3) {
font-size: 130px;
text-shadow:
2px 2px 0 #645f59,
4px 4px 0 #fff,
6px 6px 0 #645f59,
8px 8px 0 #fff,
10px 10px 0 #645f59,
12px 12px 0 #fff,
14px 14px 0 #645f59,
16px 16px 0 #fff,
18px 18px 0 #645f59,
20px 20px 0 #fff,
22px 22px 0 #645f59,
24px 24px 0 #fff;
}
And that’s it! I hope you enjoyed the typography examples and find them inspiring! There’s a lot to experiment, so just try it out!
