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);
    }
}

MagWeb Blogger Template

MagWeb Blogger Template has 2 columns with 1 Right sidebar and four columns footer. Colors used in this template white and Red. Top Location in Attractive Slideshow options. This template is attractive Tabbed widget Design ready and Slideshow attached. MagWeb Blogger Template is Responsive design and Social book mark icons ready. This template is some more features are, Vertical Drop down menu, Photography, Minimalist and Magazine, Elegant, Auto post thumbnails, Responsive. This template is best choice for your magazine and  Simple blog.

• Design by : New Blogger Themes
• Publisher : Hadesdzgn
• Live Demo - Download

Flat UI Color Picker HTML - 80 Color

• Kode Warna #5C97BF
• Kode Warna #4B77BE
• Kode Warna #1F3A93
• Kode Warna #2574A9
• Kode Warna #67809F
• Kode Warna #34495E
• Kode Warna #3A539B
• Kode Warna #1E8BC3
• Kode Warna #6BB9F0
• Kode Warna #22313F
• Kode Warna #336E7B
• Kode Warna #19B5FE
• Kode Warna #89C4F4
• Kode Warna #2C3E50
• Kode Warna #3498DB
• Kode Warna #22A7F0
• Kode Warna #94E0EE
• Kode Warna #52B3D9
• Kode Warna #59ABE3
• Kode Warna #26A65B
• Kode Warna #1E824C
• Kode Warna #00B16A
• Kode Warna #2ABB9B
• Kode Warna #4DAF7C
• Kode Warna #03A678
• Kode Warna #26C281
• Kode Warna #019875
• Kode Warna #3FC380
• Kode Warna #16A085
• Kode Warna #2ECC71
• Kode Warna #C5EFF7
• Kode Warna #C8F7C5
• Kode Warna #049372
• Kode Warna #36D7B7
• Kode Warna #66CC99
• Kode Warna #1BA39C
• Kode Warna #1BBC9B
• Kode Warna #65C6BB
• Kode Warna #BFBFBF
• Kode Warna #ABB7B7
• Kode Warna #DADFE1
• Kode Warna #95A5A6
• Kode Warna #C5DCE2
• Kode Warna #BDC3C7
• Kode Warna #EEEEEE
• Kode Warna #D2D7D3
• Kode Warna #F0E2C5
• Kode Warna #EB9532
• Kode Warna #E67E22
• Kode Warna #F27935
• Kode Warna #F9BF3B
• Kode Warna #F7CA18
• Kode Warna #F9690E
• Kode Warna #F39C12
• Kode Warna #D35400
• Kode Warna #F4D03F
• Kode Warna #F5AB35
• Kode Warna #EB974E
• Kode Warna #F2784B
• Kode Warna #F4B350
• Kode Warna #E87E04
• Kode Warna #E74C3C
• Kode Warna #CF000F
• Kode Warna #C0392B
• Kode Warna #D64541
• Kode Warna #EF4836
• Kode Warna #96281B
• Kode Warna #D91E18
• Kode Warna #E26A6A
• Kode Warna #FF0000
• Kode Warna #F22613
• Kode Warna #E08283
• Kode Warna #9B59B6
• Kode Warna #8E44AD
• Kode Warna #BE90D4
• Kode Warna #BF55EC
• Kode Warna #9A12B3
• Kode Warna #913D88
• Kode Warna #722D6A
• Kode Warna #740A4E

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>