La función drop-shadow() es una función incorporada que se usa para aplicar un filtro a la imagen para establecer la sombra de la imagen. La función drop-shadow() crea una sombra borrosa en un desplazamiento y color determinados.
Sintaxis:
drop-shadow( offset-x offset-y blur-radius spread-radius color )
Parámetros: esta función acepta cinco parámetros, como se mencionó anteriormente y se describe a continuación:
- offset-x: este parámetro establece el desplazamiento horizontal de una imagen. El valor positivo crea el desplazamiento hacia el lado derecho y el valor negativo crea el desplazamiento hacia el lado izquierdo.
- offset-y: este parámetro establece el desplazamiento vertical de una imagen. El valor positivo crea el desplazamiento hacia el lado inferior y el valor negativo crea el desplazamiento hacia el lado superior.
- blur-radius: Establece el valor del radio de desenfoque. Es un parámetro opcional.
- spread-radius: Establece el valor del radio de propagación. Es un parámetro opcional.
- color: Establece el color de la sombra paralela. Su parámetro opcional.
Los siguientes ejemplos ilustran la función drop-shadow() en CSS:
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>CSS drop-shadow() Function</title>
<style>
h1 {
color:green;
}
body {
text-align:center;
}
.drop_shadow_effect {
filter: drop-shadow(10px 10px 10px yellow)
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS drop-shadow() function</h2>
<img class="drop_shadow_effect" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo">
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>CSS drop-shadow() Function</title>
<style>
h1 {
color:green;
}
body {
text-align:center;
}
.drop_shadow_effect {
filter: drop-shadow(-10px -10px 20px yellow)
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS drop-shadow() function</h2>
<img class="drop_shadow_effect" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo">
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la función drop-shadow() se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Safari
- Ópera