 |
Sombras múltiples (box-shadow)
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)
Sombras con transparencias (box-shadow)
Otra posibilidad que podemos aplicar a la propiedad box-shadow es definir un valor de transparencia de la sombra y para esto debemos utilizar la función rgba
La función rgba () define colores utilizando el modelo Red-green-blue-alpha (RGBA).
rgba(red, green, blue, alpha)
Sintaxis
- red Define la intensidad del rojo como un número entero entre 0 y 255, o como un valor porcentual entre 0% y 100%
- green Define la intensidad del verde como un número entero entre 0 y 255, o como un valor porcentual entre 0% y 100%
- blue Define la intensidad del azul como un número entero entre 0 y 255, o como un valor porcentual entre 0% y 100%
- alpha Define la opacidad como un número entre 0.0 (completamente transparente) y 1.0 (completamente opaco)
Los valores de color RGBA son una extensión de los valores de color RGB con un canal alfa, que especifica la opacidad del color. La función rgba, la podemos usar con sombras con transparencias (box-shadow) en el siguiente ejemplo:
box-shadow: 30px 30px 30px rgba(255,0,0,0.3);
Para confeccionar un recuadro con sombra de color rojo con un índice de transparencia del 50% luego debemos especificarlo de la siguiente manera:
#recuadro1{
box-shadow: 30px 30px 30px rgba(255,0,0,0.5);
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}
box-shadow: 30px 30px 30px rgba(255,0,0,0.5);
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}
Recuadro 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,