Código HTML

<ul class=»acorh»>
<li><a href=»#»>OPCIÓN 1</a>
<ul>
<li><a href=»URL11″>Opción 1.1</a></li>
<li><a href=»URL12″>Opción 1.2</a></li>
</ul>
</li>
<li><a href=»#»>OPCIÓN 2</a>
<ul>
<li><a href=»URL21″>Opción 2.1</a></li>
<li><a href=»URL22″>Opción 2.2</a></li>
<li><a href=»URL23″>Opción 2.3</a></li>
</ul>
</li>
<li><a href=»#»>OPCIÓN 3</a>
<ul>
<li><a href=»URL31″>Opción 3.1</a></li>
<li><a href=»URL32″>Opción 3.2</a></li>
</ul>
</li>
</ul>

Código CSS

ul.acorh,
ul.acorh * {
margin: 0;
padding: 0;
border: 0;
}
ul.acorh {
margin: 10px auto;
padding: 0;
list-style: none;
width: 100%;
font-size: 18px;
}
ul.acorh li {
list-style: none;
}
ul.acorh li a {
display: block;
padding: 10px 10px 10px 20px;
background: #333;
color: #eee;
border-bottom: 1px solid #000;
border-top: 1px solid #666;
text-decoration: none;
box-sizing: border-box;
}
ul.acorh li ul {
max-height: 0;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
transition: .3s all ease-in;
}
ul.acorh li li a {
padding: 10px 10px 10px 40px;
background: #999;
color: #000;
font-size: 16px;
border: 0;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}
ul.acorc li li:last-child a {
border-bottom: 0;
}
ul.acorh li:hover ul {
max-height: 300px;
transition: .3s all ease-in;
}
ul.acorh li a:hover {
background: #666;
color: #fff;
}

4- Desbloquear contenido con click

Código HTML<input id=»activar» name=»activar» type=»checkbox»>

<label class=»inputlabel» for=»activar»>Clic para ver contenido</label>
<div class=»desplegable»>
Aquí podría ir cualquier tipo de elemento
</div>
Código CSS

#activar ~ .desplegable {display: none;overflow: hidden;}

#activar:checked ~ .desplegable {display: block;}

5- Cinta adhesiva en imágenes

Código HTML

imagen con enlace

<a class=»cinta uno» href=»URL_ENLACE»>

<img border=»0″ src=»URL_IMAGEN» />
</a>

imagen sin enlace

<a class=»cinta uno»>

<img border=»0″ src=»URL_IMAGEN» />
</a>

Código CSS

.cinta {
position: relative;
text-align: center;
display: inline-block; *display: inline; zoom: 1;
margin: 20px auto 10px;
}
.uno:before,
.dos:before, .dos:after,
.tres:before, .tres:after,
.cuatro:before, .cuatro:after {
content: «»;
display: block;
width: 100px;
height: 30px;
position: relative;
top: 20px;
margin: auto;
background: rgba(255,255,200,0.6);
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}
/* Esto es sólo algo de estilo adicional para la imagen */
.cinta img {
display: inline-block; *display: inline; zoom: 1;
border: 1px solid #ddd;
margin: 0 20px;
padding: 8px;
background: #fff;
text-align:center;
vertical-align:top;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

6- Widget redes sociales (formato de fichero)

Código HTML

<link href=»//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css»
rel=»stylesheet»/>
<div class=»cartera»>
<span style=»font-family: Lobster, italic;font-size: 40px;»>En la Red</span>
<div class=»tarjeta tfacebook»>
<a class=»fa-facebook» href=»ENLACE_CTA_FACEBOOK»>Facebook</a>
</div>
<div class=»tarjeta tgoogle»>
<a class=»fa-google-plus» href=»ENLACE_CTA_GOOGLE+»>Google+</a>
</div>
<div class=»tarjeta ttwitter»>
<a class=»fa-twitter» href=»ENLACE_CTA_TWITTER»>Twitter</a>
</div>
<div class=»tarjeta tlinkedin»>
<a class=»fa-linkedin» href=»ENLACE_CTA_LINKEDIN»>Linkedin</a>
</div>
<div class=»tarjeta tpinterest»>
<a class=»fa-pinterest» href=»ENLACE_CTA_PINTEREST»>Pinterest</a>
</div>
<div class=»tarjeta tinstagram»>
<a class=»fa-instagram» href=»ENLACE_CTA_INSTAGRAM»>Instagram</a>
</div>
</div>

Código CSS

/* Reset */
.cartera, .tarjeta, .tarjeta a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Contenedor general */
.cartera {
position: relative;
width: 100%;
max-width: 500px;
margin: 40px auto 0;
text-align: center;
line-height: 56px;
font-size: 14px;
font-family: sans-serif;
}
/* Cada tarjeta */
.tarjeta {
position: relative;
width: 100%;
height: 30px;
margin: 0 auto;
padding: 0;
text-align: left;
border-bottom: 3px groove #eee;
}
/* Estado normal */
.tarjeta a {
position: relative;
display: block;
top: -6px;
left: 50%;
width: 96%;
margin-left: -48%;
padding: 0 0 0 16px;
line-height: 32px;
font-weight: normal;
border-radius: 16px 16px 0 0;
text-decoration: none;
box-shadow: 0 -2px 2px rgba(0,0,0,.1), 0 0 20px rgba(0,0,0,.2) inset;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}
/* Elevación de las tarjetas */
.tarjeta a:hover {
line-height: 52px;
top: -26px;
text-decoration: none;
}
/* Logos */
.tarjeta a:before {
display: inline-block; *display: inline; zoom: 1;
width: 20px;
margin-right: 10px;
text-align: center;
font-family: Fontawesome;
font-size: 18px;
}
/* Sombra parte inferior */
.tarjeta a:after {
content: «»;
position: absolute;
bottom: 0;
left: 50%;
width: 102%;
margin-left: -51%;
height: 2px;
display: block;
border-radius: 80px 80px 0 0 ;
box-shadow: 0 -2px 6px #666;
z-index: -1;
}
/* Colores Twitter */
.tarjeta.ttwitter a {
color: #ddd;
background-color: #01AFEC;
border-top: 2px solid #43CFFE;
}
/* Colores Google+ */
.tarjeta.tgoogle a {
color: #333;
background-color: #DB4A37;
border-top: 2px solid #E88C80;
}
/* Colores Facebook */
.tarjeta.tfacebook a {
color: #ccc;
background: #3B559F;
border-top: 2px solid #6B83C9;
}
/* Colores Linkedin */
.tarjeta.tlinkedin a {
color: #333;
background: #007BB6;
border-top: 2px solid #83A9CB;
}
/* Colores Pinterest */
.tarjeta.tpinterest a {
color: #ccc;
background: #CB2027;
border-top: 2px solid #E88C80;
}
/* Colores Instagram */
.tarjeta.tinstagram a {
color: #ccc;
background: #42719D;
border-top: 2px solid #83A9CB;
}
7- Envejecer imágenes

Código HTML

<div class=»antiguo»>
<a href=»URL_ENLACE»><img src=»URL_IMAGEN» /></a>
</div>

Código CSS

.antiguo {
position:relative;
display:table; /* Para centrado de imagen */
margin: 0 auto;
}
/* Sólo para Blogger que mete cosas raras al subir imágenes */
.antiguo a {
margin:0 auto !important;
}
.antiguo a:after {
content:»»;
position: absolute;
top: 0;
left:0;
display:block;
width:100%; /* La caja solapada ocupará todo el ancho y alto*/
height: 100%;
/* A continuación la imagen que le da el aspecto antiguo y un color semitransparente */
background: rgba(162,148,85,.5)
url(«http://4.bp.blogspot.com/-gFSvXmc_4dk/URBT3_rCFLI/AAAAAAAAIE4/TXM7uQ5Teb4/
s1600/textura.png») no-repeat center center;
/* Independientemente de su tamaño, el fondo se extiende ocupando toda la caja */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* Para teminar, unas sombritas oscuras */
-webkit-box-shadow: inset 0 0 80px #333;
-moz-box-shadow: inset 0 0 80px #333;
-o-box-shadow: inset 0 0 80px #333;
box-shadow: inset 0 0 80px #333;
}

8- Enlaces sobre imágenes, con efecto flow

Código HTML
<div class=»imagelinks»>
<div class=»links»>
<a href=»URL1″>Inicio</a>|<a href=»URL2″>Bio</a>|<a href=»URL3″>Contacto</a>
</div>
<img src=»URL_IMAGEN» />
</div>

Código CSS

.imagelinks {
display: block;
position: relative;
width: 100%;
max-width: 300px;
margin: 0 auto;
padding: 0;
border: 4px solid black;
}
.imagelinks img {
max-width:100%;
border: 0;
vertical-align: top;
}
.links {
width: 100%;
position:absolute;
bottom:0;
text-align:center;
background: #FFFFFF;
-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
.links a {
display: inline-block;
padding: 8px;
color:#000000;
}
.links:hover {
zoom: 1;
filter: alpha(opacity=100);
opacity:1;
}
9- Letra capital

Código HTML

<p>Aqui colocas cualquier texto</p>

Código CSS

p:first-letter {
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}

10- Mover 1px el enlace al hacer click

Código HTML

<p>Los códigos CSS o en español (…) <a href=»#» title=»Enlace»>documento</a>

estructurado escrito en un lenguaje de marcado.</p>

Código CSS

a:active {
position: relative;
top: 1px;

11- Tabs animados solo con CSS

Código HTML

<div class=»tabs»>

<div class=»tab»>
<input type=»radio» id=»tab-1″ name=»tab-group-1″ checked>
<label for=»tab-1″>Tab 1</label>

<div class=»content»>
<p>Aquí va algún contenido para el tab 1</p>
</div>
</div>

<div class=»tab»>
<input type=»radio» id=»tab-2″ name=»tab-group-1″>
<label for=»tab-2″>Tab 2</label>

<div class=»content»>
<p>Aquí va algún contenido para el tab 2</p>

<img src=»http://lorempixum.com/200/100/technics/»>
</div>
</div>

<div class=»tab»>
<input type=»radio» id=»tab-3″ name=»tab-group-1″>
<label for=»tab-3″>Tab 3</label>

<div class=»content»>
<p>Aquí va algún contenido para el tab 3</p>

<img src=»http://lorempixum.com/200/100/nightlife/»>
</div>
</div>

</div>

Código CSS

.tabs {
position: relative;
min-height: 200px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;

-webkit-transform: translate3d(0, 0, 0);

-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);

-webkit-transition: all 0.6s ease;

-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;

-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}

Mira aquí los resultados

12- Menú circular animado

Código HTML
<ul class=»menured»>
<li>
<a class=»red1″></a>
<div>
<h5>Para empezar</h5>
<a href=»javascript:void();»>Inicio</a>
<a href=»javascript:void();»>Portfolio</a>
</div>
</li>
<li>
<a class=»red2″></a>
<div>
<h5>Información</h5>
<a href=»javascript:void();»>Sobre nosotros</a>
<a href=»javascript:void();»>Proyectos</a>
</div>
</li>
<li>
<a class=»red3″></a>
<div>
<h5>En redes</h5>
<a href=»javascript:void();»>Twitter</a>
<a href=»javascript:void();»>Facebook</a>
<a href=»javascript:void();»>Google+</a>
</div>
</li>
<li>
<a class=»red4″></a>
<div>
<h5>Contacto</h5>
<a href=»javascript:void();»>eMail</a>
<a href=»javascript:void();»>Formulario</a>
<a href=»javascript:void();»>Localización</a>
</div>
</li>
</ul>

Código CSS

<style>
ul.menured * {margin: 0 auto; padding: 0; text-indent: 0;
-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s
ease-in-out;}

ul.menured {list-style: none; width: 1800px; max-width: 100%; margin: 0 auto; text-align:
center;}
ul.menured li {position: relative; display:inline-block; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; box-sizing: border-box; width:44px; height: 44px; overflow:
hidden; margin: 2px; padding: 5px; border-radius: 44px; border: 1px solid transparent;
background: #fff;
-moz-box-shadow: 1px 1px 3px #555; -webkit-box-shadow: 1px 1px 3px #555; box-shadow:
1px 1px 3px #555;}

ul.menured li a[class^=red] {position: absolute; top: 5px; left: 5px; display: block;width:
32px;height: 32px; -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform:
rotate(0deg);}

a.red1
{background:url(https://2.bp.blogspot.com/-BLOpL79hRq0/UdNeyumjXYI/AAAAAAAAK7E/4
gCBEFR4JRk/s32/home.png) no-repeat;}
a.red2
{background:url(https://2.bp.blogspot.com/-rvP0hlwHzEk/UdNeoq9rEgI/AAAAAAAAK60/Nq_
kzwUPiFY/s32/info.png) no-repeat;}
a.red3
{background:url(https://2.bp.blogspot.com/-5H9SkAxPuXQ/UdNep8XWLzI/AAAAAAAAK68/
BkXJ4YvmGOg/s32/redes.png) no-repeat;}
a.red4
{background:url(https://4.bp.blogspot.com/-kyZIdwOjJmI/UdNen_SC6dI/AAAAAAAAK6s/Bp
mHTKLYkNg/s32/contacto.png) no-repeat;}

ul.menured li div {margin: 0px 8px 5px 38px; text-align: center;}

ul.menured li div h5 {text-align: left; text-transform: uppercase;}
ul.menured li div a {display: inline;margin: 0 3px;font-size: 12px; color: #F36900;}

ul.menured div a:hover {color: grey;}

ul.menured li:hover {width:240px;}
ul.menured li:hover a[class^=red] {-moz-transform: rotate(720deg); -webkit-transform:
rotate(720deg); transform: rotate(720deg);}
</style>

13- Widget de redes sociales con efecto Zoom

Código HTML

<div class=»expandir»>
<ul>
<li><a href=»URL_Destino1″><img
src=»https://3.bp.blogspot.com/-eGu2x_YLqKU/T1kGDFwznoI/AAAAAAAAB_w/NS5i4Hqxap
4/s400/nav-facebook.png»/><span>FACEBOOK</span></a></li>
<li><a href=»URL_Destino2″><img
src=»https://2.bp.blogspot.com/-w3_KpmEDVzM/T1kGD9inLtI/AAAAAAAACAg/tuPkIH5aZr
Q/s400/nav-twitter.png»/><span>TWITTER</span></a></li>
<li><a href=»URL_Destino3″><img
src=»https://4.bp.blogspot.com/-AzwYElFbe0k/T1ksg16heiI/AAAAAAAACA4/Ft2bKsyl4oE/s4
00/nav-google2.png»/><span>GOOGLE PLUS</span></a></li>
<li><a href=»URL_Destino4″><img
src=»https://3.bp.blogspot.com/-w_v6EZR3zNc/T1kGDd-S9RI/AAAAAAAAB_4/gI2ANh3lvZ0
/s400/nav-linkedin.png»/><span>LINKEDIN</span></a></li>
<li><a href=»URL_Destino4″><img
src=»https://4.bp.blogspot.com/-ZsJYr_1jqSc/T1kshWqfRSI/AAAAAAAACBQ/KLB6asXBGrE
/s400/nav-youtube.png»/><span>YOUTUBE</span></a></li>
<li><a href=»URL_Destino4″><img
src=»https://4.bp.blogspot.com/-w1htIE08Ew4/T1kGDhMCrKI/AAAAAAAACAQ/L2hlwp1qYio
/s400/nav-rss.png»/><span>RSS</span></a></li>
</ul>
</div>

Código CSS

/* Contenedor general y reset de margin y padding */

.expandir * {
margin: 0;
padding: 0;
}
.expandir {
font-family:Arial, Helvetica, sans-serif;
line-height:normal;
margin:20px auto 30px;
height:80px;
width:530px;
}
/* Las imágenes irán en forma de lista */
.expandir ul {
padding-top:10px;
margin-left:10px;
}
/* Se hacen flotar los elementos para que queden en línea y se elimina el estilo que podría
haber predefinido para listas */
.expandir ul li {
float:left;
list-style-type:none;
}
/* Anulamos estilo predifinido para enlaces en listas */
.expandir ul li a {
text-decoration:none;
}
/* Estilo de cada imagen en situación inicial y transición suave */
.expandir ul li a img {
width:32px; /* Ancho inicial imagénes. 50% real */
height:32px; /* Alto inicial imagénes. 50% real */
border:none;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
}
/* El texto que acompaña a las imágenes no se ve inicialmente */
.expandir ul li a span {
display:none;
}
/* Mostramos el texto al hacer hover */
.expandir ul li:hover a span {
display:block;
font-size:14px;
text-align:center;
color:#000;
}
/* Agrandamos la imagen al hacer hover */
.expandir ul li:hover a img {
width:64px;
height:64px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

14- Redondear imagen

Código HTML

<img class=»circular-square» src=»URL de imagen» />

Código CSS

.circular-square {
border-radius: 50%;
}

15- Widget de categorías

Código HTML

<div class=»mis-categorias»><a href=»URL CATEGORIA 1″>CATEGORIA 1</a></div>

<div class=»mis-categorias»><a href=»URL CATEGORIA 2″>CATEGORIA 2</a></div>
<div class=»mis-categorias»><a href=»URL CATEGORIA 3″>CATEGORIA 3</a></div>
<div class=»mis-categorias»><a href=»URL CATEGORIA 4″>CATEGORIA 4</a></div>

Código CSS

.mis-categorias{
width: 100%;
height: 62px;
background-color: #0d7de0;
padding: 17px;
margin-bottom: 4px;
text-align: center;
text-transform: uppercase;
font-family: ‘Open Sans’, Arial;
font-size: 1.2em;
color: #fff;
}

.mis-categorias a{
color: #fff;
text-decoration: none;
}

.mis-categorias a:hover{
color: #fff;
}

.mis-categorias:hover{
background-color: #FF5733;
}

16- Cajas de contenidos de colores

Código HTML

<div class=»content-box-blue»>
Colocas aquí el texto que deceas resaltar con esta caja de contenido
</div>

Código CSS
/* Content Boxes
———————————————————— */
.content-box-blue,
.content-box-gray,
.content-box-green,
.content-box-purple,
.content-box-red,
.content-box-yellow,
.content-light-blue {
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
}

.content-box-blue {
background-color: #d8ecf7;
border: 1px solid #afcde3;
}

.content-box-gray {
background-color: #e2e2e2;
border: 1px solid #bdbdbd;
}

.content-box-green {
background-color: #d9edc2;
border: 1px solid #b2ce96;
}

.content-box-purple {
background-color: #e2e2f9;
border: 1px solid #bebde9;
}

.content-box-red {
background-color: #f9dbdb;
border: 1px solid #e9b3b3;
}

.content-box-yellow {
background-color: #fef5c4;
border: 1px solid #fadf98;
}

.content-light-blue {
background-color: #B2FBFC;
border: 1px solid #92DCFE;
}
17- Botón
Código HTML

<a class=»btnAzul» href=»URL Del Botón»>Texto Del Botón</a>

Código CSS

a.btnAzul {
display: block;
width: 250px;
height: 60px;
padding: 25px 0 0 0;
margin: 0 auto;

background: #4682B4;
background: -moz-linear-gradient(top, #87CEEB 0%, #4682B4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87CEEB),
color-stop(100%,#4682B4));

box-shadow: inset 0px 0px 6px #fff;

-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #62C2F9;
border-radius: 10px;

font: bold 25px Helvetica, Sans-Serif;

text-align: center;
text-transform: uppercase;
text-decoration: none;
color: #3090C7;
text-shadow: 0px 1px 2px #62C2F9;
}

18- Menú multicolor

Código HTML

<body>

<div id=»menu»>

<ul>
<li id=»item-uno»>
<a href=»#»>Enlace uno</a>
</li>
<li id=»item-dos»>
<a href=»#»>Enlace dos</a>
</li>

<li id=»item-tres»>
<a href=»#»>Enlace tres</a>
</li>

<li id=»item-cuatro»>
<a href=»#»>Enlace cuatro</a>
</li>

<li id=»item-cinco»>
<a href=»#»>Enlace cinco</a>
</li>

<li id=»item-seis»>
<a href=»#»>Enlace seis</a>
</li>
</ul>

</div>

</body>

Código CSS

body {
margin: 0;
padding: 0;
font: normal 13px arial, helvetica, sans-serif;
background: #000;
}

#menu {
width: 900px;
margin: 0 auto;
margin-top: 50px;
}

#menu ul {
list-style: none;
margin: 0;
}

#menu ul li {
margin: 0;
float: left;
}

#menu ul li a {
margin:0 2px;
width: 138px;
font-weight:bold;
font-size:1.5em;
text-align: center;
line-height: 44px;
display:block;
text-decoration: none
}

#menu ul li a:hover {
color:#000;
}

#item-uno a {
border-bottom:5px solid #f00;
color: #f00
}

#item-dos a {
border-bottom:5px solid #f80;
color: #f80;
}

#item-tres a {
border-bottom:5px solid #ff0;
color: #ff0;
}

#item-cuatro a {
border-bottom:5px solid #8f0;
color: #8f0;
}

#item-cinco a {
border-bottom:5px solid #0ff;
color: #0ff;
}

#item-seis a {
border-bottom:5px solid #08f;
color: #08f;
}
#item-uno a:hover {
background:#f00;
}

#item-dos a:hover {
background:#f80;
}

#item-tres a:hover {
background:#ff0;
}

#item-cuatro a:hover {
background:#8f0;
}

#item-cinco a:hover {
background:#0ff;
}

#item-seis a:hover {
background:#08f;
}