CSS de sombra de mesa. Sombras interiores en CSS
La propiedad CSS box-shadow agrega una o más sombras a un elemento. Para especificar varias sombras, debe agregar valores de sombra adicionales, separados por comas.
Soporte del navegador
| Propiedad | Ópera | Explorador | Borde |
|||
|---|---|---|---|---|---|---|
| sombra de caja | 10.0 4.0 -webkit- | 4.0 3.5 -moz- | 10.5 | 5.1 3.1 -webkit- | 9.0 | 12.0 |
Sintaxis CSS:
sombra de caja: "ninguno | inserción h-sombra v-sombra radio de desenfoque color de radio de extensión | inicial | heredar";Sintaxis de JavaScript:
Object.style.boxShadow = "10px 5px 5px rojo"
Valores de propiedad
| Significado | Descripción |
|---|---|
| ninguno | La sombra no se muestra. Este es el valor predeterminado. |
| recuadro | Valor opcional. Si no se especifica este valor (el valor predeterminado), la sombra estará en el exterior del elemento y creará el efecto de que el elemento está abultado. Si la palabra clave insertada (valor) está presente, la sombra caerá dentro del elemento y creará un efecto de sangría. En otras palabras, es un cambio de una sombra exterior a una interior. |
| h-sombra | Valor requerido. Establece la ubicación de la sombra horizontal. Se permiten valores negativos. |
| v-sombra | Valor requerido. Establece la ubicación de la sombra vertical. Se permiten valores negativos. |
| radio de desenfoque | Valor opcional. Establece el radio de desenfoque. Cuanto mayor sea el valor, mayor será el desenfoque, lo que hará que la sombra sea más grande y más clara. Si no se especifica el valor, el valor será 0 (nítido: sombras distintas). No se permiten valores negativos. |
| radio de extensión | Valor opcional. Tamaño de la sombra (radio de estiramiento de la sombra). Con valores positivos la sombra se expandirá, y con valores negativos se reducirá. Si no se especifica ningún valor, el valor será 0 (la sombra corresponde al tamaño del elemento). |
| color | Valor opcional. Define el color de la sombra (HEX, RGB, RGBA, HSL, HSLA, "Colores predefinidos"). El valor predeterminado es negro. |
| Establece la propiedad en su valor predeterminado. | |
| Indica que el valor se hereda del elemento padre. |
Versión CSS
CSS3Heredado
No.animable
Sí.Ejemplo de uso
La propiedad box-shadow agrega una o más sombras a un elemento. La sombra es una copia del elemento desplazada a la distancia especificada. Las sombras pueden ser externas o internas, borrosas o planas y pueden seguir los contornos de bloques con esquinas redondeadas. Usando la palabra clave insert, se crean sombras dentro del elemento, haciendo que el elemento sea visualmente voluminoso o deprimido.
Cómo hacer una sombra de cuadro usando la propiedad box-shadow
Soporte del navegador
ES DECIR: 9.0
Borde: 12.0
Firefox: 4.0, 3.5 -moz-
Cromo: 10.0, 4.0 -kit web-
Safari: 5.1, 3.1 -kit web-
Ópera: 11.5
iOSSafari: 5.1, 3.1 -kit web-
Navegador de Android: 4.0, 2.1 -kit web-
1. Sintaxis de la propiedad Box-shadow
Cada sombra toma de uno a cinco parámetros: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque (opcional), radio de extensión (opcional) y color de sombra. Las sombras no afectan el diseño y pueden superponerse a elementos adyacentes o sus sombras. La propiedad no se hereda.
Arroz. 1. Sintaxis de la propiedad Box-shadow | Valores: | |
| desplazamiento x | Valor requerido. El desplazamiento horizontal de la sombra con respecto al bloque. Puede tomar valores tanto positivos como negativos, uno positivo desplaza la sombra hacia la derecha del bloque, uno negativo, hacia la izquierda. |
| desplazamiento y | Valor requerido. El desplazamiento vertical de la sombra con respecto al bloque. Puede tomar valores tanto positivos como negativos, el positivo mueve la sombra hacia abajo y el negativo la mueve hacia arriba. |
| difuminar | Valor opcional. Determina el radio de desenfoque de la sombra. Cuanto mayor sea el radio, más borrosa será la sombra. Sólo se pueden utilizar valores positivos. |
| extensión | Opcional, expande la sombra, espesando la porción sólida entre los bordes borrosos. Acepta valores tanto positivos como negativos, especificados en unidades de longitud: px, etc. |
| color | Valor opcional. Por defecto la sombra es negra. Para establecer el valor, puede utilizar los siguientes formatos de grabación de color: #RRGGBB, rgb(rojo, verde, azul), rgba(rojo, verde, azul, alfa). Para Safari, se debe especificar el color de la sombra. |
| recuadro | Crea una sombra dentro del bloque. |
| ninguno | El valor predeterminado significa que no hay sombra. |
| inicial | Establece el valor de la propiedad en el valor predeterminado. |
| heredar | Hereda el valor de la propiedad del elemento padre. |
2. Bloquear ejemplos de sombras
2.1. sombra interior
.example-shadow-1 (fondo: #e6e3df; text-align: center;) .example-shadow-1 span (margen: 50px; alto: 100px; ancho: 200px; pantalla: bloque en línea; box-shadow: recuadro 2 px 2 px 5 px rgba (154, 147, 140, 0,5), 1 px 1 px 5 px rgba (255, 255, 255, 1);
2.2. Sombra plana en un lado
departamento
departamento
.example-shadow-2 (fondo: beige; alineación de texto: centro;) .example-shadow-2 a (pantalla: bloque en línea; radio de borde: 5px; relleno: 15px 35px; tamaño de fuente: 22px; margen : 20px; color: blanco; fondo: #55acee; cuadro-sombra: 0 5px 0 #3C93D5; ejemplo-sombra-2 a:hover (fondo: #6FC6FF; )Con la llegada de la norma CSS 3 introdujo la propiedad box-shadow, que se ha vuelto ampliamente utilizada entre los desarrolladores web, ya que facilita agregar una o más sombras al cuadro de un elemento para brindar el efecto visual deseado.
En el artículo anterior, analizamos la propiedad border-radius usándola, puedes obtener una sombra con esquinas redondeadas; Por analogía con una sombra de texto (text-shadow), puede crear múltiples sombras, se aplican de acuerdo con eje z de adelante hacia atrás (con la primera sombra dada en la parte superior).
Echemos un vistazo más de cerca a la sintaxis de esta propiedad moderna:
Consideremos en orden los posibles valores de esta propiedad:
| Significado | Descripción |
|---|---|
| ninguno | La sombra no se muestra. Este es el valor predeterminado. |
| recuadro | Valor opcional. Si no se especifica este valor (el valor predeterminado), la sombra estará en el exterior del elemento y creará el efecto de que el elemento está abultado. Si el recuadro de la palabra clave (valor) está presente, la sombra caerá dentro del elemento y creará un efecto abollado. En otras palabras, es un cambio de una sombra exterior a una interior. |
| h-sombra | Valor requerido. Establece la ubicación de la sombra horizontal. Se permiten valores negativos. |
| v-sombra | Valor requerido. Establece la ubicación de la sombra vertical. Se permiten valores negativos. |
| radio de desenfoque | Valor opcional. Establece el radio de desenfoque. Cuanto mayor sea el valor, mayor será el desenfoque, lo que hará que la sombra sea más grande y más clara. Si no se especifica el valor, el valor será 0 (nítido: sombras distintas). No se permiten valores negativos. |
| radio de extensión | Valor opcional. Tamaño de la sombra (radio de estiramiento de la sombra). Con valores positivos la sombra se expandirá, y con valores negativos se reducirá. Si no se especifica ningún valor, el valor será 0 (la sombra corresponde al tamaño del elemento). |
| color | Valor opcional. Define el color de la sombra (HEX, RGB, RGBA, HSL, HSLA, "Colores predefinidos"). El valor predeterminado es negro. |
Los puntos principales que debes comprender para crear sombras para elementos son:
Me gustaría llamar su atención sobre el hecho de que la propiedad box-shadow actualmente es compatible con todos los navegadores modernos:
| Propiedad | Ópera | Explorador | Borde |
|||
|---|---|---|---|---|---|---|
| sombra de caja | 10.0 4.0 -webkit- | 4.0 3.5 -moz- | 10.5 | 5.1 3.1 -webkit- | 9.0 | 12.0 |
Si desea ampliar la compatibilidad con algunos navegadores, incluidos los móviles iOS 3.2 - 4.3 Y Androide 2.1 - 3, entonces se recomienda utilizar prefijos del fabricante y utilizar la siguiente sintaxis (en los ejemplos del artículo, la sintaxis solo se utilizará para navegadores modernos):
-webkit-box-shadow: valor; /* Safari 3.1 - 4, IOS 3.2 - 4.3 y Android 2.1 - 3 */-moz-box-shadow: valor; /* Firefox 3.5 - 3.6 */ box-shadow: valor; /* tabla arriba */Pasemos a la práctica y comencemos con un ejemplo sencillo en el que añadimos una sombra a los elementos:
El resultado de nuestro ejemplo:
Usando múltiples sombras
En el siguiente ejemplo, propongo considerar el interesante efecto de mezcla de colores que se puede lograr al usar múltiples sombras:
- Dos bloques de ancho y alto fijos (15em y 10em), agregó relleno en todos los lados (2em) y configuró los bloques en línea de bloque para poder alinearlos.
- Para primero bloquear con clase .prueba nosotros indicamos cuatro sombras con diferentes valores de sombra horizontal y vertical para que el elemento tenga diferentes sombras en todos los lados. El radio de desenfoque para todas las sombras se estableció en el mismo. El color de cada sombra es diferente y se especifica mediante colores predefinidos.
- Para segundo bloquear con clase .prueba2 nosotros indicamos cuatro Sombras con diferentes valores de sombra horizontal y vertical. El radio de desenfoque para todas las sombras se estableció en el mismo, mientras que el estiramiento de la sombra se estableció en negativo, lo que provocó una disminución en la sombra misma. El color de cada sombra es diferente y se especifica mediante el sistema RGBA.
El resultado de nuestro ejemplo:
Usar sombras para imágenes
El último ejemplo de este artículo se centrará en el uso de sombras para imágenes. Me gustaría llamar inmediatamente su atención sobre el hecho de que puede especificar directamente la sombra del elemento HTML. No funcionará, pero tenemos la oportunidad de especificar una imagen como fondo para el elemento que nos interesa y luego asignar la sombra que necesitamos a este elemento.
Consideraremos en detalle cómo trabajar con imágenes de fondo en el artículo del libro de texto "", y ahora, para finalizar el estudio del uso de las sombras, lo tocaremos superficialmente y usaremos la imagen como fondo para un elemento en el siguiente ejemplo:
- Dos bloques de ancho y alto fijos (237px y 232px), agregaron márgenes para todos los lados (2em) y configuró los bloques para que sean líneas de bloque para poder alinearlos. Establecimos el tamaño del bloque de 237 px por 232 px para el tamaño de la imagen, de modo que en esta etapa del entrenamiento no tuviéramos que escalar la imagen para que se ajuste al elemento y afectar las propiedades CSS que planeamos estudiar en una etapa posterior ( en el artículo del libro de texto " ").
- Para primero bloquear con clase .prueba Especificamos un valor cero para la sombra horizontal y vertical, pero al mismo tiempo especificamos un radio de desenfoque de 50 px y lo ampliamos estableciendo un radio de extensión de 10 px. El color de la sombra se indicó con un color predefinido (violeta). Además, especificamos la palabra clave insert en la declaración, que hace que la sombra caiga dentro del elemento. En otras palabras, hemos creado una sombra interior del elemento.
- Para segundo bloquear con clase .prueba2 Especificamos un valor cero para la sombra horizontal y vertical, pero al mismo tiempo especificamos un radio de desenfoque de 50 px y lo ampliamos estableciendo un radio de extensión de 10 px. El color de la sombra se especifica en el modo RGBA.
El resultado de nuestro ejemplo:
Arroz. 98 Ejemplo de uso de sombras para imágenes en CSS (propiedad box-shadow)
Preguntas y tareas sobre el tema.
Antes de pasar al siguiente tema, complete la tarea de práctica:
Si tiene dificultades para completar la tarea de práctica, siempre puede abrir el ejemplo en una ventana separada e inspeccionar la página para comprender qué código CSS se utilizó.
2016-2019 Denis Bolshakov, puede enviar comentarios y sugerencias sobre el trabajo del sitio a [email protected]
Igual que la actualización 3, pero con reglas CSS modernas (=menos) para que no se requiera un posicionamiento especial en el pseudoelemento.
#box (color de fondo: #3D6AA2; ancho: 160px; alto: 90px; posición: absoluta; arriba: calc(10% - 10px); izquierda: calc(50% - 80px); ) .box-shadow:after ( contenido: ""; ancho: 100%; índice z: -1; sombra de cuadro: 0px 8px 2px #000000;
ACTUALIZACIÓN 3
#box (color de fondo: #3D6AA2; ancho: 160px; alto: 90px; margen superior: -45px; margen izquierdo: -80px; posición: absoluta; superior: 50%; izquierda: 50%; ) .box- sombra:después ( contenido: ""; ancho: 150px; alto: 1px; margen superior: 88px; margen izquierdo: -75px; visualización: bloque; posición: absoluta; izquierda: 50%; índice z: -1; -webkit-box-shadow: 0px 0px 8px 2px #000000; -moz-box-shadow: 0px 0px 8px 2px #000000;
ACTUALIZACIÓN 2
Aparentemente, solo puedes hacer esto con la opción de etiqueta de cuadro CSS opcional, como todos los demás acaban de especificar. Aquí está la demostración:
Webkit-box-shadow: 0 4px 4px -2px #000000;
-moz-box-sombra: 0 4px 4px -2px #000000;
sombra de cuadro: 0 4px 4px -2px #000000;
Esta sería la mejor solución. El parámetro adicional que se agrega se describe como:
La cuarta longitud es la distancia de extensión. Los valores positivos hacen que la forma de la sombra se expanda en dirección a lo largo del radio especificado. Los valores negativos hacen que la forma de la sombra concuerde.
#wrapper (ancho: 84px; posición: relativa;) #element (color de fondo: #3D668F; altura: 54px; ancho: 100%; posición: relativa; índice z: 10;) #sombra (color de fondo: # 3D668F; altura: 8px; margen izquierdo: -40px; inferior: 0px; índice z: 5; sombra de caja moz: 0px 2px 4px #000000;
Respuesta original
Sí, puedes hacer esto con la misma sintaxis que proporcionaste. El primer valor controla el posicionamiento horizontal y el segundo valor controla el posicionamiento vertical. Así que simplemente establezca el primer valor en 0px y el segundo en cualquier desplazamiento que desee realizar de la siguiente manera.
Las sombras en CSS se pueden implementar con bastante rapidez y facilidad, ya sea una sombra de cuadro o una sombra de texto. ¿Pero es realmente tan fácil implementar una sombra interior? ¿Puedes crear una sombra de cuadro insertado? ¿Y qué pasa con la misma tarea cuando se utiliza texto?
Hoy queremos hablarte de una forma muy sencilla de implementar una sombra interior, que implica sólo unas pocas líneas de código. Le informaremos sobre las sombras de cuadro y texto, y cómo puede cambiarlas para crear una sombra insertada.
¿Te gusta este artículo? No olvides suscribirte a nuestro.
Sintaxis de sombra
Antes de entrar en las sombras incrustadas, veamos la sintaxis básica para crear dos tipos diferentes de sombras CSS. Incluso si ya has hecho esto antes, refresquemos tu memoria.
sombra de caja
Las sombras de cuadro o box-shadows son probablemente una de las sombras más populares en CSS. Las posibles implementaciones aquí varían mucho y los desarrolladores suelen utilizar sus propios enfoques y aplicaciones. La sintaxis de la sombra del cuadro en su conjunto es bastante compleja e implica 6 valores separados. Comenzaremos viendo los cinco ejemplos de implementación más comunes.
Como puede ver, la lista anterior es una lista de valores para el desplazamiento horizontal, el desplazamiento vertical, el radio de desenfoque, el nivel de dispersión de la sombra y el color. Los dos primeros valores (desplazamiento horizontal y vertical) son muy claros. Los valores positivos moverán la sombra hacia la derecha y hacia abajo, respectivamente, mientras que los valores negativos moverán la sombra hacia la izquierda y hacia arriba. Veamos un ejemplo de ambos significados:
Los dos últimos valores, que son responsables del radio de desenfoque y del radio de dispersión, son un poco más complicados. Probablemente te estés preguntando ¿cuál es la diferencia? Para responder a eso, veamos primero uno con el que probablemente ya esté familiarizado: el radio de desenfoque.
Como podéis ver, si no utilizamos el radio de desenfoque podremos hacer una sombra con bordes nítidos, pero un valor grande da bordes muy borrosos. Es simple, ¿no? Entonces, ¿qué pasa con el parámetro del radio de propagación? ¿Cuál es la diferencia aquí? Una imagen explicará la situación mejor que mil palabras:
Como puedes ver, el radio de extensión nos permite aumentar o disminuir el área de sombra sin afectar su nivel de desenfoque. Si considera este parámetro como el tamaño de la sombra, entonces no puede equivocarse.
Si no usa desenfoque y extensión, estos valores predeterminados permanecerán en 0. Si investiga un poco los ejemplos en línea, notará que la mayoría de los archivos de demostración no usan la opción de extensión. También tenga en cuenta que generalmente se agrega una versión de box-shadow con el prefijo –webkit para evitar problemas entre navegadores.
sombra de texto
Ahora que sabemos exactamente qué hace una sombra de cuadro y qué es, es hora de pasar a aprender la sintaxis de otro tipo de sombra CSS: sombra de texto. Afortunadamente, la sintaxis aquí es mucho más simple que con las sombras de cuadro.
Como puedes ver, la mayoría de los significados son iguales, por lo que si entiendes uno, entenderás el otro. Aunque lo interesante es que aquí no podrás cambiar el radio de la sombra. Sería genial si tuviéramos esta oportunidad, pero simplemente no está aquí.
Sombras de bloques incrustadas
Ahora hemos cubierto los conceptos básicos y comprende la sintaxis de las sombras CSS. Es hora de aprender a hacer sombras interiores e insertadas. Para convertir la sombra en una insertada, solo necesitamos agregar la palabra insertada.
Por eso comenzamos con una sintaxis simple. En general, el fragmento de código del cuadro de sombra puede resultar un poco confuso, pero una vez que lo domines, te parecerá sencillo.
Aquí, todos los valores funcionan básicamente de la misma manera, sólo la sombra se coloca dentro del bloque. En esta imagen podemos ver cuánto puede afectar el radio de propagación de una sombra al aspecto de la misma:
Observe que esta vez usamos un color RGBa en lugar de un valor HEX. Esto es excelente para las sombras, ya que el valor de opacidad hace que oscurecer o aclarar la sombra sea rápido y fácil.
Imágenes
Es bastante fácil aplicar box-shadow a un elemento div vacío, pero ¿qué pasa si quieres proyectar una sombra sobre una imagen? Suena simple, pero en realidad es bastante complicado. Miremos el código y veamos el resultado que producirá. Comencemos con una etiqueta img simple y antigua.
Ahora lo especificaremos en nuestro CSS y agregaremos box-shadow. Se podría pensar que algo como esto funcionaría:
imagen (
sombra de cuadro: inserción 0px 0px 10px rgba (0,0,0,0.5);
}
Desafortunadamente, esto nos llevará al siguiente resultado. ¡La imagen funcionará, pero la sombra será invisible!
Entonces, ¿cómo aplicamos una sombra interior a una imagen? Existen varios métodos de implementación y todos tienen sus ventajas y desventajas. Veamos los dos enfoques más populares.
La primera solución es envolver la imagen en un div que sea del mismo tamaño que la imagen y luego proyectar una sombra sobre ese div, aplicando también posicionamiento relativo e índice z a la imagen. Nuestro código se verá así:
div(
altura: 200 píxeles;
ancho: 400px;
}
img(
altura: 200 píxeles;
ancho: 400px;
posición: relativa;
índice z: -2;
}
Este enfoque funciona, pero requiere código adicional y bastante CSS adicional. Alternativamente, puedes usar una imagen HTML e insertar una imagen de fondo usando CSS. Con este enfoque, puede asegurarse de que la imagen no cubra la sombra y se coloque debajo de ella de forma predeterminada.
div(
altura: 200 píxeles;
ancho: 400px;
fondo: URL (http://lorempixum.com/400/200/transport/2);
sombra de cuadro: inserción 0px 0px 10px rgba (0,0,0,0.9);
}
Si combinamos estas técnicas con una propagación bastante fuerte, podemos lograr un viñeteado de imágenes bastante fuerte usando solo CSS.
Sombra de texto incrustado
Aunque la implementación de sombras de bloques integradas es compleja, son bastante sencillas de entender. Ingresa la palabra insertada y tu sombra se volverá interna. Es sencillo.
Desafortunadamente, las cosas son mucho más complicadas con las sombras de texto. El valor insertado es incompatible con la sombra de texto, por lo que nada funcionará aquí:
En cambio, necesitamos combinarlos un poco. La implementación es inusual, por lo que dividiremos el trabajo en dos etapas para comprender mejor lo que está sucediendo aquí. Primero, debemos ingresar el encabezado h1 y aplicar los siguientes estilos:
H1 (
color de fondo: #565656;
color: transparente;
}
Y ahora ya estamos en una situación extraña. Establecemos el color de fondo en oscuro, la sombra del texto en blanco y el color de relleno en transparente. Si esto te parece extraño, mira el resultado:
Esto no es en absoluto lo que necesitábamos. Lo interesante es que volvemos al principio. El ingrediente secreto que hace que todo funcione es el parámetro de clip de fondo establecido en texto.
H1 (
color de fondo: #565656;
color: transparente;
sombra de texto: 0px 2px 3px rgba (255,255,255,0.5);
-webkit-fondo-clip:texto;
-moz-fondo-clip: texto;
clip de fondo: texto;
}
Al configurar el parámetro background-clip en texto, podemos expresar efectivamente todo lo que sucede en el fondo (imágenes, gradaciones, colores, etc.) a lo largo del contorno del texto. Cuando hacemos esto usando el código que ya hemos creado, el resultado es el siguiente:
Como puede ver, obtuvimos un efecto bastante agradable. Los bordes borrosos se han recortado y ahora dan la apariencia de una sombra incrustada. Mientras tanto, la sombra del texto nos brinda la posibilidad de establecer el nivel de luminosidad del fondo y también crea un ligero efecto elevado en el exterior del texto. Si cambiamos el valor de la sombra de 0,5 a 0,3, el texto se volverá más oscuro.
Soporte del navegador
Si desea utilizar enfoques con diferentes parámetros extraños como background-clip, entonces necesita saber dónde funcionará y dónde no. Como siempre, cuando se trata de compatibilidad con navegadores, recurrimos a .
Según esta tabla, el parámetro background-clip funciona bastante bien en la mayoría de los navegadores. ¡Incluso IE9 lo admite! Es posible que tenga problemas con algunos navegadores obsoletos.
Conclusión
Ahora ya sabes lo que debes saber sobre las sombras insertadas en CSS. Esta es un área muy interesante para explorar. Es poco probable que todos los enfoques sean intuitivos y llevará algún tiempo dominarlos. Cuéntanos qué piensas sobre las soluciones propuestas y ¿cuál utilizas?
