Tecnología

Inicio

Cómo hacer una sombra paralela en HTML

December 23

Las sombras paralelas crean un efecto tridimensional que imita las sombras creadas por la luz enfocada directamente sobre un objeto. Puede añadir una sombra a cualquier elemento HTML, como una etiqueta div o una imagen, aunque sombras funcionan mejor en los elementos con un color de fondo. Utilizando la propiedad "caja-sombra" de las hojas de estilo en cascada (CSS), puede crear una regla de estilo para su página Web que especifica el desplazamiento, la falta de definición y el color de una sombra. Aplicar este efecto a un nombre de clase y agregar la clase a sus etiquetas HTML siempre que lo desee que aparezca la sombra paralela.

Instrucciones

1 Abra la página Web en el Bloc de notas o el editor de código de su elección y comprobar si hay un par de "<style>" etiquetas "entre los <head>" etiquetas en el código. Encontrará el código cerca de la parte superior del archivo. Agregue este código si no existen "<style>" etiquetas:

<Style type = "text / css">

</ Style>

2 Crear una regla de estilo que selecciona una clase y agregar la configuración de la propiedad "box-shadow". Dar el "box-shadow" izquierda y arriba valores de desplazamiento en primer lugar, empezando por la izquierda. Añadir a los valores de un tercer valor para el radio de desenfoque, que controla la cantidad de desenfoque utilizado para la sombra. El último valor es el color de la sombra:

.shadow {

box-shadow: 5px 5px 20px negro;

}

3 Reemplazar su hexadecimal o el color de valor de nombre en la propiedad "box-shadow" con un código de RGBA (Rojo, Verde, Azul y Alfa) para establecer un control sobre la transparencia de su sombra. Al escribir un código RGBA, le dan los valores de rojo, verde y azul del color de la sombra que desee, seguido por un valor de transparencia entre cero y uno:

.shadow {

box-shadow: 5px 5px 20px RGBA (0,0,0,0.5);

}

Obtener sus valores de color rojo, verde y azul de un editor de gráficos o un selector de color en línea. El código en el ejemplo anterior crea un desplazamiento de cinco píxeles de la parte izquierda y la parte superior con un radio de desenfoque de 20 píxeles y un color negro en el 50 por ciento de transparencia sombra.

4 Agregue el nombre de la clase a cualquier etiqueta HTML a la que desea agregar una gota de sombra:

<Div class = "sombra">

Contenido aquí ...

</ Div>

Utilice el nombre de la clase en tantas etiquetas como sea necesario.

Consejos y advertencias

  • Utilice la propiedad "text-shadow" en lugar de "box-shadow" para aplicar sombras al texto. La propiedad "text-shadow" toma los mismos valores que "box-shadow".
  • ~
  • El "radio de desenfoque" se refiere a la cantidad de desenfoque aplicado a la sombra de la gota. Se inicia en los bordes de la sombra y difumina hacia el exterior.
  • Algunos navegadores más antiguos, como las versiones de Internet Explorer 8 y menores, no son compatibles con sombras. Puede añadir soporte para las sombras en estos navegadores mediante la adición de una secuencia de comandos polyfill, como CSS3 PIE, al código de la página Web.