Sign up with your email address to be the first to know about new products, VIP offers, blog features & more.

Conocer el top 10 de comandos CSS3 [parte 1/2]

Traducción del original Top 10 CSS3 commands de Webcredible.

1. Bordes radiales

Hasta la aparición de CSS3 para crear esquinas curvadas, teníamos que remitirnos al truco de las cuatro imágenes, cada una para cada esquina. Con CSS3 es tan simple como lo siguiente:

2. Sombra cuadrada

Una sombra puede ser aplicada a los elementos cuadrados utilizando una sola instrucción. Se necesitan tres números para definir cómo será:

  1. Distancia del desplazamiento horizontal: positivo significa a la derecha, negativo a la izquierda
  2. Distancia del desplazamiento vertical: positivo significa hacia abajo, negativo hacia arriba
  3. Cómo de emborronada quieres la sombra

Este comando no se visualiza, todavía, en Internet Explorer.

3. Transparencia o RGBA

Los niveles de transparencia siempre han sido un problema para los navegadores, algunos directamente no los aplicaban y los demás los mostraban de una forma diferente para un mismo valor. Para solucionarlo, CSS3 plantea un nuevo estándar basado en tres números del 0 al 255, los RGB de siempre; y un cuarto, cuyo dominio abarca del 0 al 1 y que indica el canal alfa, es decir, la transparencia.

Por ejemplo:

Sin embargo, Internet Explorer no entenderá el comando y deberemos duplicar la instrucción para una óptima visualización en diferentes navegadores. El pseudo-selector :last-child hará que Internet Explorer obvie la segunda instrucción.

4. Columnas

Para evitar los problemas que pueden surgir elementos flotantes, CSS3 incluye la opción de crear columnas directamente desde el estilo. Una vez creadas las columnas en una etiqueta DIV, puedes usar etiquetas como P para rellenarlas de contenido, sin tener que poner DIV a izquierda y otro a derecha, por ejemplo.

El uso para dos columnas sería el siguiente:

5. Múltiples imágenes de fondo

A partir de ahora, podemos definir más de una imagen de fondo, separando por comas las imágenes. Veamos un ejemplo:

Como Internet Explorer no procesará la orden al encontrar las dos imágenes, deberemos volver a valernos del hack o truco de usar el elemento :last-child, veamos:

En breve, pondremos la segunda parte con otros cinco nuevos comandos de mucha utilidad.

Leer entrada anterior
Otra revista digital más para todos, Planetix

Os traemos una nueva revista que he encontrado leyendo Ubuntu Life. No es la primera revista que difundimos por Linux...

Cerrar