<nav class="dropdownmenu">

<ul>
<li><a href="/">Home</a></li>
<li><a href="/">About Me</a></li>
<li><a href="#">Articles on HTML5 & CSS3</a>
<ul id="submenu">
<li><a href="">Difference between SVG vs. Canvas</a></li>
<li><a href="">New features in HTML5</a></li>
<li><a href=" ">Creating links to sections within a webpage</a></li>
</ul>
</li>
<li><a href="">News</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</nav>

.dropdownmenu ul, .dropdownmenu li {

margin: 0;
padding: 0;
}

.dropdownmenu ul {
background: gray;
list-style: none;
width: 100%;
}

.dropdownmenu li {
float: left;
position: relative;
width:auto;
}

.dropdownmenu a {
background: #30A6E6;
color: #FFFFFF;
display: block;
font: bold 12px/20px sans-serif;
padding: 10px 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}

.dropdownmenu li:hover a {
background: #000000;

#submenu {
 left: 0;

opacity: 0;

position: absolute;

top: 35px;

visibility: hidden;

z-index: 1;

li:hover ul#submenu {

opacity: 1;

top: 40px; /* adjust this as per top nav padding top & bottom comes */

visibility: visible;

#submenu li {

float: none;

width: 100%;

#submenu a:hover {

background: #DF4B05;

#submenu a {

background-color:#000000;

}
HTML

<div class="contenedor">

<p>Hola</p>

<ul>

<li>mundo</li>

<li>Usuario</li>

<li>Jeancarlos</li>

</ul>

</div>

CSS

body {

background: tomato;

.contenedor {

display: flex;

width: 300px;

height: 40px;

color: #fff;

font-size: 40px;

line-height: 40px;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;
 overflow: hidden;

ul {

list-style: none;

padding-left: 10px;

animation: cambiar 7s infinite;

ul, p {

margin: 0;

@keyframes cambiar {

0%{ margin-top: 0;}

20%{ margin-top: 0;}

25% {margin-top: -40px;}

50% {margin-top: -40px;}

55% {margin-top: -80px;}

80% {margin-top: -80px;}

85% {margin-top: -40px;}

95% {margin-top: -40px;}

100% {margin-top: 0;}

}
TEXTO QUE PARPADEA

<span class="parpadea text"><strong>Este texto parpadea</strong>

.text {

font-size:28px;

font-family:helvetica;

font-weight:bold;

color:#71d90b;

text-transform:uppercase;

.parpadea {

animation-name: parpadeo;

animation-duration: 1s;

animation-timing-function: linear;

animation-iteration-count: infinite;

-webkit-animation-name:parpadeo;

-webkit-animation-duration: 1s;

-webkit-animation-timing-function: linear;

-webkit-animation-iteration-count: infinite;

@-moz-keyframes parpadeo{

0% { opacity: 1.0; }

50% { opacity: 0.0; }

 100% { opacity: 1.0; }

@-webkit-keyframes parpadeo {

0% { opacity: 1.0; }

50% { opacity: 0.0; }

100% { opacity: 1.0; }

@keyframes parpadeo {

0% { opacity: 1.0; }

50% { opacity: 0.0; }

100% { opacity: 1.0; }

}
BOTON animado

<div class="boton">

<a href="http://www.opencademy.com">HOLA JOE!</a>

</div>

.boton {

border-radius: 4px;

background-color: rgb( 202, 206, 207 );

position: absolute;

left: 37px;

top: 45px;

width: 480px;

height: 160px;

box-shadow: 2px 3px 10px #000;

-webkit-transition: box-shadow .6s, text-shadow .3s;

box-sizing: border-box;

/* texto*/

font-size: 4em;

line-height: 160px;

text-align: center;

color: #8c888c;

text-shadow: 1px 1px 6px #000;

}
.boton:hover {

box-shadow: 3px 4px 30px #000;

text-shadow: 0 0 0 ;

.boton:active {

box-shadow: 0 0 0;

a:link, a:visited, a:hover, a:active {

color: #8c888c;

text-decoration: none;

}
Formulario de envio de correo

<div id="form-main">

<div id="form-div">

<form class="form" id="form1">

<p class="name">

<input name="name" type="text"

class="validate[required,custom[onlyLetter],length[0,100]] feedback-input"
placeholder="Name" id="name" />

</p>

<p class="email">

<input name="email" type="text"

class="validate[required,custom[email]] feedback-input" id="email"
placeholder="Email" />

</p>

<p class="text">

<textarea name="text" class="validate[required,length[6,300]] feedback-

input" id="comment" placeholder="Comment"></textarea>

</p>

<div class="submit">

<input type="submit" value="SEND" id="button-blue"/>

<div class="ease"></div>

</div>
 </form>

</div>

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

html{ background:url(http://thekitemap.com/images/feedback-img.jpg) no-

repeat;

background-size: cover;

height:100%;

#feedback-page{

text-align:center;

#form-main{

width:100%;

float:left;

padding-top:0px;

#form-div {

background-color:rgba(72,72,72,0.4);

padding-left:35px;

padding-right:35px;
 padding-top:35px;

padding-bottom:50px;

width: 450px;

float: left;

left: 50%;

position: absolute;

margin-top:30px;

margin-left: -260px;

-moz-border-radius: 7px;

-webkit-border-radius: 7px;

.feedback-input {

color:#3c3c3c;

font-family: Helvetica, Arial, sans-serif;

font-weight:500;

font-size: 18px;

border-radius: 0;

line-height: 22px;

background-color: #fbfbfb;

padding: 13px 13px 13px 54px;

margin-bottom: 10px;

width:100%;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;
 box-sizing: border-box;

border: 3px solid rgba(0,0,0,0);

.feedback-input:focus{

background: #fff;

box-shadow: 0;

border: 3px solid #3498db;

color: #3498db;

outline: none;

padding: 13px 13px 13px 54px;

.focused{

color:#30aed6;

border:#30aed6 solid 3px;

/* Icons ---------------------------------- */

#name{

background-image:
url(http://rexkirby.com/kirbyandson/images/name.svg);

background-size: 30px 30px;

background-position: 11px 8px;

background-repeat: no-repeat;

}
#name:focus{

background-image:
url(http://rexkirby.com/kirbyandson/images/name.svg);

background-size: 30px 30px;

background-position: 8px 5px;

background-position: 11px 8px;

background-repeat: no-repeat;

#email{

background-image:
url(http://rexkirby.com/kirbyandson/images/email.svg);

background-size: 30px 30px;

background-position: 11px 8px;

background-repeat: no-repeat;

#email:focus{

background-image:
url(http://rexkirby.com/kirbyandson/images/email.svg);

background-size: 30px 30px;

background-position: 11px 8px;

background-repeat: no-repeat;

#comment{

background-image:
url(http://rexkirby.com/kirbyandson/images/comment.svg);
 background-size: 30px 30px;

background-position: 11px 8px;

background-repeat: no-repeat;

textarea {

width: 100%;

height: 150px;

line-height: 150%;

resize:vertical;

input:hover, textarea:hover,

input:focus, textarea:focus {

background-color:white;

#button-blue{

font-family: 'Montserrat', Arial, Helvetica, sans-serif;

float:left;

width: 100%;

border: #fbfbfb solid 4px;

cursor:pointer;

background-color: #3498db;

color:white;

font-size:24px;
 padding-top:22px;

padding-bottom:22px;

-webkit-transition: all 0.3s;

-moz-transition: all 0.3s;

transition: all 0.3s;

margin-top:-4px;

font-weight:700;

#button-blue:hover{

background-color: rgba(0,0,0,0);

color: #0493bd;

.submit:hover {

color: #3498db;

.ease {

width: 0px;

height: 74px;

background-color: #fbfbfb;

-webkit-transition: .3s ease;

-moz-transition: .3s ease;

-o-transition: .3s ease;

-ms-transition: .3s ease;

 transition: .3s ease;

.submit:hover .ease{

width:100%;

background-color:white;

@media only screen and (max-width: 580px) {

#form-div{

left: 3%;

margin-right: 3%;

width: 88%;

margin-left: 0;

padding-left: 3%;

padding-right: 3%;

}
Visor de imgenes

<h1>Incredibly Basic Slider</h1>

<div id="slider">

<a href="#" class="control_next">></a>

<a href="#" class="control_prev"><</a>

<ul>

<li>SLIDE 1</li>

<li style="background: #aaa;">SLIDE 2</li>

<li>SLIDE 3</li>

<li style="background: #aaa;">SLIDE 4</li>

</ul>

</div>

<div class="slider_option">

<input type="checkbox" id="checkbox">

<label for="checkbox">Autoplay Slider</label>

</div>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);

html {

border-top: 5px solid #fff;

background: #58DDAF;

color: #2a2a2a;

}
html, body {

margin: 0;

padding: 0;

font-family: 'Open Sans';

h1 {

color: #fff;

text-align: center;

font-weight: 300;

#slider {

position: relative;

overflow: hidden;

margin: 20px auto 0 auto;

border-radius: 4px;

#slider ul {

position: relative;

margin: 0;

padding: 0;

height: 200px;

list-style: none;
}

#slider ul li {

position: relative;

display: block;

float: left;

margin: 0;

padding: 0;

width: 500px;

height: 300px;

background: #ccc;

text-align: center;

line-height: 300px;

a.control_prev, a.control_next {

position: absolute;

top: 40%;

z-index: 999;

display: block;

padding: 4% 3%;

width: auto;

height: auto;

background: #2a2a2a;

color: #fff;

text-decoration: none;
 font-weight: 600;

font-size: 18px;

opacity: 0.8;

cursor: pointer;

a.control_prev:hover, a.control_next:hover {

opacity: 1;

-webkit-transition: all 0.2s ease;

a.control_prev {

border-radius: 0 2px 2px 0;

a.control_next {

right: 0;

border-radius: 2px 0 0 2px;

.slider_option {

position: relative;

margin: 10px auto;

width: 160px;

font-size: 18px;

}
JS

jQuery(document).ready(function ($) {

$('#checkbox').change(function(){

setInterval(function () {

moveRight();

}, 3000);

});

var slideCount = $('#slider ul li').length;

var slideWidth = $('#slider ul li').width();

var slideHeight = $('#slider ul li').height();

var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {

$('#slider ul').animate({

left: + slideWidth
 }, 200, function () {

$('#slider ul li:last-child').prependTo('#slider ul');

$('#slider ul').css('left', '');

});

};

function moveRight() {

$('#slider ul').animate({

left: - slideWidth

}, 200, function () {

$('#slider ul li:first-child').appendTo('#slider ul');

$('#slider ul').css('left', '');

});

};

$('a.control_prev').click(function () {

moveLeft();

});

$('a.control_next').click(function () {

moveRight();

});

});
Rotacin de imgenes

<img src="http://i.imgur.com/3FEaiiS.png" alt="" class="knob">

<img src="http://i.imgur.com/M7f9g4a.png" class="bg">

body,html {

background: #141415;

width: 100%;

height: 100%;

margin: 0;

padding:0;

.knob, .bg{

position: absolute;

left: 50%;

margin-left: -200px;

.knob {

z-index: 1;

-webkit-animation: turn 3s linear infinite;

@-webkit-keyframes turn {

100% {
 -webkit-transform: rotate(360deg);