La propiedad de filtro se utiliza para establecer el efecto visual de un elemento. Esta propiedad se usa principalmente en el contenido de la imagen para ajustar la representación de la imagen, el fondo, el borde, etc.
Sintaxis:
filter: none|blur()|brightness()|contrast()|drop-shadow()| grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()| url();
Nota: Se puede agregar más de un filtro al elemento HTML que está separado por un espacio.
Ejemplo: este ejemplo aplica dos funciones de filtro al elemento de imagen en una página web.
img {
filter: brightness(20%) blur(20px);
}
La propiedad de filtro acepta tanto el valor porcentual como el valor decimal.
Función de filtro:
- none: Es el valor por defecto y no aplica ningún efecto.
Ejemplo: este ejemplo describe la propiedad de filtro con el valor de filtro como ninguno.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: none;
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Producción:
bright() : Establece el brillo del elemento. Si el brillo es 0% entonces es completamente negro y si el brillo es 100% entonces es igual que el original. Los valores superiores al 100% dan como resultado elementos más brillantes.
Ejemplo: Este ejemplo describe la propiedad de filtro con el valor de filtro como brillo que tiene 100%.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: brightness(10%);
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Producción:
escala de grises() : Convierte los colores de los elementos en blanco y negro. El 0% en escala de grises indica el elemento original y el 100% indica el elemento completamente en escala de grises. No acepta los valores negativos.
Ejemplo: este ejemplo describe la propiedad de filtro con el valor de filtro en escala de grises.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: grayscale(70%);
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Producción:
sepia() : Convierte la imagen en una imagen sepia donde 0% representa la imagen original y 100% representa completamente sepia. No acepta los valores negativos.
Ejemplo: este ejemplo describe la propiedad de filtro con el valor de filtro como sepia.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: sepia(50);
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Producción:
contrast() : Ayuda a ajustar el contraste del elemento. El 0% de contraste indica el elemento negro completo y el 100% de contraste indica el elemento original.
Ejemplo: Este ejemplo describe la propiedad de filtro con el valor de filtro como contraste, para ajustar el nivel de contraste de la imagen.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: contrast(50);
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Producción:
saturate() : Se utiliza para establecer la saturación de los elementos. El 0 % de saturación indica que un elemento no está completamente saturado y el 100 % de saturación indica la imagen original. El resultado con un valor superior al 100% es el elemento sobresaturado.
Ejemplo: este ejemplo describe la propiedad de filtro con el valor de filtro como saturar para nivelar el nivel de saturación de la imagen.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: saturate(50);
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Producción:
blur() : Aplica el efecto de desenfoque al elemento. Si no se especifica el valor de desenfoque, se toma 0 como valor predeterminado.
Ejemplo: este ejemplo describe la propiedad de filtro con el valor de filtro como un desenfoque para generar el efecto de imagen borrosa.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: blur(5px);
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Producción:
opacity() : Establece el efecto de opacidad de la imagen. La opacidad del 0% indica que el elemento es completamente transparente y si la opacidad es del 100%, indica la imagen original. No acepta el valor negativo.
Ejemplo: este ejemplo describe la propiedad de filtro donde el valor del filtro se establece como opacidad con 0.5.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: opacity(0.5);
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Producción:
hue-rotate() : Aplica una rotación de tono a la imagen. El valor define el número de grados alrededor del círculo de color que se ajustarán las muestras de imagen. El valor predeterminado es 0 grados y representa la imagen original.
Ejemplo: Este ejemplo describe la propiedad de filtro donde la rotación de tono se establece en 45 grados.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: hue-rotate(45deg);
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Producción:
invert() : Invierte el elemento. El valor predeterminado es 0% y representa la imagen original. El 100% hace que la imagen esté completamente invertida. No acepta el valor negativo.
Ejemplo: Este ejemplo describe la propiedad de filtro con el valor de filtro como una inversión.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: invert(50);
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Producción:
drop-shadow() : Aplica un efecto de sombra paralela al elemento. Acepta h-shadow, v-shadow, blur, spread y color como valores. No solo se aplica a las imágenes, sino que también se puede aplicar a las formas, ya que puede tener la misma forma que la original. Los valores negativos para la sombra h y la sombra v desplazarán la sombra hacia la izquierda de la imagen.
Ejemplo: Este ejemplo describe la propiedad de filtro donde se aplica el efecto de sombra paralela al elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: drop-shadow(16px 18px 15px rgba(255, 0, 0, 0.5));
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Producción:
Ejemplo: aquí, la sombra paralela se aplica a la sombra horizontal de esa imagen.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div></div>
<style>
body {
background: #F2F2B6;
}
div {
width: 0;
position: relative;
margin: 85px 50px;
border-top: 130px solid #FF6D00;
border-bottom: 0px solid transparent;
border-left: 78px solid transparent;
border-right: 74px solid transparent;
filter: drop-shadow(19px 0 0 #FD4602);
}
</style>
</body>
</html>
Producción:
A partir de la salida, puede observar que podemos obtener la misma forma usando la sombra paralela y si aumenta el desplazamiento x, puede moverse hacia la derecha, si aplica el desplazamiento y, se mueve hacia la parte inferior. Del mismo modo, puede diseñar cualquier forma y si aplica la propiedad de sombra paralela, genera sombra a esa imagen.
initial : establece la propiedad de filtro en su valor predeterminado.
Ejemplo: Este ejemplo describe la propiedad de filtro con el valor de filtro como inicial.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: initial();
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad de filtro se enumeran a continuación:
- Google Chrome 53.0, 18.0 -webkit-
- Microsoft Edge 12.0
- Firefox 35.0
- Safari 9.1, 6.0 -webkit-
- Opera 40.0, 15.0 -webkit-
Publicación traducida automáticamente
Artículo escrito por shivangsharma15 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA