Sombra de la caja
Con CSS3 puede crear efectos de sombra!
Efectos de sombra CSS3
Con CSS3 puede añadir sombra al texto ya los elementos.
En este capítulo aprenderá acerca de las siguientes propiedades:
-
text-shadow -
box-shadow
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -webkit- o -moz- especifica la primera versión que trabajó con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
CSS3 Shadow Texto
El CSS3 text-shadow propiedad se aplica sombra al texto.
En su uso más simple, sólo se especifica la sombra horizontal (2px) y la sombra vertical (2px):
efecto de sombra de texto!
A continuación, añadir un color de la sombra:
efecto de sombra de texto!
A continuación, añadir un efecto de desenfoque a la sombra:
efecto de sombra de texto!
El siguiente ejemplo muestra un texto blanco con la sombra negro:
efecto de sombra de texto!
El siguiente ejemplo muestra una sombra de neón resplandor rojo:
efecto de sombra de texto!
múltiples sombras
Para agregar más de una sombra al texto, puede agregar una lista separada por comas de sombras.
El siguiente ejemplo muestra un resplandor de neón rojo y azul sombra:
efecto de sombra de texto!
El siguiente ejemplo muestra un texto blanco con la sombra negro, azul y azul oscuro:
efecto de sombra de texto!
Ejemplo
h1
{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Inténtalo tú mismo " CSS3 box-shadow Propiedad
El CSS3 box-shadow propiedad se aplica a los elementos de sombra.
En su uso más simple, sólo se especifica la sombra horizontal y vertical de la sombra:
A continuación, añadir un color de la sombra:
A continuación, añadir un efecto de desenfoque a la sombra:
También puede añadir sombras a la :: antes y después :: pseudo-clases, para crear un efecto interesante:
Ejemplo
#boxshadow {
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding:
10px;
background: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind
image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one
half of the remaining 30% */
height: 100px;
bottom: 0;
} Inténtalo tú mismo " Tarjetas
Un ejemplo del uso de la box-shadow propiedad para crear tarjetas de papel-como:
1
1 de enero de, el año 2016
Hardanger, Noruega
Ejemplo
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
Inténtelo (tarjeta de texto) » probarlo (Imagen de la tarjeta)» Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »
CSS3 propiedades de sombra
En la tabla siguiente se enumeran las propiedades de CSS3 sombra:
| Propiedad | Descripción |
|---|---|
| box-shadow | Añade uno o más sombras a un elemento |
| text-shadow | Añade uno o más sombras a un texto |