Cómo aplicar dos efectos css3 sombra
CSS incluye dos efectos de sombra, ambos de los cuales requieren al menos dos propiedades: dimensiones de sombra horizontal y vertical. efectos CSS3 rápidamente se están integrando en el diseño de páginas web, y los diseñadores están llegando a algunas formas interesantes y creativas para aplicarlas.
Video: HTML5 y CSS3 - 13 - Sombras o box-shadow
efectos de sombra de CSS3 son los siguientes:
Sombra de la caja se aplica a los bordes alrededor de selectores.
Sombra de texto se aplica sombras al texto.
Utilizando sombra de la caja como un ejemplo de sintaxis se ve así:
box-shadow: h-sombra v-sombra-
Positivo h-sombra Los valores generan una sombra a la derecha del texto, mientras negativa h-sombra Los valores generan una sombra a la izquierda del texto. Positivo v-sombra valores generan una sombra por debajo del texto, mientras que los valores negativos crean una sombra sobre el texto. Los valores se definen normalmente en píxeles.
Sombras también incluyen a menudo una difuminar propiedad. los difuminar valor define el espesor de la difuminar elemento del gradiente - esencialmente cómo ampliamente para separar el gradiente en la sombra. Una mayor difuminar crea un valor, así, el efecto borroso, mientras que un menor difuminar crea un valor más nítidas, más nítidas sombras paralelas. los difuminar valor aparece después de la h-sombra y v-sombra Los valores en la definición de estilo, así:
box-shadow: h-sombra v-sombra Blur-
También puede definir un color de sombra (si no se especifica el color, aparece un color por defecto del navegador).
Así, por ejemplo, en el ejemplo de código siguiente, la caja-sombra se define con una sombra horizontal que se extiende 3 píxeles a la derecha, 6 píxeles hacia abajo, con un efecto de desenfoque medio, uno que se aplica para crear una falta de definición de gradiente como que se extiende 3 píxeles en la gota-sombra. Y un color se le ha asignado a la sombra caja (plata).
box-shadow: 3px 6px 3px plata
Spread define el tamaño de la sombra. Por defecto, la sombra es del mismo tamaño que el elemento al que se&rsquo-s aplicado pero se puede hacer que la sombra mayor (o menor) mediante la adición de una untado valor a la definición de estilo.
Añadiendo el valor de inserción a una definición de sombra invierte la sombra, colocándolo en el interior en lugar de fuera de la caja.
aquí&rsquo-s un ejemplo de una sombra de la caja definición que crea una sombra que se extiende 12 píxeles a la derecha y 18 píxeles hacia abajo, es de 25 píxeles mayor que el elemento original al que se aplica, y es de color plateado:
box-shadow: 12px 18px 12px 25px plata
Aplicado a una caja, los valores en el ejemplo anterior se parecen a lo siguiente:
Video: Paint.NET | Efecto de Sombra | Tutorial
Finalmente sombras pueden ser recuadro- es decir, colocado en el interior del elemento al que se&rsquo-re aplicada. La siguiente figura muestra cómo afecta la inserción de la misma caja-sombra mostrado anteriormente.
Crear un efecto box-shadow
efectos de caja de sombra se definen con dos parámetros esenciales: desplazamiento horizontal y vertical.
Por ejemplo, para crear un estilo de clase que genera una caja de sombra con 6 píxeles de desplazamiento horizontal y 12 píxeles de desviación vertical, que&rsquo-d utilizar este código:
box-shadow: 6px 12 píxeles;
Si quería para definir la longitud de la falta de definición, se&rsquo-D Añadir un tercer valor. Y si desea definir el color de la sombra, se&rsquo-d añadir que el valor de color:
box-shadow: 12px 6px 9px de grises
Que tiene que hacer más trabajo si la caja-sombra se va a trabajar en todos los navegadores modernos. Chrome, Opera, Instalaciones actuales de Firefox y IE9 apoyan el efecto box-shadow sin prefijo. Pero todavía se necesita para crear versiones con prefijo del código para las versiones anteriores de Firefox y, en este momento, todas las versiones de Safari.
El siguiente código define un selector de clase llamada sombra de la caja que funciona en todos los navegadores de la generación actual y tiene unos valores de relleno y los márgenes:
.sombra de la caja {
box-shadow: 12px 6px 9px de grises
-webkit-box-shadow: 12px 6px 9px de grises
-moz-box-shadow: 12px 6px 9px de grises
padding: 9px;
margen: 24px; }
Y recuerda,&rsquo-he definido un estilo de clase. Para aplicar ese estilo de clase, que todavía tiene que ser fijado a un elemento HTML. Por ejemplo, se puede aplicar el estilo de clase definida en el lote de código anterior a una etiqueta de párrafo con el siguiente código HTML:
contenido va aquí
La siguiente figura muestra esta caja-sombra aplicada a un párrafo en el navegador Safari.
Aplicar sombras para escribir
El efecto de texto-sombra, curiosamente, se apoya en los navegadores (excepto para IE) sin prefijo necesario.
El, la sintaxis básica esencial para la creación de un texto-sombra es
ext-sombra: h V Color
En esta sintaxis, marido es el offset horizontal v es el offset vertical y color es el valor del color.
El siguiente ejemplo crea un selector de clase (.sombra de texto) Que aplica una sombra de texto con un 4 píxeles de desplazamiento horizontal, un 1 píxel distancia al eje vertical, el color gris oscuro:
.sombra de texto {
text-shadow: 1px 4 píxeles de grises
}
Text-sombras a veces se aplican al tipo de blanco para un efecto limpio, acogedor. La siguiente figura demuestra la sombra de texto estilo clase definida en el código anterior con el tipo de blanco.
