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…

Related posts:

1. Aprende a Usar Adobe Flash como en el Kinder
2. Aprender a usar Photoshop en 10 Minutos
3. Crea tus propias fuentes online con FontStruct

El Cascade Style Sheet ha sido siempre el lenguaje para poner estilo a la web, y desde hace tiempo se ha ido desarrollando CSS3, una nueva version que trae consigo nuevas propiedades para facilitarnos la vida, tales como bordes redondeados, usar cualquier fuente en la web sin que el lector la tenga instalada, opacidad, entre otras cosas muy buenas, si quieres aprender algunos codigos debes leer este post, y si tienes alguna contribucion que hacer, mejor.

Si son desarrolladores web o diseñadores web, se han enterado CSS (Cascade Style Sheet) ha estado evolucionando, al igual que HTML, en los recientes momentos se ha estado dando el desarrollo de HTML5 y CSS3, hace algunos años cerca del 2008 se empezó a desarrollar esta nueva versión, por lo cual muchos desarrolladores aun usan códigos de CSS2 y no se han dado cuenta de que nuevas propiedades han ido apareciendo en los últimos años y es necesario que ustedes las conozcan con fin de estilizar mejor tus sitios web u hojas de estilo para tu blog. Lo mas conocido dentro de CSS3 es la posibilidad (antes se podía, luego no se pudo, y ahora se vuelve a poder) de embeber fuentes para usarlas en la web, crear bordes redondeados, opacidad, imagen de bordes, sombras y envoltura de texto, colores RGBA entre otras funciones muy interesantes que veremos mas adelante, me atrasé un poco con esto pero ya estando en el 2010 la mayoría de ustedes ya deben de conocer algunas propiedades y las han usado.

Trabajando con bordes

Las técnicas antiguas para hacer bordes redondeados era crear un DIV con una imagen de un fondo ya hecho con bordes redondeados y poner ahí dentro el contenido, otra era usando un código Javascript, con CSS3 solo necesitamos emplear códigos de radio en las esquinas, también se ha podido usar imagenes como bordes, logrando mejores menús o cualquier otro fin, ponerle sombras también es posible.

Crear bordes con esquinas redondeadas

Para crear bordes redondeados a los DIV tenemos que usar la lógica y visualizar lo que queremos, en el ejemplo de arriba (hecho por mi ) tenemos una explicación, las esquinas de un DIV se dividen en 4.

topleft (esquina superior izquierda) / topright (esquina superior derecha) / bottomleft (esquina superior izquierda) / bottomright (esquina superior derecha).

Para poner en claro el código necesario pondré el snippet en seguida con un ejemplo en vivo de como quedaría, asegúrate de establecer el radio en pixeles o en pt (puntos), yo prefiero pixeles.

-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px;
border: 2px solid #000;

Para ahorrarte tiempo en caso de que quieras añadir el mismo tamaño de radio a todas las esquinas, solo escribe –moz-border-radius: 5px; –webkit-border-radius: 5px; para que te evites poner los nombres de las esquinas, aunque claro eso ya depende de ti, ahora pasemos al siguiente tratamiento de bordes.

Usar imagenes en tus bordes

Este tema es bastante difícil de explicar y a mi de comprender, es por eso que solo les dejare la referencia en ingles, busquen en google: border-image y les saldrá información sobre eso.

http://www.css3.info/preview/border-image/

Bordes de colores (degradado)

Es posible añadir múltiples colores en un borde, provocando un multicolorido resultado, o bien un borde de grosor considerable y con un efecto de degradado, quiero que mires atentamente este DIV:

border: 5px solid #000;
-moz-border-top-colors: #444e00 #73820e #809300 #c1d43e #c1ce6c;
-moz-border-bottom-colors: #444e00 #73820e #809300 #c1d43e #c1ce6c;
-moz-border-left-colors: #444e00 #73820e #809300 #c1d43e #c1ce6c;
-moz-border-right-colors: #444e00 #73820e #809300 #c1d43e #c1ce6c;

Lo que ha pasado es que he establecido un borde solido negro de 5 pixeles (grosor), pero con -moz-border-colors he puesto color a cada uno de esos 5 pixeles de borde dando un efecto de degradado, aquí esta el código, me simplifique estableciendo top, left, bottom o right para no escribirlos todos siendo que solo quería el mismo efecto en todos los lados.

Nota: Cada color que aplicas van siendo los colores correspondientes  a cada pixel del ancho del borde, por lo que tendrás que poner los mismos que en pixeles, si el border mide 5 pixeles, debes poner 5 colores, se ordenan de afuera hacia adentro.

Propiedades disponibles

-moz-border-colors (aplica a todo el borde) / -moz-border-top-colors (aplica al borde superior) / -moz-border-bottom-colors (aplica al borde inferior) / -moz-border-left-colors (aplica al borde izquierdo) / -moz-border-right-colors (aplica al borde derecho).

Trabajando con Fondos

En CSS3 se han añadido nuevas posibilidades tales como tamaño del fondo, posibilidad de tener fondos múltiples en un mismo contenedor y posicionarlos donde queramos, entre otras cosas, solo diré las primeras 2 y lo demás es cosa de que lo investigas si te es de utilidad (background origin y clip).

Establecer múltiples fondos en un DIV

Es posible colocar mas de un fondo en un objeto con tan solo usar “comas” después de cada fondo, se puede aplicar posición y repeat también, aquí no lo he podido probar por alguna extraña razón, sin embargo acá tienen un ejemplo capturado como imagen. Solo me va en Safari.

background: url(tufondo1) top left no-repeat,
url(tufondo2) top right no-repeat,
url(tufondo3) bottom left no-repeat,
url(tufondo4) bottom right no-repeat;

Fuentes y manejo de texto

Usar cualquier fuente en la web (embed a font)

Si bien esto suele hacerse en WordPress con plugins que sustituyen el texto por imagenes de acuerdo a la fuente que deseemos, con CSS3 no es necesario hacer eso, en CSS2 se podía pero en CSS 2.1 ya no, y en CSS3 ha vuelto la posibilidad de incrustar fuentes en el texto pudiendo usar mejores fuentes que Arial, Verdana, Times New Roman, etcétera. Para esto primero conseguiremos una fuente TTF, OTF u otra, en mi caso yo he elegido Chunk Five, una fuente muy hermosa en formato TTF. Esto sirve para que el lector pueda ver el texto com la fuente que deseas sin que el tenga que tenerla instalada en su PC.

El código o sintaxis seria la siguiente, esto es el CSS:

@font-face {
	font-family: Nombredefuente;
	src: url('urldelafuente');
}

p.clasedeparrafo {
        font-family: Nombredefuente;
}

El primer bloque selecciona una fuente y le pone un nombre, en esta caso será “Nombredefuente“, después se establecen los elementos en los que quieres llamar la fuente, puedes llamarla como fuente de títulos H1, H2 o párrafos, la verdad no he logrado que funcione en mi PC con Firefox, solo Safari.

Ahora para llamarlo, en esta ocasión será un párrafo con clase:

<p class="clasedeparrafo">El Veloz murciélago te violara</p>

—————–> Continuara… ya no tengo tiempo hoy.

Related posts:

1. Crea vistosas cajas de información con CSS y tres iconos, aprende a usar Clases CSS!
2. Retrospectiva – Vida y Obras de Diego Rivera