Cómo hacer una sombra paralela en HTML

Las sombras crean un efecto tridimensional que imita sombras creadas por la luz enfocada directamente sobre un objeto. Usted puede agregar una gota sombra a cualquier elemento HTML, como una etiqueta div o una imagen, aunque sombras funcionan mejor en los elementos con un color de fondo. Usando la propiedad "box-shadow" de hojas de estilo en cascada (CSS), puede crear una regla de estilo de la página Web que especifica el desplazamiento, 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 donde quieras del menú sombraaparezca.

 

SOMBRA

 

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 etiquetas "estilo" entre la "cabeza" etiquetas en el código. Usted encontrará este código en la parte superior del archivo. Agregue este código si no existen etiquetas "estilo":

 

Tipo style = "text / css"

 

/ Estilo

 

Crear una regla de estilo que seleccione una clase y ajustes para añadir la propiedad "box-shadow". Dar a los valores de "box-shadow" izquierdo y superior de desplazamiento primero, empezando por la izquierda. Añadir a los valores de un tercer valor para el radio de desenfoque, que controla la cantidad de desenfoque utilizados para la sombra. El último valor es el color de la sombra:

 

. Sombras {

 

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

 

}

 

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

 

. Sombras {

 

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

 

}

 

Consiga 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 del ejemplo anterior crea un desplazamiento en cinco píxeles desde la izquierda y la parte superior con un radio de desenfoque de 20 píxeles y un color negro a 50 por ciento la transparencia sombra.

 

Añadir el nombre de clase a cualquier etiqueta HTML al que desea agregar una sombra paralela:

 

div class = "sombra"

 

Contenido aquí ...

 

/ Div

 

Utilice el nombre de clase en todas las etiquetas que necesita.

 

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 como "box-shadow".

 

~

 

El "radio de desenfoque" se refiere a la cantidad de desenfoque aplicado a gota de sombra. Se inicia en los bordes y difumina la sombra hacia el exterior.

 

Algunos navegadores antiguos, como las versiones de Internet Explorer 8 y menores, no son compatibles con sombras. Usted puede añadir soporte para las sombras en estos navegadores añadiendo un guión polyfill, como CSS3 PIE, con el código de su página Web.