Trabajar con CSS3 y sus herramientas avanzadas

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

CSS3 es una de las mejores nuevas tecnologías web disponibles para los desarrolladores web en este momento. Usando algunas de sus muchas características, es posible reproducir los efectos que podría haber realizado previamente en Photoshop, con código CSS que es más fácil de mantener, más rápido de cargar y más moderno con las últimas tendencias. Siga leyendo para conocer las herramientas eléctricas disponibles para usted y cómo combinarlas para producir los mejores efectos gráficos.

CSS3 tiene muchas características, pero algunas de ellas son imprescindibles para saber si va a reproducir efectos tipo Photoshop. Los llamo mis "herramientas avanzadas". Incluyen lo siguiente:

Radios de Bordes
Sombras de caja
Sombras de texto
Gradientes
Múltiples fondos

Cada una de estas características puede ayudar a reemplazar algunas de las imágenes que podría haber creado en Photostop en el pasado. Al hacer esto, está haciendo que su sitio web sea más fácil de mantener ya que puede cambiar una propiedad simplemente cambiando su archivo CSS en lugar de editar una imagen en Photoshop. También está haciendo que su sitio web se cargue más rápido ya que las imágenes usan mucho ancho de banda. Exploremos estas características una a una.

Herramienta avanzada n° 1: Radios de borde

Soporte de navegadores:

Safari: 3.2+
Firefox: 3.0+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

Por ahora, probablemente hayas escuchado acerca del radio de la frontera un millón de veces. Es súper fácil de usar y es compatible con todos los navegadores modernos. Si aún no lo sabe, el radio de borde es una forma de crear esquinas redondeadas con CSS, ¡no es necesario que tenga imágenes! Echemos un vistazo a la sintaxis.

1
2	-webkit-border-radius: size;
3	-moz-border-radius: size;
4	border-radius: size;

Hay tres sintaxis que necesitará usar. El primero es para navegadores basados en Webkit, como Safari y Chrome; el segundo es para navegadores basados en Mozilla, como Firefox; y la última es la versión sin prefijo, para los navegadores que la admiten, incluidos IE9, Opera y Safari 5.

La aplicación de un radio de borde de 10 píxeles a un div crea el siguiente efecto:

OK, ¡fácil! Pasemos a la siguiente herramienta.

Herramienta avanzada n° 2: Sombras de caja

Soporte de navegadores:

Safari: 3.2+
Firefox: 3.5+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

Las sombras de caja son otra característica bien soportada. Su sintaxis se ve así:

1
2	-webkit-box-shadow: offset_x offset_y blur_radius color;
3	-moz-box-shadow: offset_x offset_y blur_radius color;
4	box-shadow: offset_x offset_y blur_radius color;

Una vez más, tenemos que usar los prefijos del vendedor para Webkit y Mozilla. El primero y el segundo parámetro de la propiedad box-shadow son las posiciones de desplazamiento de las coordenadas izquierda y superior del elemento. Establecer un valor positivo para estas propiedades mueve la sombra hacia la derecha y hacia abajo desde el elemento, y establecer un valor negativo mueve la sombra hacia la izquierda y hacia arriba desde el elemento. El blur_radius es la cantidad de desenfoque que deseas agregar a tu sombra (qué tan difícil o difusa la deseas). Finalmente, el último parámetro es el color que quiere que sea la sombra. Agregar una sombra a nuestro div redondeado previamente utilizado creará un efecto atractivo.

1
2	-webkit-box-shadow: 5px 5px 10px #555;
3	-moz-box-shadow: 5px 5px 10px #555;
4	box-shadow: 5px 5px 10px #555;

Otra característica interesante de CSS box shadows es la palabra clave insertada. Cuando la palabra clave inserta está presente, la sombra se representa dentro del cuadro en lugar de afuera. Esto puede crear una bonita apariencia deprimida, especialmente para botones. Así es como se vería nuestro div con una sombra insertada.

1
2	-webkit-box-shadow: 0 0 20px #333 inset;
3	-moz-box-shadow: 0 0 20px #333 inset;
4	box-shadow: 0 0 20px #333 inset;

La última característica de las sombras de cuadro que vale la pena mencionar es la capacidad de tener varias sombras en el mismo elemento. Esto es muy útil y puede eliminar el marcado adicional en el código HTML solo para aplicar una sombra adicional. Todo lo que tienes que hacer para crear múltiples sombras es separarlas con comas. Aquí hay un ejemplo:

1
2	-webkit-box-shadow: 0 0 20px #333 inset,
3	20px 15px 30px yellow,
4	-20px 15px 30px lime,
5	-20px -15px 30px blue,
6	20px -15px 30px red;
7
8	-moz-box-shadow: 0 0 20px #333 inset,
9	20px 15px 30px yellow,
10	-20px 15px 30px lime,
11	-20px -15px 30px blue,
12	20px -15px 30px red;
13
14	box-shadow: 0 0 20px #333 inset,
15	20px 15px 30px yellow,
16	-20px 15px 30px lime,
17	-20px -15px 30px blue,
18	20px -15px 30px red;

Herramienta avanzada n° 3: Sombras de texto

Soporte de navegadores:

Safari: 3.2+
Firefox: 3.5+
Chrome: 3.0+
Opera: 10.1+
Internet Explorer: ¡coming soon™!

Las sombras de texto son como sombras de cuadro, excepto que son sombras para texto en lugar de todo el elemento. Afortunadamente, no hay un prefijo de proveedor necesario para la sombra de texto.

1
2	text-shadow: offset_x offset_y blur_radius color;

Las opciones para la sombra de texto son las mismas que para la sombra de cuadro, excepto que no hay soporte de sombra de texto insertable. Aquí hay una demostración que hace que el texto por lo demás invisible salte de la página.

1
2	color: #fff /* text color to white */
3	text-shadow: 0 0 50px #333;

Esto crea el siguiente efecto:

Al igual que con las sombras de caja, es posible tener múltiples sombras de texto simplemente separándolas con comas. Aquí hay un ejemplo que crea un efecto de texto llameante.

1
2	text-shadow: 0 0 4px #ccc,
3	0 -5px 4px #ff3,
4	2px -10px 6px #fd3,
5	-2px -15px 11px #f80,
6	2px -18px 18px #f20;

Las sombras de texto pueden crear algunos efectos increíbles y pueden complementar otros efectos muy bien.

Herramienta avanzada n° 4: Gradientes

Soporte de navegadores:

Safari: 4+
Firefox: 3.6+
Chrome: 5+
Opera: ¡Pronto!
Internet Explorer: ¡Pronto!

Los degradados son una de las funciones más potentes disponibles para usted si desea crear estos impresionantes efectos. Si bien la compatibilidad total con el navegador aún no está del todo allí, siempre puede proporcionar un estilo alternativo a navegadores sin soporte. Recuerde: los sitios web no necesitan verse igual en todos los navegadores. Hay dos tipos de degradados que puede crear: degradados lineales y degradados radiales. Como era de esperar, los gradientes lineales se mueven a lo largo de una línea recta y los gradientes radiales van alrededor de un círculo. Los degradados se pueden usar en cualquier lugar en el que haya utilizado una imagen en el pasado, como en el caso de las viñetas de fondo, de borde o de lista.

Desafortunadamente para los desarrolladores web, hay dos sintaxis diferentes: una para Mozilla y otra para Webkit.

Sintaxis para Webkit

Tanto Safari como Chrome usan el motor de renderizado Webkit, por lo que siempre usan la misma sintaxis. Su sintaxis de gradiente es bastante simple:

1
2	-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

Webkit usa la misma sintaxis para degradados lineales y radiales. Simplemente cambie el parámetro de tipo para cambiar entre ellos.

Sintaxis para Mozilla

Firefox usa sintaxis separadas para degradados lineales y radiales, ambos son muy diferentes de sus contrapartidas de Webkit.

1
2	-moz-linear-gradient( [<point> \|\| <angle>,]? <stop>, <stop> [, <stop>]*)
3	-moz-radial-gradient( [<position> \|\| <angle>,]? [<shape> \|\| <size>,]? <stop>, <stop>[, <stop>]*)

Veamos estas sintaxis por separado.

Gradientes lineales

Para simplificar, aquí hay una sintaxis de Webkit solo para degradados lineales.

1
2	-webkit-gradient(linear, start_x start_y, end_x end_y, stop, stop...)

La sintaxis de Firefox se ve así.

1
2	-moz-linear-gradient(angle start_x start_y, stop, stop...)

En la sintaxis de Webkit start_x y start_y parameters especifican la posición de inicio del degradado, y end_x y end_y especifican la posición final del degradado. Puede usar cualquiera de los valores de dimensión CSS estándar, incluidos los porcentajes, así como las palabras clave left, top, bottom, right y center como valores para estos parámetros de posición. Las paradas son una forma de especificar colores específicos para usar en puntos específicos a lo largo del degradado. Puede tener tantas paradas de color como desee, pero debe tener al menos dos: un color inicial y otro final. Para paradas de color adicionales, puede utilizar la función color-stop () que proporciona una posición como un porcentaje o un decimal entre 0 y 1, así como un color. Por ejemplo: color-stop(50%, black) crearía una parada de color negro exactamente en la mitad del gradiente. En lugar de escribir 0% y 100% para los colores inicial y final, existen las funciones de conveniencia from() y to(). Todo lo que tienes que proporcionarles es el color.

La sintaxis de Firefox es mucho menos directa y tiene muchas formas de lograr el mismo objetivo. Lo único que es estático acerca de la sintaxis son las paradas de color, que son solo un color seguido de una posición como un porcentaje. Para las posiciones inicial y final, puede dejar 0% y 100%, y si deja la posición fuera de cualquiera de las otras paradas de color, se distribuirán uniformemente a lo largo del degradado. A diferencia de la sintaxis de Webkit, la sintaxis de Firefox no tiene una posición final, solo una posición inicial y un ángulo. El gradiente se agotará desde la posición inicial en el ángulo especificado. Si deja el ángulo hacia afuera, se agotará perpendicularmente desde ese punto. Si omites el punto de partida todos juntos, el gradiente se ejecutará de arriba a abajo. Esta sintaxis es un poco confusa y un poco menos flexible que la sintaxis simple de Webkit, por lo que es mejor aprender con el ejemplo.

Aquí hay un ejemplo simple de gradientes de CSS en acción. Este gradiente va de la esquina superior izquierda a la esquina inferior izquierda (en otras palabras, de arriba a abajo) y de rojo a blanco.

1
2	-webkit-gradient(linear, left top, left bottom, from(red), to(white));
3	-moz-linear-gradient(red, white)

Estableciendo esto como la propiedad de fondo de un div, obtenemos el siguiente resultado:

Al agregar un stop de color y cambiar el ángulo del degradado, podemos obtener un efecto diferente.

1
2	-webkit-gradient(linear, left top, right bottom, from(red), color-stop(50%, white), to(red));
3	-moz-linear-gradient(left top, red, white, red);

Gradientes radiales

Aquí está la sintaxis para degradados radiales en Webkit.

1
2	-webkit-gradient(radial, inner_circle_center_x inner_circle_center_y, inner_circle_radius,
3	outer_circle_center_x outer_circle_center_y, outer_circle_radius,
4	stop, stop...)

La sintaxis de Firefox se ve así.

1
2	-moz-radial-gradient(center_x center_y, shape size, stop, stop...)

La sintaxis de Webkit es un poco más complicada que la sintaxis de gradiente lineal, pero los mismos principios aún se aplican. Los degradados radiales en Webkit tienen dos círculos: un círculo inicial y un círculo final. Usted especifica las posiciones centrales X e Y para cada uno de estos círculos junto con sus radios. Finalmente, especifica que el color se detenga de la misma manera que lo hizo para los degradados lineales.

La sintaxis de Firefox para degradados radiales es similar a la sintaxis para degradados lineales en que todas sus partes excepto las paradas de color se pueden omitir. Puede especificar las posiciones centrales X e Y del gradiente de forma muy similar a las coordenadas del círculo interno en la sintaxis de Webkit, pero no hay un círculo exterior en Firefox. En su lugar, puede especificar la forma y el tamaño del degradado. La forma puede ser un círculo o una elipse, la última de las cuales no es posible crear en Webkit actualmente. El tamaño acepta muchas palabras clave diferentes, pero no un tamaño de píxel como era de esperar. Puede leer sobre lo que hace cada una de estas constantes en el Mozilla Developer Center. Para este tutorial, solo usaremos los valores predeterminados. Una vez más, si deja las posiciones centrales X e Y, se supondrá que son el centro del objeto que está rellenando con un degradado. Si omite la forma y el tamaño, se supondrá que el gradiente es un círculo que ocupa toda la casilla.

1
2	-webkit-gradient(radial, center center, 0, center center, 50, from(white), to(red));
3	-moz-radial-gradient(white, red)

Si aplicamos este degradado al fondo de un div, esto es lo que obtendremos.

Herramienta avanzada n° 5: Multiples Fondos

Soporte de navegadores:

Safari: 3.2+
Firefox: 3.6+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

Los fondos múltiples facilitan la creación de efectos complejos en CSS sin la necesidad de crear un marcado adicional en su HTML. Tener soporte para esto significa que los elementos pueden tener múltiples degradados y fondos de imágenes junto con el color de fondo estándar. No hay diferencia en la sintaxis de los fondos múltiples de los fondos individuales: simplemente sepárelos por separado y listo.

Aquí hay un ejemplo de un div con un fondo degradado y un bonito efecto de textura con una imagen:

1
2	background: url(noise.png), -webkit-gradient(linear, left top, left bottom, from(#999), to(#333));
3	background: url(noise.png), -moz-linear-gradient(#999, #333);

Tenemos que declararlo dos veces, ya que, como hemos aprendido, hay una sintaxis de gradiente diferente para cada navegador. Esto crea el siguiente efecto:

Combinando la potencia: construyendo un impresionante botón CSS3

Ahora que tenemos cinco herramientas de gran potencia a nuestra disposición, vamos a combinarlas para producir un efecto aún más impresionante.

Hay tantos tipos diferentes de botones que puede elegir diseñar. Para ser simple, emulemos algo que ya existe: el estilo del botón Mac OS X.

Comenzaremos con nuestro código HTML para esta demostración. Es realmente bastante simple, solo dos DIVs y algunos textos.

1
2	<div class="panel">
3	<div class="button">Button</div>
4	</div>

Ahora comenzaremos con nuestro CSS básico. Primero, estilicemos el panel.


.panel {
    background: -webkit-gradient(linear, left top, left bottom, from(#bbbcbb), to(#959695));
    background: -moz-linear-gradient(#bbbcbb, #959695);
    background-color: #b7b9b7;
    width: 100px;
}

El panel es solo un buen contenedor para nuestro botón. Tiene un gradiente que va de arriba a abajo entre dos agradables colores grises. Para aquellos navegadores que no admiten degradados, se proporciona un color de fondo alternativo.

Ahora, veamos el CSS para el botón real.


.button {
    display: inline-block;
    margin: 20px;

    padding: 3px 6px;
    font-family: 'Lucida Grande', Arial, sans-serif;
    font-size: 13px;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    border: 1px solid rgba(0, 0, 0, 0.6);

    background: -webkit-gradient(linear, left top, left bottom, from(#fbfcfb), to(#9d9e9d));
    background: -moz-linear-gradient(#fbfcfb, #9d9e9d);
    background-color: #c0c2c0;

    text-shadow: rgba(255, 255, 255, 0.4) 0px 1px;

    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
    box-shadow: rgba(255, 255, 255, 0.4) 0 1px;

    -webkit-user-select: none;
    -moz-user-select: none;
    cursor: default;
}

Aquí hay una cantidad decente de código, que usa todas las herramientas que describí anteriormente, excepto para fondos múltiples. Hay varias secciones de este código, que tomaremos una por una. Las primeras dos líneas son solo información de diseño simple. Configurar el botón para mostrar: inline-block hace que se extienda automáticamente para ajustarse al contenido, sin importar la cantidad de texto que coloque en el botón. La siguiente sección proporciona información de fuentes sobre el botón. Finalmente, en la tercera sección usamos nuestra primera herramienta eléctrica: radio de borde. En el caso de nuestro encantador botón, le damos un buen radio de 3 píxeles. A continuación, le damos al botón un borde. Tenga en cuenta que estamos utilizando rgba como un color aquí. Esto nos permite hacer que el color sea parcialmente transparente como lo hacemos aquí, creando un bonito color grisáceo. En la siguiente sección de código, configuramos el fondo del botón. Le damos un fondo degradado, así como un color sólido para el retroceso en los navegadores que aún no admiten gradientes. A continuación, usamos la sombra de texto para que el texto se vea ligeramente grabado en el botón. Una vez más usamos rgba aquí para dar un blanco parcialmente transparente a la sombra de texto. La sección pen-ultima del código crea una sombra de cuadro. Ahora, esto en realidad no parece una sombra, en realidad se parece a un segundo borde, pero le da un buen resaltado a la parte inferior del botón para que se vea grabado en el fondo y complementa el color del borde. Este es un truco útil para saber si alguna vez quieres que algo parezca tener múltiples bordes: lo uso mucho. Finalmente, la última sección del código CSS es un buen truco que evita la selección de texto en los navegadores basados en Webkit y Firefox, y establece el cursor en la flecha predeterminada en lugar del cursor de selección de texto.

Hasta ahora, este código hace que nuestro botón se vea así:

OK, ¡así que no está mal todavía! Pasemos al aspecto deprimido del botón.

1
2	.button:active {
3	background: #B5B5B5;
4	-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
5	black 0px 1px 3px inset,
6	rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
7
8	-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
9	black 0px 1px 3px inset,
10	rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
11
12	box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
13	black 0px 1px 3px inset,
14	rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
15
16	text-shadow: rgba(255, 255, 255, 0.3) 0px 1px;
17	}

Cuando se presiona el botón, cambiamos varias cosas. Primero, establecemos el fondo en un color simple, eliminando el degradado que habíamos configurado antes. Esto se debe a que crearemos la apariencia deprimida con una sombra de cuadro en lugar de un degradado. Lo siguiente que hacemos es establecer esa sombra, o más bien, múltiples sombras. La primera sombra en la lista es la misma que teníamos en el estado normal: el resaltado en la parte inferior del botón. La segunda y tercera sombras son las que hacen que nuestro botón se vea presionado. La primera de ellas es una sombra de recuadro negro que se establece desde el primer píxel superior y tiene 3 píxeles de desenfoque: una sombra bastante oscura. La última sombra también es negra, pero un negro ligeramente transparente que se configura desde los 5 píxeles inferiores con 12 píxeles de desenfoque. Esto crea la apariencia oscurecida en la parte inferior del botón cuando se presiona. Lo último que tenemos que hacer cuando se presiona este botón es simplemente reducir la opacidad de la sombra de texto en una muesca para que no se destaque como un pulgar dolorido.

¡Eso es! Nuestro botón está completo. Así es como se ve la versión presionada:

Conclusión

Reemplazar imágenes con CSS3 tiene muchos beneficios. Hace que su trabajo como desarrollador web sea más fácil, ya que no necesita abrir Photoshop cada vez que necesita hacer un cambio en su interfaz de usuario. Hace que su sitio web o aplicación web se cargue más rápido, ya que no necesita descargar tantas imágenes pesadas. Y le permite crear una experiencia más rica, interactiva y deseable para los usuarios, de modo que sigan volviendo por más.

Los dejaré con un poco de inspiración de las cosas que podrían hacer con CSS3. Estos no son necesariamente los ejemplos más reales del mundo, pero muestran lo que es posible con un poco de trabajo.

iPhone hecho con Puro CSS3

La primera demostración, creada por Jeff Batterton, es un iPhone creado con CSS3 puro, sin imágenes utilizadas. Es muy impresionante, utiliza gradientes de CSS, sombras de texto, sombreados de caja, transiciones y transformaciones. Desafortunadamente, actualmente solo parece correcto en navegadores basados en Webkit como Safari y Chrome. ¡Puede ser tu tarea hacer que la demostración funcione en Firefox!

Iconos de iOS Puro CSS3

Otra demo, quizás incluso más increíble, fue escrita por Louis Harboe. Es una recreación de algunos de los iconos de iOS en CSS puro, ¡y recreaciones muy realistas en eso! Esta demostración también solo funciona en navegadores basados en Webkit. Si desea conocer cómo se reprodujeron algunos de estos iconos, puede dirigirse al blog de Louis Harboe donde describe el proceso.

¡Espero que hayas disfrutado este artículo! ¡No dude en ponerse al día conmigo en Twitter, o deje sus pensamientos en los comentarios!