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 …
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 …
Las medias Queries son una extensión de la regla @media de CSS. Permite ajustar el diseño de una página web según el dispositivo en el que se muestre. Las media queries juegan un papel fundamental en diseño web responsive o lo que es lo mismo, diseñar sitios web que se …
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 …
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 …
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.
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 …
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 …
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
|
1 2 3 4 5 6 7 8 9 |
<div> <p>Este el hijo 1</p> <p>Este el hijo 2</p> </div> <div> <blockquote>Este el hijo 3</blockquote> <p>Este el hijo 4</p> <p>Este el hijo 5</p> </div> |
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 …