Existe un método muy simple para aplicar el efecto de escala de grises a una imagen. Usando la propiedad filter() , podemos aplicar un efecto de escala de grises a cualquier elemento HTML. Cuando aplicamos una sombra de cuadro de color a una imagen que tiene una propiedad de escala de grises, la sombra también se convierte en escala de grises. Por ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#logo {
width: 200px;
height: auto;
z-index: none;
filter: grayscale(100%);
border: 1px solid black;
box-shadow: 0px 0px 20px 10px green;
}
.center {
margin: 0 auto;
text-align: center;
justify-content: center;
}
</style>
</head>
<body class="center">
<br /><br /><br />
<div id="logo-shadow">
<img id="logo" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200618233603/gfg3.png" />
</div>
</body>
</html>
Producción:
Puedes observar que en el CSS, la sombra está definida para el color verde, pero aparece en escala de grises.
Esto se puede evitar envolviendo la imagen y aplicando propiedades de sombra a la división del envoltorio. Por ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#logo {
width: 200px;
height: auto;
z-index: none;
filter: grayscale(100%);
transition: filter 1s, border-radius 1s;
}
#logo-shadow {
display: inline-block;
border: 1px solid black;
box-shadow: 0px 0px 20px 10px green;
transition: border-radius 1s;
}
.center {
margin: 0 auto;
text-align: center;
justify-content: center;
}
</style>
</head>
<body class="center">
<br /><br /><br />
<div id="logo-shadow">
<img id="logo" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200618233603/gfg3.png" />
</div>
</body>
</html>
Salida: ahora, se puede observar que la sombra está coloreada, mientras que la imagen aún está en escala de grises.
Puede crear algunos efectos CSS más interesantes usando una combinación de estas tres propiedades (escala de grises(), sombra de cuadro, borde). Algunos ejemplos se muestran a continuación:
Ejemplo 1: puede transformar el botón n. ° 1 en el botón n. ° 2 al pasar el puntero del mouse, usando el código a continuación.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#logo {
width: 200px;
height: auto;
z-index: none;
filter: grayscale(100%);
transition: filter 1s, border-radius 1s;
}
#logo-shadow {
display: inline-block;
border: 1px solid black;
box-shadow: 0px 0px 20px 10px green;
transition: border-radius 1s;
}
#logo:hover {
border-radius: 50px;
filter: unset;
}
#logo-shadow:hover {
border-radius: 50px;
border: none;
}
.center {
margin: 0 auto;
text-align: center;
justify-content: center;
}
</style>
</head>
<body class="center">
<br /><br /><br />
<div id="logo-shadow">
<img id="logo" src="index.png" />
</div>
</body>
</html>
Producción:
Ejemplo 2: También puede transformar imágenes PNG en botones distinguidos usando estos efectos. Estos efectos se utilizan principalmente para crear una perspectiva 3D y una vista mínima.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GFG Article</title>
<style>
#logo2 {
display: inline-block;
height: auto;
z-index: none;
filter: drop-shadow(-2px -2px 5px #212121);
transition: filter 1s, box-shadow 1s, border-radius 1s;
}
#logo2:hover {
filter: unset;
border-radius: 30px;
box-shadow: 0px 0px 5px 2px green;
}
.center {
margin: 0 auto;
text-align: center;
justify-content: center;
}
</style>
</head>
<body class="center">
<br /><br />
<div>
<img id="logo2" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200721001503/geeksforgeeks-6.png" />
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por chitrankmishra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA