Letter Cards Text Effect using CSS3

AD

I remember when I was learning web design (that was a long time ago) my teacher told me that if you see anything colorful and graphical, it would be an image. He was right at that time, but today, after the boom of CSS3, he can’t be more wrong.

Today I’ll show you how to create a superb letter cards effect without creating any image at all. All will be done using pure CSS3.

This tutorial is designed for beginning web designers but of course, even the gurus may find it helpful. So if you are a web designer, regardless of your experience, you should check this out.

If you like this tutorial, then you would also like our tutorial to make perspective shadows using CSS3.

CSS3 Text Effect Tutorial

Live Demo

HTML Code

<ul>
 <li>D</li>
 <li>E</li>
 <li>S</li>
 <li>I</li>
 <li>G</li>
 <li>N</li>
 <li>Z</li>
 <li>Z</li>
 <li>Z</li>
</ul>

CSS Code

#example ul
{
width: 390px;
margin: 0 auto;
height: 115px;
position: relative;
overflow: hidden;
}
#example ul li
{
list-style:none;
float:left;
font-size:30px;
margin-top:18px;
padding:10px;
width:16px;
margin-left:5px;
color:#000;
}
#example ul li:nth-of-type(1)
{
top:40px;
left:10px;
background: #0b7c9c;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
}
#example ul li:nth-of-type(2)
{
top:40px;
left:55px;
background:#0e98c0;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
}
#example ul li:nth-of-type(3)
{
top:40px;
left:100px;
background: #35bfe7;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
}
#example ul li:nth-of-type(4)
{
top:40px;
left:145px;
background: #6acdea;
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
}
#example ul li:nth-of-type(5)
{
top:40px;
left:190px;
background: #7ee0fc;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
#example ul li:nth-of-type(6)
{
top:50px;
left:233px;
background: #45e8fb;
-webkit-transform: rotate(40deg);
-moz-transform: rotate(35deg);
}
#example ul li:nth-of-type(7)
{
top:55px;
left:280px;
background: #8cd4eb;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
#example ul li:nth-of-type(8)
{
top:58px;
left:330px;
background: #19bae9;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
#example ul li:nth-of-type(9)
{
top:58px;
left:383px;
background: #1fb0da;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}

Live Demo

create free website wix below post

Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved