 |
Opacidad (color)
Bordes redondeados (border-radius)
Bordes redondeados en los vértices
Sombras (box-shadow)
Sombras múltiples (box-shadow)
Sombras interiores
Sombras con transparencias
Sombras de texto
Rotación
Punto de origen
Escalado
Translación
Torcer (transform:skew)
Múltiples transformaciones en forma simultanea
Opacidad (opacity)
Opacidad (color)
Múltiples columnas (column-count)
Múltiples columnas dinámicas (column-width)
Múltiples columnas y su separación (column-gap)
Múltiples columnas y línea separadora (column-rule)
Importar una fuente no disponible en el navegador (@font-face)
Imágenes de fondo (background-image)
Imágenes de fondo en diferentes posiciones (background-position)
Imágenes de fondo (background-size)
Imágenes de fondo (background-origin)
Transiciones de una propiedad (transition)
Transiciones de múltiples propiedades (transition)
Transiciones (funciones de transición)
Transiciones (tiempo de demora en iniciar la transición)
Transiciones (otra sintaxis para hacer lo mismo)
Animaciones (sintaxis básica)
Animaciones (animation-iteration-count y animation-direction)
Animaciones (animation-timing-function y animation-delay)
Animaciones (animation-play-state)
Animaciones (definición de más de 2 keyframes)
Opacidad (color)
Los valores de color RGBA son una extensión de los valores de color RGB con un canal alfa, que especifica la opacidad de un color. Un valor de color RGBA se especifica con: rgba (rojo, verde, azul, alfa). El parámetro alfa es un número entre 0.0 (completamente transparente) y 1.0 (completamente opaco).
En CSS3 aparece una variante de la asignación del color mediante la función rgba.
Elemento {
color: rgba(rojo,verde,azul,opacidad);
}
Para definir un color debemos indicar cuatro valores, los tres primeros son valores enteros entre 0 y 255, que indican la cantidad de rojo, verde y azul. El cuarto valor es un número entre 0 y 1 que indica la opacidad que se aplica al color. Si indicamos un 1 se grafica totalmente opaco (es el valor por defecto) un valor menor hará más transparente el gráfico.
Veamos un ejemplo primero dispondremos un texto dentro de un recuadro que tiene una imagen y no utilizaremos la función rgba para definir la opacidad, sino utilizaremos la función rgb para definir solo el color:
rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);
rgba(255, 0, 0,1);
rgba(0,255, 0, 0.2);
rgba(0, 255, 0, 0.4);
rgba(0, 255, 0, 0.6);
rgba(0, 255, 0, 0.8);
rgba(0, 255, 0, 1);
rgba(0, 0, 255, 0.2);
rgba(0, 0, 255, 0.4);
rgba(0, 0, 255, 0.6);
rgba(0, 0, 255, 0.8);
rgba(0, 0, 255, 1);