Cómo usar las transformaciones 2D con CSS3

Este post se centra en CSS avanzado, concretamente en las transformaciones 2D. El modulo de transformaciones 2D en CSS permite rotar, trasladar y cambiar el tamaño de una caja (elemento) sin alterar el flujo en el documento. Este tipo de propiedades son de utilidad para realizar animaciones y transiciones. Para …

Agregar fuentes personalizadas con font-face

Uno de los componentes referidos a fuentes en CSS3 es la regla font-face. Esta regla permite tener un mayor control en las tipografías ya que se puede añadir directamente nuevas fuentes en el documento usando reglas CSS. Las fuentes que se emplean en la web normalmente se basan en las …

Cómo mostrar el texto en columnas con CSS3

CSS3 permite que el texto se muestre en varios bloques separados, muy similar a lo que veríamos en un periódico. Aunque hay maneras de ofrecer el contenido en diferentes bloques, no se puede mantener 2 o 3 columnas con todo el texto dentro del mismo elemento. La plantilla multi-columna permite …

Módulos de bordes y sombras en CSS3

Una de las ventajas que aporta CSS3 son los módulos de bordes y sombras. Antes de su implementación, para poder tener bordes redondeados o que un div tuviera sombra era preciso emplear imágenes y CSS. Hoy en día basta con poner un par de valores y obtener los mismos o …

Control de la transparencia en CSS3

CSS3 permite controlar el nivel de transparencia de los elementos. Una de las formas que proporciona son modificando el canal alpha de los valores de color RGB y HSL. Otra es con la propiedad opacity pero, veremos que ambas formas ofrecen diferentes resultados.

El modelo de color HSL como alternativa a RGB

Antes de CSS3 cuando se quería usar un color se empleaban valores RGB que suponía cuanto de rojo, verde y azul debía de tener el color deseado. De hecho, el valor hexadecimal del color representa el valor de esos 3 factores, cada 2 cifras supone el valor de un color. CSS3 …

Selectores en CSS3: pseudo-clases de estado

En CSS hay pseudo-clases que pueden hacer referencia al estado especial de un elemento. Uno muy común es cuando se pasa el ratón por encima. CSS3 incorpora nuevas pseudo-clases de estado más complejas. Selector target Con este selector los elementos que sean objetivo de una url tendrán un estilo. Por …

Selectores en CSS3: Selectores de tipo

Entre las numerosas novedades en cuanto selectores en CSS3, en este post voy a tratar de los selectores de tipo. Aunque estos selectores permiten seleccionar elementos según su tipo, deben ser hijo de algún elemento. Voy a partir de un ejemplo similar al del post anterior

Selectores en CSS3: Selectores de hijos

En CSS3 se aumentan el número de selectores. Estas opciones permiten una selección de elementos más precisa ya que permiten basarse en la posición del documento, el valor de los atributos e incluso si tienen hijos. En este post trataré los selectores de hijos. Para los selectores hijo se seleccionan …