En este tutorial aprenderás a crear simples pero vistosas cajas de información para 3 propósitos distintos los cuales son avisar, dar confirmación y mostrar un error usando solo 3 iconos y clases CSS de DIV’s, se te muestra el código y se te explicara detalladamente lo que quiere decir cada propiedad, también una imagen loca que hice sobre como funciona una Clase CSS, te recomiendo leerlo si aun no sabes mucho del Cascade Style Sheet y aunque no sepas probablemente te gusten los colores o los iconitos.
Seguramente habrás visto una caja de información con un icono al lado, si es así entonces se debería parecer a una de las que vamos a crear, el resultado final puede ser cualquiera de estas 3 cajas:
Bueno para crearlas lo único que necesitas es 3 iconos correspondientes a un aviso, un procedimiento satisfactorio (palomita) y una cruz de error, fracaso o requerimiento incumplido. Te puedo sugerir que uses este pack de iconos de function los de fam fam, de hecho puedes poner el icono que quieras. Y lo otro es colocar un DIV con el texto que quieras mostrar, puede aplicarse también a un párrafo pero prefiero usar DIV’s, lo que se hace después es usar un poco de CSS básico para darle color y ponerle el icono de fondo a la caja y si lo deseas bordes redondeados, bueno vamos por pasos.
Preámbulo – ¿Cómo funciona una clase CSS?
Fácil, una clase CSS es un bloque de código Cascade Style Sheet que es llamado si se le pone a un párrafo, DIV o span, lo que hace es traer los atributos correspondientes a la clase y que sean usados en el elemento al que se le dio ese atributo, luego el navegador interpreta el estilo y muestra al objeto ya con el estilo puesto, esta imagen te dejará mas que claro como funciona, es tan simple como hacer el amor (?):
Paso 1 – Colocando los DIV’s con texto
Si bien puedes hacerlo con párrafos y aplicarles clase de párrafo ya mencione que prefiero los DIV pero te recuerdo que el código CSS que te voy a mostrar mas adelante también sirve en párrafos. Vamos a escribir el siguiente código en donde quieras mostrar tu caja de información:
Para mostrar el cuadro verde de correcto
<div class="correcto">Aqui escribes el texto que va en la caja</div>
Para mostrar el cuadro amarillo de aviso
<div class="aviso">Aqui escribes el texto que va en la caja</div>
Para mostrar el cuadro rojo de error
<div class="error">Aqui escribes el texto que va en la caja</div>
Paso 2 – Definiendo las clases CSS
Este paso es el que te permitirá decidir como se verá la caja una vez cargado el objeto por el navegador, puedes incluso añadir efectos de hover para mostrar otro icono cuando pasas el ratón pero eso no lo haré aquí, entre menos código tenga tu archivo de estilos menos tardara en cargar y tu sitio será mas ágil, también esta la importancia de no escribir código repetido, redundante o inútil.
Las imagenes que yo usé son de 16px x 16px creo y son la siguientes: 
y los colores usados son amarillo huevo, verde claro y rojo claro, mas adelante se muestran los codigos de color.
Agrega este código a tu hoja de estilos, si es un blog esta en wp-content/nombredeltheme/stylesheet.css y si es pagina web solo tu sabrás donde esta 
:
.aviso {
background: #fffddc url(url de imagen de aviso) no-repeat 10px;
padding: 7px 10px 7px 37px;
border: 1px solid #f0ea8b;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-size:10px;
width: 580px;
}
.correcto {
background: #dfffe4 url(url de imagen de correcto) no-repeat 10px;
padding: 7px 10px 7px 37px;
border: 1px solid #94d19e;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-size:10px;
width: 580px;
}
.error {
background: #ffe8e8 url(url de imagen de error) no-repeat 10px;
padding: 7px 10px 7px 37px;
border: 1px solid #ff8a8a;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-size:10px;
width: 580px;
}
Nota que siempre cuando se inicia una clase se pone un punto (si fuera clase de párrafo será p.clase {atributos;} ) y luego el nombre de la clase que debe obligatoriamente coincidir con el del objeto en cuestión; seguido de los atributos que le vamos a dar a cualquier objeto que lleve esa clase (si… pueden ser varios e incluso se puede simplificar el código si fueran muchos cuadros de información).
Una nota importante es que el estilo del texto será tomado del estilo de tu blog o web, si el estilo del texto es Verdana de 12 pixeles a color rojo así se mostrara en los cuadros a menos que lo establezcas en el CSS de las clases, y si no funciona poner el indicador !important antes de terminar el atributo (este indicador también puede ponerse a los atributos que no sean obedecidos por el navegador).
Analizando primero el atributo background, en primer lugar se tiene el código hexadecimal del color el cual puedes cambiar por uno mas obscuro o claro depende de tus gustos, luego la dirección del icono, es importante que establezcas la ruta exacta de tu icono, si estas en un blog basta con poner la ruta relativa del icono dentro de la carpeta del theme (ejemplo: url(imagenes/error.png) ), y por ultimo se establece el atributo no-repeat para que no se repita a lo largo ni a lo ancho (o ambos si fuera repeat-xy) seguido de la separación en pixeles del lado horizontal izquierdo (esta propiedad esta implícita como background position, si pusieras ??px ??px estarías dando un valor tanto horizontal como vertical siendo que la sintaxis es xpos ypos iniciando desde la izquierda y en cuanto a vertical… desde arriba).
Luego lo del padding, el padding es la separación que tiene el contenido de un objeto en relación con su borde, en este caso la sintaxis correcta es: padding: top right bottom left;. Aquí vemos que puse una separación vertical con respecto al borde de arriba y de abajo de unos 7 pixeles, y horizontalmente 37 pixeles separado del borde izquierdo (para que quepa el icono) y 10 pixeles en el borde derecho.
Esta imagen es externa y no la hice yo, porque me dio sueño hacer una sobre el padding.
Lo que sigue es bastante auto-explicatorio (leí esta palabra en un blog ingles y me gusto “self-explanatory” 
) como por ejemplo el borde, es un borde solido cuyo grosor es 1 pixel y color es un amarillo mas obscuro para que el borde no se pierda (en los otros dos varia el color de fondo y de borde). Luego sigue el radio del borde redondeado, ya lo había explicado en un post sobre CSS3 pero aquí tiene la imagen para que no se pierdan:
En mi caso no me quise pasar de redondo y puse un radio de 5 pixeles para todas las esquinas. Luego viene el tamaño del texto en pixeles y por ultimo el ancho del DIV, esto es muy importante ya que si no le ponen ancho, el cuadro tomara el ancho del contenedor que sigue en jerarquía (el DIV que lo contiene). Si lo desean pueden establecer también un alto pero ese es automático según agregan contenido.
El fin – The End – Das Ende – Le final
He terminado y espero que te haya servido como referencia, agradecería mucho un comentario, sugerencia, queja, corrección o felicitación. Todo esta en aprender bien CSS y lograras mucho.
PD: Lorenzo insua es una parodia incompleta y absurda del texto “Loremp Ipsum Dolor Sit Amet….”.
PD2: La imagen principal tiene una parte difuminada, la barra de direcciones, si tienen curiosidad de saber que dice es: “file:///C:/Users/Luis Felipe/Documents/Dise……”, y si… Luis Felipe es mi nombre y mi apellido es Lopez Garay .
PD3: Los bordes redondeados en los ejemplos han desaparecido porque al editar un post en el WordPress editor (lo edite cuando puse el PD2) se eliminan códigos CSS3 como el border radius, pero saben que si funciona en Firefox y Safari y que técnicamente alguna vez estuvieron aquí, tal vez lo restablezca algún dia…
Entradas Relacionadas:
Muchas gracias. Me ha sido muy util