HTML
<p aria-label="CodePad">
<span data-text="C">C</span><span data-text="O">O</span><span data-text="D">D</span><span data-text="E">E</span><span data-text="P">P</span><span data-text="A">A</span>
<span data-text="D" >D </span>
<span class="title">
Made with <i class="fa fa-heart pulse"></i> in <a href="http://www.facebook.com/shukla304">India</a>
</span>
<link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700'>
CSS
body {
background: #e9e9e9;
font-family: "Roboto", sans-serif;
text-align: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.title{
color: #FFF;
font-size: 18px;
display: block;
position: absolute;
bottom: 10px;
position: absolute;
width: 90%;
left: 50%;
top: 75%;
bottom: auto;
right: auto;
transform: translateX(-50%) translateY(-50%);
text-align: center;
}
span a {
color: #000000;
text-decoration: none;
}
span .fa {
color: #E90606;
margin: 0 3px;
font-size: 20px;
animation: pound 0.35s infinite alternate;
-webkit-animation: pound 0.35s infinite alternate;
}
@-webkit-keyframes pound {
to {
transform: scale(1.1);
}
}
@keyframes pound {
to {
transform: scale(1.1);
}
}
p {
color: #fff;
font-family: Avenir Next, Helvetica Neue, Helvetica, Tahoma, sans-serif;
font-size: 1em;
font-weight: 700;
}
p span {
display: inline-block;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 500;
perspective: 500;
-webkit-font-smoothing: antialiased;
}
p span::before,
p span::after {
display: none;
position: absolute;
top: 0;
left: -1px;
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transition: all ease-out 0.3s;
transition: all ease-out 0.3s;
content: attr(data-text);
}
p span::before {
z-index: 1;
color: rgba(0,0,0,0.2);
-webkit-transform: scale(1.1, 1) skew(0deg, 20deg);
transform: scale(1.1, 1) skew(0deg, 20deg);
}
p span::after {
z-index: 2;
color: #684da3;
text-shadow: -1px 0 1px #684da3, 1px 0 1px rgba(0,0,0,0.8);
-webkit-transform: rotateY(-40deg);
transform: rotateY(-40deg);
}
p span:hover::before {
-webkit-transform: scale(1.1, 1) skew(0deg, 5deg);
transform: scale(1.1, 1) skew(0deg, 5deg);
}
p span:hover::after {
-webkit-transform: rotateY(-10deg);
transform: rotateY(-10deg);
}
p span + span {
margin-left: 0.3em;
}
@media (min-width: 20em) {
p {
font-size: 2em;
}
p span::before,
p span::after {
display: block;
}
}
@media (min-width: 30em) {
p {
font-size: 3em;
}
}
@media (min-width: 40em) {
p {
font-size: 5em;
}
}
@media (min-width: 60em) {
p {
font-size: 8em;
}
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #684da3;
}
