Si bien actualmente es posible crear un sitio web sin tocar ni una línea de código, el saber manejar HTML, CSS, PHP siempre potenciará las posibilidades en el diseño web, ya que son la base de todo. Es por eso que hoy traigo 18 increíbles códigos CSS para páginas web, míralos bien de seguro te llevas algunos. 😉
Es la primera vez que dedico un post a los codigos CSS en mi blog, por lo tanto comenzaré con una introducción para los novatos.
Que es el código CSS?
Los códigos CSS o en español Hojas de estilo en cascada (siglas en inglés de Cascading Stylesheets) es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para establecer el diseño visual de las páginas web, e interfaces de usuario escritas en HTML o XHTML.
Todas las páginas web usan CSS para definir los estilos, o deberían. Los motivos por los que es así, entre otros son:
- Genera un código más fácil de mantener
- La cascada nos permite sobreescribir reglas
- Evitamos escribir mucho código, porque la parte de los estilos se escribe una única vez en el CSS, lo que nos descarga el HTML de mucho código fuente repetitivo.
- Vamos a poder crear efectos que antes solo era posible con trucos poco recomendables o la edición de imágenes mediante programas como Photoshop.
Como incluir códigos CSS en tu página web??
Existen tres formas de incluir códigos CSS en el HTML de tu web, te las explico a continuación:
1- Incluir el estilo como atributo de la etiqueta HTML
Se pueden emplear instrucciones de estilo CSS con el atributo style dentro de cualquier etiqueta HTML. Por ejemplo:
Es la opción menos aconsejada y usada, puesto que no permite separación entre contenido y presentación, ni estandarizar y reutilizar. Pero es la opción a emplear en caso de querer aplicar un formato de forma excepcional a un solo elemento.
2- Incluir el estilo a nivel de página
Se pueden emplear instrucciones de estilo CSS empleando una etiqueta <STYLE> en la sección HEAD de nuestro documento HTML. Por ejemplo:
<style type=»text/cas»>
h1 { color: red; }
.imp { font-size: x-large; }
</style>
Esta forma permite aplicar el estilo a todos los elementos de un determinado tipo de contenido (a nivel de etiqueta), de una determinada clase (a nivel de class), o bien a un elemento determinado (a nivel de id).
3- Incluir el estilo en archivo .css independiente, y usar a nivel de sitio
Podemos definir un documento CSS con el estilo, y utilizarlo así en todas las páginas del sitio uniformemente.
Esta es la manera mas aconsejable de aplicar CSS a un sitio web. Dado que permite una mejor separación entre contenido y presentación.
El código dentro del fichero tiene el mismo formato que la anterior, pero sin el style. Por ejemplo podrias tener un fichero llamado «estilos.css» cuyo contenido sea:
h1 { color: red; }
.imp { font-size: x-large; }
Bueno como introducción al tema creo que esto fue suficiente, mas adelante dedicaré un post para profundizar en los códigos CSS.
18 Códigos CSS para páginas web
En cada uno de los casos te dejo el condigo CSS junto al HTML para que no te compliques y puedas aplicarlo sin problemas.
1- Llamativa tabla.
Con los siguentes codigos CSS lograras una tabla con diferentes colores entre encabezado y demás filas. Además al pasar el cursosr por una fila esta se destaca con otro color.
Código HTML
<body>
<table >
<caption>Contenido nutricional por cada 100 g de alimento.</caption>
<tr> <th>Alimento</th> <th>Calorías (kCal)</th> <th>Grasas (g)</th>
<th>Proteína (g)</th> <th>Carbohidratos (g)</th>
</tr>
<tr> <td>Arándano</td> <td>49</td> <td>0.2</td>
<td>0.4</td> <td>12.7</td>
</tr>
<tr> <td>Plátano</td> <td>90</td> <td>0.3</td>
<td>1.0</td> <td>23.5</td>
</tr>
<tr> <td>Cereza</td> <td>46</td> <td>0.4</td>
<td>0.9</td> <td>10.9</td>
</tr>
<tr> <td>Fresa</td> <td>37</td> <td>0.5</td>
<td>0.8</td> <td>8.3</td>
</tr>
</table>
</body>
Código CSS
/* tabla con estilo css*/
body {font-family: Arial, Helvetica, sans-serif;}
table { font-family: «Lucida Sans Unicode», «Lucida Grande», Sans-Serif;
font-size: 12px; margin: 45px; width: 480px; text-align: left; border-collapse: collapse; }
th { font-size: 13px; font-weight: normal; padding: 8px; background: #b9c9fe;
border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; }
td { padding: 8px; background: #e8edff; border-bottom: 1px solid #fff;
color: #669; border-top: 1px solid transparent; }
2- Un slider para tu web
Con los siguientes códigos podrás crear un slider, algo muy llamativo en los sitios webs.
Código HTML
<div class=»slider»><div class=»slider»> <ul> <li> <img src=»http://dominicushoeve.com/wp-content/uploads/ktz/latest-high-resolution-wallpaper-1920×1080-70558-pictures-high-resolution-wallpaper-30whtvl34j4r12m8b0c1sa.jpg» alt=»»> </li> <li> <img src=»http://youghaltennisclub.ie/wp-content/uploads/2014/06/Tennis-Wallpaper-High-Definition-700×300.jpg» alt=»»></li> <li> <img src=»http://welltechnically.com/wp-content/uploads/2013/08/android-wallpapers-700×300.jpg» alt=»»></li> <li> <img src=»http://welltechnically.com/wp-content/uploads/2013/09/android-widescreen-wallpaper-14165-hd-wallpapers-700×300.jpg» alt=»»></li> </ul> </div>
Código CSS
.slider {.slider { width: 95%; margin: auto; overflow: hidden;}
.slider ul { display: flex; padding: 0; width: 400%; animation: cambio 20s infinite alternate linear;}
.slider li { width: 100%; list-style: none;}
.slider img { width: 100%;}
@keyframes cambio { 0% {margin-left: 0;} 20% {margin-left: 0;} 25% {margin-left: -100%;} 45% {margin-left: -100%;} 50% {margin-left: -200%;} 70% {margin-left: -200%;} 75% {margin-left: -300%;} 100% {margin-left: -300%;}}
3- Menú desplegable hover
Estos códigos dan como resultado un menú que al pasar el cursor sobre cada pestaña se despliegan de forma automática los sub-menús.
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
Sencillas líneas de código que permiten desbloquear cualquier tipo de contenido con un click.
<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
Si quieres destacar de forma original las imágenes de tu web puedes lograrlo con los siguientes códigos CSS para tu web. Estos te permitirán colocar cinta adhesiva en los extremos de cada imagen dando un lindo efecto.
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)
Las redes sociales nunca pueden faltar en un sitio web, con estos códigos CSS y HTML podrás mostrar tus redes en formato de un fichero muy atractivo. 🙂
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
Aquí va otra buena manera de editar imágenes de tu web mediante códigos CSS, estos le dará un efecto de antiguo a la imagen que se lo apliques.
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
Y seguimos con ediciones a imágenes, en este caso podrás colocar un menú en la parte inferior de la imagen con sus respectivos enlaces. Una forma muy buena para agregar informacion a las imágenes.
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
Aquí lo que enditaremos son los textos, dando a la primer letra de un texto un tamaño y color destacado.
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
Ahora le toca la edición a los enlaces, con este codigo CSS le otorgas un movimiento de 1px 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
Con este código puede poner una sección de tabs animados, sin la necesidad de utilizar jQuery.
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);
}
12- Menú circular animado
Usa los siguientes códigos CSS en tu página web para crear un atractivo menú circular animado. (Home, informacion, contacto, redes sociales)
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/4gCBEFR4JRk/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/BpmHTKLYkNg/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
Si estas buscando destacar tus redes sociales para que tus lectores te sigan puede que este widget te venga bien.
Código HTML
<div class=»expandir»>
<ul>
<li><a href=»URL_Destino1″><img src=»https://3.bp.blogspot.com/-eGu2x_YLqKU/T1kGDFwznoI/AAAAAAAAB_w/NS5i4Hqxap4/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/tuPkIH5aZrQ/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/s400/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 imgen
Cuantas veces necesitaste hacer circular una foto para tu web y tuviste que recurrir a editores como photoshop para hacerlo?. No se tu pero yo lo hice varias veces. 🙁 Con el siguiente simple codigo CSS podrás lograr un efecto circular de forma muy fácil.
Código HTML
<img class=»circular-square» src=»URL de imagen» />
Código CSS
.circular-square {
border-radius: 50%;
}
15- Widget de categorías
Excelentes códigos CSS y HTLM para crear un widget para que muestres a tus lectores las categorías de tu blog.
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
Una buena forma de resaltar un texto es colocandolo en una caja colorida, con estos códigos podrás crearlas fácilmente. Estas cajas son las que he usado en este post para resaltar los códigos CSS y HTML para tu pagina web.
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- Boton
En tu sitio web siempre vas a necesitasr insertar botones, con los siguientes códigos CSS y HTML podrás crear unos muy llamativos. Para el caso este es un botón de color azul, pero puedes tomar la base de código CSS y crear de los demás colores. 🙂
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
Para finalizar te dejo este llamativo menú con sus pestañas 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;
}
Bueno hasta aquí llego con estos 18 códigos CSS para paginas web. Espero que hayas encontrado algunos útiles y ya los estés aplicando. 🙂
Solo me queda aclarar que no he escrito estos fabulosos códigos sino que los he ido tomado de varias webs que he visto por ahí. Me he cerciorado que funcionen pero cualquier problema que tengas déjalo en los comentarios.
5
Excelente.
Que bueno te sirva. Saludos!! ?
3.5
Hola,
Este es uno de esos post que se tienen que guardar en favoritos por que siempre está bien tenerlo a mano. Con esos códigos ya solo queda personalizarlo al gusto de cada uno y listo.
Gracias y saludos.
Hola!
En principio gracias por pasarte y dejar tu comentario.
Por otro lado me alegra que esté compilado de códigos css te haya servido. Ya me contarás si aplicas alguno de ellos en tu web.
Saludos. 😊
Muchas gracias por el contenido, me sirve much0.
Gracias a vos por comentar, saludos.
Muchas gracias Saludos
Gracias a vos por pasarte y comentar. Saludos.
hola algunos dejan de funcionar en las demas apartados de la pagina
Hola Edgar, apuntame cuales no funcionan y los reviso. Gracias. 🙂
Pingback: ≫ ¿Cómo insertar un calendario en WordPress?【3 Métodos faciles】
Exelente