Cool CSS Text Animation - Get HTML and CSS

Design by : http://codepen.io/creotip
HTML code :

<div class="cssload-preloader">
    <div class="cssload-preloader-box">        <div>H</div>        <div>A</div>        <div>D</div>        <div>E</div>        <div>S</div>        <div>D</div>        <div>Z</div>        <div>G</div>        <div>N</div></div>
</div>

CSS code :

.cssload-preloader {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 10;
}

.cssload-preloader > .cssload-preloader-box {
    position: absolute;
    height: 29px;
    top: 50%;
    left: 50%;
    margin: -15px 0 0 -146px;
    perspective: 195px;
        -o-perspective: 195px;
        -ms-perspective: 195px;
        -webkit-perspective: 195px;
        -moz-perspective: 195px;
}

.cssload-preloader .cssload-preloader-box > div {
    position: relative;
    width: 29px;
    height: 29px;
    background: rgb(204,204,204);
    float: left;
    text-align: center;
    line-height: 29px;
    font-family: Verdana;
    font-size: 19px;
    color: rgb(255,255,255);
}.cssload-preloader .cssload-preloader-box > div:nth-child(1) {
    background: rgb(51,102,255);
    margin-right: 15px;
    animation: cssload-movement 690ms ease 0ms infinite alternate;
        -o-animation: cssload-movement 690ms ease 0ms infinite alternate;
        -ms-animation: cssload-movement 690ms ease 0ms infinite alternate;
        -webkit-animation: cssload-movement 690ms ease 0ms infinite alternate;
        -moz-animation: cssload-movement 690ms ease 0ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(2) {
    background: rgb(51,102,255);
    margin-right: 15px;
    animation: cssload-movement 690ms ease 86.25ms infinite alternate;
        -o-animation: cssload-movement 690ms ease 86.25ms infinite alternate;
        -ms-animation: cssload-movement 690ms ease 86.25ms infinite alternate;
        -webkit-animation: cssload-movement 690ms ease 86.25ms infinite alternate;
        -moz-animation: cssload-movement 690ms ease 86.25ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(3) {
    background: rgb(51,102,255);
    margin-right: 15px;
    animation: cssload-movement 690ms ease 172.5ms infinite alternate;
        -o-animation: cssload-movement 690ms ease 172.5ms infinite alternate;
        -ms-animation: cssload-movement 690ms ease 172.5ms infinite alternate;
        -webkit-animation: cssload-movement 690ms ease 172.5ms infinite alternate;
        -moz-animation: cssload-movement 690ms ease 172.5ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(4) {
    background: rgb(51,102,255);
    margin-right: 15px;
    animation: cssload-movement 690ms ease 258.75ms infinite alternate;
        -o-animation: cssload-movement 690ms ease 258.75ms infinite alternate;
        -ms-animation: cssload-movement 690ms ease 258.75ms infinite alternate;
        -webkit-animation: cssload-movement 690ms ease 258.75ms infinite alternate;
        -moz-animation: cssload-movement 690ms ease 258.75ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(5) {
    background: rgb(51,102,255);
    margin-right: 15px;
    animation: cssload-movement 690ms ease 345ms infinite alternate;
        -o-animation: cssload-movement 690ms ease 345ms infinite alternate;
        -ms-animation: cssload-movement 690ms ease 345ms infinite alternate;
        -webkit-animation: cssload-movement 690ms ease 345ms infinite alternate;
        -moz-animation: cssload-movement 690ms ease 345ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(6) {
    background: rgb(51,102,255);
    margin-right: 15px;
    animation: cssload-movement 690ms ease 431.25ms infinite alternate;
        -o-animation: cssload-movement 690ms ease 431.25ms infinite alternate;
        -ms-animation: cssload-movement 690ms ease 431.25ms infinite alternate;
        -webkit-animation: cssload-movement 690ms ease 431.25ms infinite alternate;
        -moz-animation: cssload-movement 690ms ease 431.25ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(7) {
    background: rgb(51,102,255);
    margin-right: 15px;
    animation: cssload-movement 690ms ease 517.5ms infinite alternate;
        -o-animation: cssload-movement 690ms ease 517.5ms infinite alternate;
        -ms-animation: cssload-movement 690ms ease 517.5ms infinite alternate;
        -webkit-animation: cssload-movement 690ms ease 517.5ms infinite alternate;
        -moz-animation: cssload-movement 690ms ease 517.5ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(8) {
    background: rgb(51,102,255);
    margin-right: 15px;
    animation: cssload-movement 690ms ease 603.75ms infinite alternate;
        -o-animation: cssload-movement 690ms ease 603.75ms infinite alternate;
        -ms-animation: cssload-movement 690ms ease 603.75ms infinite alternate;
        -webkit-animation: cssload-movement 690ms ease 603.75ms infinite alternate;
        -moz-animation: cssload-movement 690ms ease 603.75ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(9) {
    background: rgb(51,102,255);
    margin-right: 15px;
    animation: cssload-movement 690ms ease 690ms infinite alternate;
        -o-animation: cssload-movement 690ms ease 690ms infinite alternate;
        -ms-animation: cssload-movement 690ms ease 690ms infinite alternate;
        -webkit-animation: cssload-movement 690ms ease 690ms infinite alternate;
        -moz-animation: cssload-movement 690ms ease 690ms infinite alternate;
}


@keyframes cssload-movement {
    from {
        transform: scale(1.0) translateY(0px) rotateX(0deg);
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    to {
        transform: scale(1.5) translateY(-24px) rotateX(45deg);
        box-shadow: 0 24px 39px rgba(0,0,0,0.4);
        background: #3399FF;
    }
}

@-o-keyframes cssload-movement {
    from {
        -o-transform: scale(1.0) translateY(0px) rotateX(0deg);
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    to {
        -o-transform: scale(1.5) translateY(-24px) rotateX(45deg);
        box-shadow: 0 24px 39px rgba(0,0,0,0.4);
        background: #3399FF;
    }
}

@-ms-keyframes cssload-movement {
    from {
        -ms-transform: scale(1.0) translateY(0px) rotateX(0deg);
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    to {
        -ms-transform: scale(1.5) translateY(-24px) rotateX(45deg);
        box-shadow: 0 24px 39px rgba(0,0,0,0.4);
        background: #3399FF;
    }
}

@-webkit-keyframes cssload-movement {
    from {
        -webkit-transform: scale(1.0) translateY(0px) rotateX(0deg);
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    to {
        -webkit-transform: scale(1.5) translateY(-24px) rotateX(45deg);
        box-shadow: 0 24px 39px rgba(0,0,0,0.4);
        background: #3399FF;
    }
}

@-moz-keyframes cssload-movement {
    from {
        -moz-transform: scale(1.0) translateY(0px) rotateX(0deg);
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    to {
        -moz-transform: scale(1.5) translateY(-24px) rotateX(45deg);
        box-shadow: 0 24px 39px rgba(0,0,0,0.4);
        background: #3399FF;
    }
}

Simple CSS text Animation - Get HTML and CSS

Design by : http://codepen.io/bennettfeely
HTML code :

<div class="cssload-preloader">
            <span>L</span>
        <span>o</span>
        <span>a</span>
        <span>d</span>
        <span>i</span>
        <span>n</span>
        <span>g</span>

</div>

CSS code :

.cssload-preloader {
    font-family: Arial, Tahoma;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 10;
    display: box;
        display: -o-box;
        display: -ms-box;
        display: -webkit-box;
        display: -moz-box;
    display: flex;
        display: -o-flex;
        display: -ms-flex;
        display: -webkit-flex;
        display: -moz-flex;
    box-pack: center;
        -o-box-pack: center;
        -ms-box-pack: center;
        -webkit-box-pack: center;
        -moz-box-pack: center;
    justify-content: center;
        -o-justify-content: center;
        -ms-justify-content: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
    box-align: center;
        -o-box-align: center;
        -ms-box-align: center;
        -webkit-box-align: center;
        -moz-box-align: center;
    align-items: center;
        -o-align-items: center;
        -ms-align-items: center;
        -webkit-align-items: center;
        -moz-align-items: center;
    transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
    perspective: 487px;
        -o-perspective: 487px;
        -ms-perspective: 487px;
        -webkit-perspective: 487px;
        -moz-perspective: 487px;
    overflow: hidden;
    animation: wobble 5.75s ease-in-out infinite;
        -o-animation: wobble 5.75s ease-in-out infinite;
        -ms-animation: wobble 5.75s ease-in-out infinite;
        -webkit-animation: wobble 5.75s ease-in-out infinite;
        -moz-animation: wobble 5.75s ease-in-out infinite;
    padding-bottom: 2em;
}


.cssload-preloader > span {
    font-size: 49px;
    animation: 5.75s ease-in-out infinite;
        -o-animation: 5.75s ease-in-out infinite;
        -ms-animation: 5.75s ease-in-out infinite;
        -webkit-animation: 5.75s ease-in-out infinite;
        -moz-animation: 5.75s ease-in-out infinite;
    color: transparent;
    text-shadow: 0 0 0px rgb(0,0,0);
}
span:nth-child(-n+3) {
    animation-delay: -2.88s;
        -o-animation-delay: -2.88s;
        -ms-animation-delay: -2.88s;
        -webkit-animation-delay: -2.88s;
        -moz-animation-delay: -2.88s;
}

span:nth-child(1),
span:nth-last-child(1) {
    animation-name: blur-1;
        -o-animation-name: blur-1;
        -ms-animation-name: blur-1;
        -webkit-animation-name: blur-1;
        -moz-animation-name: blur-1;
}



span:nth-child(2),
span:nth-last-child(2) {
    animation-name: blur-2;
        -o-animation-name: blur-2;
        -ms-animation-name: blur-2;
        -webkit-animation-name: blur-2;
        -moz-animation-name: blur-2;
}



span:nth-child(3),
span:nth-last-child(3) {
    animation-name: blur-3;
        -o-animation-name: blur-3;
        -ms-animation-name: blur-3;
        -webkit-animation-name: blur-3;
        -moz-animation-name: blur-3;
}






@keyframes blur-1 {
    50% {
        text-shadow: 0 0 0.15em rgb(0,0,0);
    }
}

@-o-keyframes blur-1 {
    50% {
        text-shadow: 0 0 0.15em rgb(0,0,0);
    }
}

@-ms-keyframes blur-1 {
    50% {
        text-shadow: 0 0 0.15em rgb(0,0,0);
    }
}

@-webkit-keyframes blur-1 {
    50% {
        text-shadow: 0 0 0.15em rgb(0,0,0);
    }
}

@-moz-keyframes blur-1 {
    50% {
        text-shadow: 0 0 0.15em rgb(0,0,0);
    }
}

@keyframes blur-2 {
    50% {
        text-shadow: 0 0 0.075em rgb(0,0,0);
    }
}

@-o-keyframes blur-2 {
    50% {
        text-shadow: 0 0 0.075em rgb(0,0,0);
    }
}

@-ms-keyframes blur-2 {
    50% {
        text-shadow: 0 0 0.075em rgb(0,0,0);
    }
}

@-webkit-keyframes blur-2 {
    50% {
        text-shadow: 0 0 0.075em rgb(0,0,0);
    }
}

@-moz-keyframes blur-2 {
    50% {
        text-shadow: 0 0 0.075em rgb(0,0,0);
    }
}

@keyframes blur-3 {
    50% {
        text-shadow: 0 0 0.05em rgb(0,0,0);
    }
}

@-o-keyframes blur-3 {
    50% {
        text-shadow: 0 0 0.05em rgb(0,0,0);
    }
}

@-ms-keyframes blur-3 {
    50% {
        text-shadow: 0 0 0.05em rgb(0,0,0);
    }
}

@-webkit-keyframes blur-3 {
    50% {
        text-shadow: 0 0 0.05em rgb(0,0,0);
    }
}

@-moz-keyframes blur-3 {
    50% {
        text-shadow: 0 0 0.05em rgb(0,0,0);
    }
}

@keyframes wobble {
    from, to {
        transform: rotateY(-45deg);
    }
    50% {
        transform: rotateY(45deg);
    }
}

@-o-keyframes wobble {
    from, to {
        -o-transform: rotateY(-45deg);
    }
    50% {
        -o-transform: rotateY(45deg);
    }
}

@-ms-keyframes wobble {
    from, to {
        -ms-transform: rotateY(-45deg);
    }
    50% {
        -ms-transform: rotateY(45deg);
    }
}

@-webkit-keyframes wobble {
    from, to {
        -webkit-transform: rotateY(-45deg);
    }
    50% {
        -webkit-transform: rotateY(45deg);
    }
}

@-moz-keyframes wobble {
    from, to {
        -moz-transform: rotateY(-45deg);
    }
    50% {
        -moz-transform: rotateY(45deg);
    }
}

Toronto Skyscape Purple - Website Template Free

Information :

• Design by : ironspider
• Features : Table based ~ 2 column ~ Fixed width
• Publisher : Hadesdzgn
• Live Demo - Download

HTML Table Template - 3 Column ( Header, Navigation, Footer )

Source Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

<title>WEB PAGE TITLE GOES HERE</title>

</head>

<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">

<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0">
<tr>

<!-- ============ HEADER SECTION ============== -->
<td colspan="3" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr>


<!-- ============ NAVIGATION BAR SECTION ============== -->
<tr><td colspan="3" valign="middle" height="30" bgcolor="#a9ae9f"><a href="#">Home</a></td></tr>

<tr>
<!-- ============ LEFT COLUMN (MENU) ============== -->
<td width="20%" valign="top" bgcolor="#999f8e">
<a href="#">Menu link</a><br>
<a href="#">Menu link</a><br>
<a href="#">Menu link</a><br>
<a href="#">Menu link</a><br>
<a href="#">Menu link</a>
</td>

<!-- ============ MIDDLE COLUMN (CONTENT) ============== -->
<td width="55%" valign="top" bgcolor="#d2d8c7">

<h2>Page heading</h2>

A three column layout with header, navigation bar and footer sections. The first, second and fourth table rows create the header, navigation bar and footer respectively and contain a single table cell each. All these table cells use colspan="3" attribute-value pair. <br>
<br>

The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).<br>
<br>

</td>

<td width="25%" valign="top" bgcolor="#999f8e">&nbsp;</td>

</tr>

<!-- ============ FOOTER SECTION ============== -->
<tr><td colspan="3" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr>
</table>
</body>

<html>

HTML Table Template - 2 Column with Header

Source code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

<title>WEB PAGE TITLE GOES HERE</title>

</head>

<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">

<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0">
<tr>

<!-- ============ HEADER SECTION ============== -->
<td colspan="2" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr>

<tr>
<!-- ============ LEFT COLUMN (MENU) ============== -->
<td width="20%" valign="top" bgcolor="#999f8e">
<a href="#">Menu link</a><br>
<a href="#">Menu link</a><br>
<a href="#">Menu link</a><br>
<a href="#">Menu link</a><br>
<a href="#">Menu link</a>
</td>

<!-- ============ RIGHT COLUMN (CONTENT) ============== -->
<td width="80%" valign="top" bgcolor="#d2d8c7">

<h2>Page heading</h2>


Here's a two column layout with a header section that spans the width of both columns. The first table row creates the header and contains a single table cell which uses the colspan="2" attribute-value pair. The website logo typically goes in the header section.<br>
<br>

The second table row contains two table cells which create the menu column (left) and the content column (right). The colspan attribute is not set in either so they default to colspan="1".</td></tr></table>
</body>

<html>

HTML Table Template - Basic 2 Column Layout

Source Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

<title>WEB PAGE TITLE GOES HERE</title>

</head>

<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">

<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0"><tr>

<!-- ============ LEFT COLUMN (MENU) ============== -->
<td width="20%" valign="top" bgcolor="#999f8e">
<a href="#">Menu link</a><br>
<a href="#">Menu link</a><br>
<a href="#">Menu link</a><br>
<a href="#">Menu link</a><br>
<a href="#">Menu link</a>
</td>

<!-- ============ RIGHT COLUMN (CONTENT) ============== -->
<td width="80%" valign="top" bgcolor="#d2d8c7">

<h1>Website Logo</h1>

<h2>Page heading</h2>


This is a basic two-column web page layout. The left column or the <i>menu column</i> is a narrow band of space (usually between 15-25% of the page width) and is reserved for a menu of hyperlinks leading to other pages on your website. The table used to create this layout employs a single table row containing two table cells.<br>
<br>

The right column or the <i>content column</i> takes up the lion's share of the web page width and contains the actual content of each particular page. In a basic two column layout like this, it is common to place the website logo at the top of the content column on each page.</td></tr></table>
</body>

<html>