5 estilos para mejorar tus entradas Css

Alguna vez haz sentido que tus entradas son sencillas y quieres ponerles algo más para que tengan mejor presentación. En esta entrada te mostraré 5 sencillos pero bonitos estilos en Css.

En la Plantilla:
Para usarlos ve a Plantilla - Editar HTML y antes de ]]></b:skin> pegas cualquiera de los códigos.

Titulo 01

Códigos

Cafe .header01 {display: block; background: #787158; color: white; padding: 0 40px; text-align: left; text-transform: Capitalize; font-size: 24pt; letter-spacing: -2px; font-family: arial; border-bottom: 5px solid gray;}	Azul .header01 {display: block; background: skyblue; color: white; padding: 0 40px; text-align: left; text-transform: Capitalize; font-size: 24pt; letter-spacing: -2px; font-family: arial; border-bottom: 5px solid steelblue;}
Verde .header01 {display: block; background: palegreen; color: white; padding: 0 40px; text-align: left; text-transform: Capitalize; font-size: 24pt; letter-spacing: -2px; font-family: arial; border-bottom: 5px solid green;}	Naranja .header01 {display: block; background: skyblue; color: white; padding: 0 40px; text-align: left; text-transform: Capitalize; font-size: 24pt; letter-spacing: -2px; font-family: arial; border-bottom: 5px solid steelblue;}

Para más colores solo busca "background" y cambia el valor después de los dos puntos sin quitar el punto y coma, para el borde busca "border-bottom: 5px solid cambia esto;"

El estilo se llama Título 01 aunque no solo es para títulos también sirve para resaltar textos y más.


Uso en la entrada:
Ve al botón HTML de arriba y colocas por ejemplo (el primero)
 .    <span class=".header01">Tu texto</span>    .

------------------------------------------------

Efecto encender una imagen

Código

.opacity img {filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;} .opacity:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; }


Uso en la entrada:

Ve a HTML de arriba y colocas
 .    <img class=".opacity" src="URL de tu IMAGEN" />    . Reemplaza lo subrayado por tu imagen

------------------------------------------------

Texto en negrita con sombra

Código

.neg {color: black; font-weight: bold; text-shadow: 1px 1px 1px white; font-family: arial; letter-spacing: -2px; font-size: 12pt; }

Puedes modificar el color buscando "black" y cambiándolo por el color que quieras, la sombra del texto busca "white" y el tamaño buscando "12pt".


Uso en la entrada:

Ve al botón HTML de arriba y colocas
 .    <span class=".neg">Tu texto</span>    .

------------------------------------------------

Imagen redonda

Código

.circle {border-radius: 100% }

Uso en la entrada

En HTML pega <img class=".circle" src="URL DE TU IMAGEN" /> sustituyendo lo subrayado por la url de tu imagen

Este efecto funciona mejor en imágenes más cuadradas, entre más rectangulares sean quedan en óvalo como puedes ver en los ejemplos de arriba

------------------------------------------------

Cuadrito de texto

Codigo

.textbox1 {background: #efeff0; border: 1px dashed olive; padding: 10px; text-transform: uppercase; font-size: 10px;

Puedes cambiar el color del borde "olive" el fondo "#efeff0


Uso en la entrada:

Ve al botón HTML de arriba y colocas
 .    <span class=".textbox1">Tu texto</span>    .

------------------------------------------------