Tecnología y Coaching para Emprendedores

Lleva el Diseño de tu Web al Siguiente Nivel con CSS3

css3

Las hojas de estilo en cascada CSS se introdujeron hace 13 años, y el ampliamente adoptado CSS 2.1 estándar existe desde hace ya 11 años. Cuando nos fijamos en los sitios web que se crearon hace 11 años, está claro que estamos a miles de kilómetros de distancia de esa época. Es notable como ha evolucionado el diseño web a lo largo de los años, de una manera que nunca nadie hubiera imaginado entonces.

¿Por qué es que, cuando se trata de CSS, estamos atrapados en el pasado y tenemos tanto miedo a experimentar? ¿Por qué es que todavía utilizamos los hacks de CSS y JavaScript tan ineficientes? ¿Por qué no podemos hacer uso de las ricas características de CSS3 y herramientas disponibles en los navegadores web modernos y tener la calidad de nuestros diseños a un nivel superior?

Es el momento de introducir características de CSS3 en nuestros proyectos y no tener miedo a incorporar gradualmente las propiedades de CSS3 y selectores en nuestras hojas de estilo. Hemos de hacer que nuestros clientes sean conscientes de las ventajas de CSS3 (y dejar que los navegadores antiguos en desuso desaparezcan) y debemos actuar en consecuencia, sobre todo si esto significa que los sitios web sean más flexibles y podamos reducir los costes de desarrollo y mantenimiento.

En este artículo, vamos a ver las ventajas de CSS3 y algunos ejemplos de cómo los diseñadores Web ya las están utilizando. Al final, vamos a conocer un poco de qué esperar de CSS3 y cómo podemos usar sus nuevas características en nuestros proyectos.

Prefijos del navegador

Una de las primeras cosas que veremos es que para especificar las propiedades de CSS3, en muchos casos van a hacer falta los vendor prefixes o prefijos del navegador. El motivo es que los navegadores web van implementando las diferentes propiedades de manera gradual, por lo que hay que especificar cada una de las propiedades para los distintos navegadores.

Las desventajas de este enfoque son, por supuesto, una hoja de estilo desordenada y un diseño web diferente según el navegador utilizado. Después de todo, no queremos revivir la necesidad de hacks en nuestras hojas de estilo. marquee y blink y otras etiquetas se emplean en muchas hojas de estilo y se convirtieron en leyenda en la década de 1990, lo que hace que aún haya muchos sitios web con un código poco óptimo. Y no queremos ponernos en la misma situación ahora, ¿verdad?

Sin embargo, los sitios web no tienen por qué verse exactamente igual en todos los navegadores. Y el uso de las propiedades específicas del navegador para obtener efectos concretos en determinados navegadores a veces tiene sentido.

El principal inconveniente del uso de prefijos del navegador es que nuestro código CSS puede parecer un tanto caótico y que hemos de especificar varias veces los parámetros de una misma propiedad. La ventaja de esto es que podemos dar un toque diferente a la misma página web para que se vea de manera diferenciada en los distintos navegadores.

Las extensiones más comunes son las que se utilizan para los navegadores basados ​​en Webkit (por ejemplo, Safari), que comienzan con-webkit-y navegadores basados ​​en Gecko (por ejemplo, Firefox), que comienzan con-moz-. Konqueror (-khtml-), Opera (-o-) e Internet Explorer (-ms-) tienen sus propias extensiones propietarias.

1. Los selectores de CSS3

Los selectores de CSS3 nos permiten modificar los estilos de determinadas etiquetas utilizando una serie de condiciones, para así delimitar más las áreas en las que se aplicará el estilo correspondiente. Los selectores no son algo nuevo de CSS3, en sí ya existen en el CSS tradicional, cuando por ejemplo queremos aplicar un estilo a una imagen que tiene una determinada etiqueta alt. Entonces lo que hacíamos es img[alt="texto objetivo"] {...} y aplicábamos el estilo que hubiese entre los corchetes a todas las imágenes que como etiqueta alt tuvieran texto objetivo.

Con CSS3 podemos ir más allá y extender estas funcionalidades a otras propiedades. Es importante destacar que el viejo amigo Internet Explorer (si se me permite la ironía con lo de amigo) no tiene implementadas muchas características de CSS3, por lo que si el cliente quiere que su web se vea bien en IE6, IE7 e IE8 quizás que no sea recomendable utilizar algunas de las propiedades de CSS3. En mi opinión, pero, es mejor enfocarnos a dar soporte a dispositivos modernos como los smartphones y tablets, y ofrecer una opción de fallback para IE con el uso de hojas de estilo específicas para este navegador.

CSS3 nos permite seleccionar elementos basándose en el texto del atributo del selector. Uff, parece complicado, ¿no? Pues no, no lo es, en seguida lo verás. Con los selectores de CSS3 podemos seleccionar un elemento basándonos en los contenidos del atributo. Hay tres opciones de selección del atributo:

  • Empieza con el prefijo indicado.
  • Contiene una instancia de algo.
  • Termina con el sufijo indicado.

Empieza con el prefijo indicado

El “empieza con” tiene la siguientes sintaxis:

elemento[atributo^="valor"]

Esta opción selecciona al elemento que tiene un atributo cuyo nombre empieza por valor. Veamos un ejemplo:

img[alt^="foto"] {
	border:2px solid #666;
}

Aquí el elemento es img, el atributo es la etiqueta alt y el valor es foto. El carácter clave es ^, que indica que seleccione todas las imágenes cuya etiqueta alt empiece por foto. Así, se seleccionará igual una imagen que tenga una etiqueta alt “foto playa” como otra que ponga “foto de mi cumple”. Sencillo, ¿no?

Contiene una instancia de algo

El “contiene una instancia” se refiere que en alguna parte del atributo del elemento aparece el texto valor:

elemento[atributo*="valor"]

Siguiendo con el ejemplo anterior:

img[alt*="foto"] {
	border:2px solid #666;
}

Ahora la etiqueta alt de la imagen debe contener la palabra foto, da igual que sea al principio, en medio o al final, simplemente debe contenerla.

Termina con el sufijo indicado

Como bien te puedes imaginar, ahora es lo mismo, con la diferencia de que termina con la palabra indicada. La estructura sería:

elemento[atributo$="valor"]

Y en el ejemplo anterior, el símbolo ahora es el dólar $:

img[alt$="foto"] {
	border:2px solid #666;
}

Un ejemplo práctico

No sé tú, pero yo la primera vez que vi esto no le encontré ninguna utilidad, será que en ese momento me acababa de levantar y en ese momento no soy persona, o quizás que no se ve tan claro de buenas a primeras, en cualquier caso, yo me quedé pensando que menuda tontería, así que por si acaso a ti también te está pasando, te pongo un ejemplo de la vida real. Imagínate que tienes una web con una colección de películas y quieres que se distingan de alguna manera las que son de acción de las que son de terror, o las que son del 2007 de las que son del 2011. Aquí vienen de perlas estos selectores de CSS3. Imagínate este HTML:

HTML

<img src="images/imagen1.jpg" alt="La Princesa Esmeralda - 2011 - terror">
<img src="images/imagen2.jpg" alt="Papa Pitufo - 2010 - infantil">

Antes de que digas nada, te digo que estamos de acuerdo, que una base de datos se hace con MySQL o otro lenguaje, no con HTML, pero a título ilustrativo sirve, imagínate que este es el código que se ve en el código fuente del navegador una vez se han importado los datos de la base de datos. Pues ahora nos vienen de perlas los selectores de CSS3:

CSS3

img[alt*="2011"] {
	// estilos de las películas del 2011
}

img[alt$="terror"] {
	// estilos de las películas de terror
}

img[alt$="infantil"] {
	// estilos de las películas infantiles
}

TweetCC utiliza un selector de CSS3 con la palabra “tweetCC”:

a[title$="tweetCC"] {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 140px;
    height: 140px;
    text-indent: -9999px;
    }

css3-tweetcc-2

Combinadores de CSS3

El único tipo de combinador nuevo introducido en CSS3 es el selector hermano o sibling. Está dirigido a todos los hermanos de un elemento que tienen el mismo padre.

Por ejemplo, para añadir un borde gris en todas las imágenes que sean hermanas de un div en particular hacemos lo siguiente:

div~img {
	border: 1px solid #ccc;
	}

Pseudoclases de CSS3

Veamos algunas pseudo-clases de CSS3:

:nth-child(n)
Te permite configurar elementos según su posición respecto a sus padres. Puede utilizar un número, una expresión numérica o las palabras claves pares e impares. Si por ejemplo quieres seleccionar un grupo de tres elementos después del cuarto sólo tiene que utilizar:

p:nth-child(3n+4) { background:#ff0000;}

:nth-last-child(n)
Sigue la misma idea que el selector anterior, pero hace coincidir los últimos hijos o children de un elemento padre. Por ejemplo, para seleccionar los dos últimos párrafos de un div, usaríamos el siguiente selector:

div p:nth-last-child(-n+2) { background:#ff0000;}

:last-child
Te permite seleccionar el último elemento hijo de un padre. Veamos un ejemplo:

p:nth-last-child(1) { background:#ff0000;}

:checked
Muy útil para seleccionar las casillas marcadas.

:empty
Selecciona los elementos que no tienen hijos o que están vacíos.

:not(s)
Selecciona los elementos que no cumplen la característica mencionada. Ejemplo:

 input:not([type="submit"])

Selecciona todos los elementos input que no son submit.

Pseudoelementos de CSS3

Vimos ya cómo utilizar los pseudoelementos ::before y ::after . Con CSS3 se introdujo el pseudoelemento ::selection, que te permite seleccionar los elementos marcados por el usuario.

2. RGBA y opacidad en CSS3

RGBA no sólo te permite especificar el color de un elemento sino también su opacidad. En su página web Tim Van Damme utiliza los colores RGBA para los efectos de hover. Por ejemplo, en el enlace “network” utiliza este código:


#networks li a:hover,
#networks li a:focus {
    background: rgba(164, 173, 183, .15);
 }

La diferencia entre RGBA y opacity es que la primera sólo afecta al elemento en cuestión, mientras que opacity afecta al elemento y a todos sus hijos.

	p {  opacity: 0.8; }

Aquí todos los párrafos y sus hijos tendrán una opacidad de 0.8, esto es, un 80% de su valor original.

Veamos un ejemplo:

 

En el primer caso estamos dando una opacidad 0.2, mientras que en el último es de 1. Aquí tienes el código HTML en el que he usado inline CSS:

<div style="height: 30px; width:500px; background: rgb(255, 0, 0) ; opacity: 0.2;"></div>
<div style="height: 30px; width:500px; background: rgb(255, 0, 0) ; opacity: 0.4;"></div>
<div style="height: 30px; width:500px; background: rgb(255, 0, 0) ; opacity: 0.6;"></div>
<div style="height: 30px; width:500px; background: rgb(255, 0, 0) ; opacity: 0.8;"></div>
<div style="height: 30px; width:500px; background: rgb(255, 0, 0) ; opacity: 1;">

3. Estructura multi-columna con CSS3

Una propiedad de CSS3 de gran utilidad es que nos permite crean un layout con varias columnas sin la necesidad de utilizar varios divs. Es lo que hace por ejemplo TweetCC:

  -webkit-column-count:3;
  -webkit-column-gap:20px;

css3 columnas

Podemos definir tres cosas dentro de este selector: el número de columnas (column-count), el ancho de cada columna (column-width) y el espacio que hay entre columnas (-column-gap).

Si queremos añadir una barra vertical que separe las columnas utilizamos la propiedad column-rule, que funciona parecido a un borde:

div { column-rule: 1px solid #ccc; }

4. Backgrounds múltiples en CSS3

Una de las propiedades de CSS3 es que te permite utilizar diferentes backgrounds con el uso de propiedades como background-image, background-repeat, background-size, background-position, background-origin y background-clip.

Veamos un ejemplo:

div {
background: url(ejemplo1.jpg) top left no-repeat,
	url(ejemplo2.jpg) bottom left no-repeat,
	url(ejemplo3.jpg) center center repeat-y;
}

Y si queremos rizar el rizo podemos complicar un poco más este código:

div {
	background: url(ejemplo1.jpg) top left (100% 2em) no-repeat,
		url(ejemplo2.jpg) bottom left (100% 2em) no-repeat,
		url(ejemplo3.jpg) center center (10em 10em) repeat-y;
	}

Lo que significa por ejemplo (100% 2em) es que la imagen utilizará todo el ancho disponible y tendrá una altura de 2em.

Veamos un ejemplo:

Este cuadro tiene dos imágenes como background, la primera es una oveja y la segunda es el césped con el cielo azul.

 

Veamos el código:

HTML:

<p>Este cuadro tiene dos imágenes como background, la primera es una oveja y la segunda es el césped con el cielo azul.</p>

CSS:

.multiple_bg {
    background-image: url("img/sheep.png"), url("img/betweengrassandsky.png");
    background-position: center bottom, left top;
    background-repeat: no-repeat;
    height: 250px;
    padding: 5px;
    width: 500px;
}

5. Ajuste de línea

El ajuste de línea o word wrap se utiliza para evitar que palabras largas se desborden de su contenedor. Puede tener dos valores: normal y word-break.

El valor normal (el predeterminado) sólo permite descomponer palabras en determinados puntos, como por ejemplo pueden ser guiones.

Si se utiliza el valor break-word, entonces la palabra se puede romper en cualquier punto con tal de evitar que se desborde. Este valor es el que utiliza el panel de administración de WordPress en los listados de entradas y páginas:

css3-wordpress-admin-2

Y el código es:

.widefat * {
    word-wrap: break-word;
}

6. Sombra de textos

La sombra de textos o text shadow es una propiedad de CSS3 que cada vez se utiliza más, al permitir crear efectos que antes sólo se podían lograr con Photoshop.

Veamos un ejemplo:

p {
	text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

Aquí hemos definido el color mediante RGBA, en que es negro con una opacidad del 80%. Los otros tres elementos, esto es 0 1px 0 indican la posición en la coordenada x, la coordenada y y el desefonque o blur.

Si queremos utilizar varios colores para hacer una sombra, los separamos por comas:

p {
    text-shadow: #ff0000 4px 4px 2px,
		#00ff00 -4px -4px 2px,
		#0000ff -4px 4px 2px;
    }

A diferencia del caso anterior, aquí hemos definido el color en formato hexadecimal en lugar de RGBA.

Veamos un ejemplo:

Si usas Webkit (desde Safari 3+), Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror o iCab deberías ver una sombra en el texto.

 

Código HTML:

<p id="text_shadow">Si usas Webkit (desde Safari 3+), Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror o iCab deberías ver una sombra en el texto.</p><br/>

Código CSS:

#text_shadow {
    font-weight: bold;
    text-shadow: 2px 2px 2px #999999;
}

7. El atributo @font-face

Uno de los elementos más usados de CSS3 es el @font-face, que nos permite importar nuestras fuentes al diseño web y así no depender de las que tiene instalado el usuario en su equipo. Veamos un ejemplo:

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 *
}

Si el navegador no conoce el atributo @font-face, o sí lo reconoce pero no encuentra la fuente en sí, entonces utilizará la fuente siguiente que se haya definido o bien la predeterminada.

8. Esquinas redondeadas con border-radius

La regla número uno de la Web 2.0 es: si tiene esquinas redondeadas, es moderno. Gracias a la propiedad border-radius de CSS3 ya no hace falta que utilices ya ni Photoshop ni JavaScript para conseguir que tus esquinas sean redondeadas.

Veamos un ejemplo:

Ejemplo de esquinas redondeadas con CSS3.

 

Código HTML:

<div class="rounded">Ejemplo de esquinas redondeadas con CSS3</div>

Para conseguir que las esquinas se vean redondeadas, sólo necesitas este código CSS:

div.rounded {
    background-color: #eee;
    line-height: 20px;
    text-align:center;
    padding: 20px;
    border-radius:15px;
    -moz-border-radius: 15px;
}

En el caso de border-radius hemos de utilizar también -moz-border-radius para Mozilla.

Esto lo que hace es que todas las esquinas sean redondeadas. Pero supongamos que no queremos que lo sean todas, entonces aplicamos esta regla:

4 valores:
border-radius: ArribaIzquierda ArribaDerecha AbajoDerecha AbajoIzquierda;

3 valores:
border-radius: ArribaIzquierda AbajoIzquierda+ArribaDerecha AbajoDerecha;

2 valores:
border-radius: ArribaIzquierda+AbajoIzquierda ArribaDerecha+AbajoDerecha;

1 sólo valor:
border-radius: Todos;

En el caso que el navegador no de soporte a la propiedad border-radius, en lugar de verse las esquinas redondeadas se verán esquinas en ángulo recto, al igual que un rectángulo.

9. Usar imágenes como bordes con border-image

Otra funcionalidad muy interesante para los bordes en CSS es border-image. Con esta propiedad puedes definir el uso de una imagen en lugar del borde habitual. Esta funcionalidad está dividida en dos propiedades:
border-image y border-corner-image. Si sólo queremos especificar uno de los bordes, utilizaremos estas otras etiquetas:

border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image

border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

border-image actualmente funciona en Safari and Firefox 3.1. Veamos un ejemplo:

border-image: url(border.png) 27 27 27 27 round round;

Esta propiedad se verá así:

10. Crear sombras con box-shadow

La propiedad box-shadow permite a los diseñadores web el implementar fácilmente sombras tanto dentro como fuera de elementos de caja, especificando valores como el color, tamaño, borrosidad (blur) y offset.

El soporte de los navegadores está aumentando con Mozilla (Firefox), Webkit (Safari y Chrome), Opera e IE9. Aún así, Mozilla y Webkit necesitan todavía sus prefijos -moz- y -webkit– respectivamente (nota: Mozilla Firefox 4.0+ ya no requiere el prefijo -moz-).

Veamos un ejemplo:

Firefox, Safari/Chrome, Opera y IE9 muestra una sombra gris.

 

Código HTML del ejemplo:

<div class="boxshadow">Firefox, Safari/Chrome, Opera y IE9 muestra una sombra gris.</div>

Código CSS:

div.boxshadow {
    background-color: #eee;
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    margin-right: 20px;
    margin-top: 10px;
    padding: 20px;
    text-align: center;
}

11. Definir el tamaño de caja con CSS3

De acuerdo con las especificaciones de CSS 2,1, en el cálculo de las dimensiones generales de una caja, los bordes y el relleno del elemento deben añadirse a la anchura y la altura. Pero los navegadores antiguos son bien conocidos por interpretar esta especificación de maneras muy creativas. La propiedad box-sizing permite especificar cómo el navegador calcula el ancho y el alto de un elemento, lo que nos facilita mucho la vida.

Esta propiedad la utiliza WordPress en su panel de administración:

css3 wordpress

El código utilizado es:

input[type="text"],
	textarea {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	}

La propiedad box-sizing puede tener dos valores: border-box y content-box. El content-box o contenido de la caja hace que el ancho sea tal y como se especifica en CSS 2,1. Border-box resta el relleno y el borde de la anchura y altura especificadas.

12. Media Queries de CSS3

Otra de las propiedades de CSS3 es los media queries. Si has trabajado anteriormente con la versión para imprimir de una página web, entonces ya habrás tenido una primera experiencia con los media queries. Con los media queries lo que hacemos básicamente es decidir cómo se va a mostrar una página web en función de los parámetros que indiquemos. En el caso tradicional, nos encontrábamos con dos versiones de una web, la que era para pantalla o screen y la que era para imprimir o print.

Con el uso masivo de los dispositivos móviles con acceso a Internet se hizo necesario adaptar los diseños a lo que hoy en día conocemos como responsive design gracias a Ethan Marcotte.

Los Media Queries de CSS3 llevan la idea de los media queries tradicionales un paso más allá para adaptar los diseños a las diferentes resoluciones de pantalla. Si te interesa el tema, te recomiendo el artículo CSS3 Media Queries para un Diseño Web Responsive.

Conclusión

Hemos visto todo lo que necesitamos saber para empezar a maquetar nuestros diseños con CSS3. Aunque esto no es todo, pues también podemos usar animaciones como transiciones y rotaciones, usar el módulo de voz de CSS3, etc. Pero con esto ya tenemos una muy buena base para convertirnos en profesionales del tema.

Si quieres aprender diseño web, te recomiendo el curso de diseño web desde cero con HTML5 y CSS3 así como el curso de diseño web responsive, con los que vas a aprender todo lo que necesitas saber sobre diseño web a nivel profesional.

Te animo a compartir el artículo y a dejar un comentario.

Un abrazo!


Comentarios

  • Antonio

    Un post muy completo Sandra, como de costumbre. ¿Podrias recomendarme bibliografia (ingles o español) sobre css3 exclusivamente? Todos los libros que veo suelen añadir HTML5 y me da la impresion de que no profundizaran en ninguna de las dos tecnologias.

  • Marco Ceron

    Buen articulo, me ayudara mucho para el desarrollo de mis aplicaciones WEB.

  • Danyel

    Muy buen recordatorio y recopilación de propiedades. gracias !

  • Jorge

    Pues te voy a decir por qué no uso CSS3 con más profusión, aunque creo que la razón es obvia: porque Explorer 8, por ejemplo, no reconoce muchas de sus especificaciones. Desgraciadamente mucha gente lo sigue usando así que…

    Por cierto, ¡muy buen artículo! Me ha encantado.
    Muchas gracias.

    • Sandra

      Bien, yo soy de la opinión de usar el progressive enhancement, pues no considero que una página web se haya de ver igual en todos los navegadores.. así, el que navegue con Chrome o Firefox tendrá una mejor experiencia de usuario que el que lo haga con Internet Explorer. En sí Chrome al menos en España está ganando cuota de mercado a un ritmo muy acelerado, creo que hemos de potenciar el uso de navegadores modernos, sin perjudicar a los que aún no se han adaptado.. ese es al menos mi punto de vista :-)

  • Daniel

    Hola Sandra,

    Muy buen post sobre CSS3, pero quise aplicar el ejemplo de la imagen de fondo escalable al ancho de pantalla como lo describís y no me toma el efecto.

    Sabes por qué puedes ser?

    Saludos
    Daniel