La propiedad de filtro CSS se utiliza para editar imágenes o efectos visuales sin necesidad de ningún software especializado. Los filtros CSS funcionan con un valor predeterminado, por lo que no ofrecen a los usuarios ningún control para cambiar su intensidad. jQuery cambia el valor de la intensidad en los filtros CSS de forma dinámica y, por lo tanto, le da al usuario un control total sobre la imagen.
Sintaxis:
.demo {
filter: <filter-function> [<filter-intensity>];
}
Ejemplo: así es como aplicaría un filtro de desenfoque del 50 % a un elemento.
.demo {
filter: blur(50%);
}
Filtro de imagen: para crear un filtro de imagen, tenemos controles deslizantes para variables de entrada que pasan el valor de intensidad de cada filtro a través de jQuery y ese filtro se aplicará a través de CSS.
Estructura del proyecto:
Estructura de archivos
Ejemplo: En este ejemplo, diseñaremos la estructura usando el HTML en el archivo demo.html. Después de eso, usaremos el filtro usando CSS en el archivo demo.css y luego proporcionaremos el control de esos filtros usando JavaScript en el archivo demo.js.
demo.html
<!DOCTYPE html>
<html>
<head>
<!-- Add CSS file -->
<link rel="stylesheet" href="demo.css" />
<!-- Add JQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<!-- Add JavaScript file -->
<script>
$(document).ready(function () {
$(".fit-val").change(main);
});
</script>
<script src="demo.js"></script>
</head>
<body>
<div id="main">
<!-- Add Slider Controls -->
<div class="range_panel">
<span>
<label>GrayScale</label>
<br />
<input id="id1" class="fit-val"
type="range" min="0" max="100"
value="0" />
</span>
<span>
<label>Blur</label>
<br />
<input id="id2" class="fit-val"
type="range" min="0" max="10"
value="0" />
</span>
<span>
<label>Exposure</label>
<br />
<input id="id3" class="fit-val"
type="range" min="0" max="200"
value="100" />
</span>
<span>
<label>Sepia</label>
<br />
<input id="id4" class="fit-val"
type="range" min="0" max="100"
value="0" />
</span>
<span>
<label>Opacity</label>
<br />
<input id="id5" class="fit-val"
type="range" min="0" max="100"
value="100" />
</span>
<span>
<label>Contrast</label>
<br />
<input id="id6" class="fit-val"
type="range" min="0" max="100"
value="100" />
</span>
<span>
<label>Invert</label>
<br />
<input id="id7" class="fit-val"
type="range" min="0" max="100"
value="0" />
</span>
<span>
<label>Saturate</label>
<br />
<input id="id8" class="fit-val"
type="range" min="0" max="100"
value="100" />
</span>
</div>
<div class="image">
<img src="demo.png" />
<img src="demo.png" class="image_main" />
</div>
</div>
</body>
</html>
demo.css
/** @format */
body {
text-align: center;
color: white;
}
.main {
width: 100vw;
display: flex;
}
.range_panel {
background-color: rgb(39, 39, 39);
width: 300px;
height: 100vh;
padding: 30px;
padding-top: 100px;
}
span {
display: block;
margin: 10px;
}
.image {
padding: 100px;
}
.image img {
width: 30vw;
}
demo.js
function main() {
$(".image_main").css(
"-webkit-filter",
"grayscale(" +
$("#id1").val() +
"%) blur(" +
$("#id2").val() +
"px) brightness(" +
$("#id3").val() +
"%) sepia(" +
$("#id4").val() +
"%) opacity(" +
$("#id5").val() +
"%) contrast(" +
$("#id6").val() +
"%) saturate(" +
$("#id7").val() +
"%) invert(" +
$("#id8").val() +
"%)"
);
}
Producción:
producción
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA