Skip to content

Commit 7571f51

Browse files
estelleestelle
committed
example for filter-functions
1 parent bd1e395 commit 7571f51

File tree

1 file changed

+149
-0
lines changed

1 file changed

+149
-0
lines changed

‎types/filterfunctions.html‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<title>CSS filter functions</title>
7+
<style>
8+
div {
9+
width: 300px;
10+
height: 300px;
11+
background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png)
12+
no-repeat center;
13+
}
14+
15+
li {
16+
display: flex;
17+
align-items: center;
18+
justify-content: center;
19+
margin-bottom: 20px;
20+
}
21+
22+
input {
23+
width: 60%;
24+
}
25+
26+
output {
27+
width: 5%;
28+
text-align: center;
29+
}
30+
31+
select {
32+
width: 40%;
33+
margin-left: 2px;
34+
}
35+
</style>
36+
</head>
37+
<body>
38+
<div></div>
39+
<ul>
40+
<li>
41+
<label for="filter-select">Choose a filter function:</label>
42+
<select id="filter-select">
43+
<option selected>blur</option>
44+
<option>brightness</option>
45+
<option>contrast</option>
46+
<option>drop-shadow</option>
47+
<option>grayscale</option>
48+
<option>hue-rotate</option>
49+
<option>invert</option>
50+
<option>opacity</option>
51+
<option>saturate</option>
52+
<option>sepia</option>
53+
</select>
54+
</li>
55+
<li><input type="range" /><output></output></li>
56+
<li>
57+
<p>Current value: <code></code></p>
58+
</li>
59+
</ul>
60+
<script>
61+
const selectElem = document.querySelector("select");
62+
const divElem = document.querySelector("div");
63+
const slider = document.querySelector("input");
64+
const output = document.querySelector("output");
65+
const curValue = document.querySelector("p code");
66+
67+
selectElem.addEventListener("change", () => {
68+
setSlider(selectElem.value);
69+
setDiv(selectElem.value);
70+
});
71+
72+
slider.addEventListener("input", () => {
73+
setDiv(selectElem.value);
74+
});
75+
76+
function setSlider(filter) {
77+
if (filter === "blur") {
78+
slider.value = 0;
79+
slider.min = 0;
80+
slider.max = 30;
81+
slider.step = 1;
82+
slider.setAttribute("data-unit", "px");
83+
} else if (
84+
filter === "brightness" ||
85+
filter === "contrast" ||
86+
filter === "saturate"
87+
) {
88+
slider.value = 1;
89+
slider.min = 0;
90+
slider.max = 4;
91+
slider.step = 0.05;
92+
slider.setAttribute("data-unit", "");
93+
} else if (filter === "drop-shadow") {
94+
slider.value = 0;
95+
slider.min = -20;
96+
slider.max = 40;
97+
slider.step = 1;
98+
slider.setAttribute("data-unit", "px");
99+
} else if (filter === "opacity") {
100+
slider.value = 1;
101+
slider.min = 0;
102+
slider.max = 1;
103+
slider.step = 0.01;
104+
slider.setAttribute("data-unit", "");
105+
} else if (
106+
filter === "grayscale" ||
107+
filter === "invert" ||
108+
filter === "sepia"
109+
) {
110+
slider.value = 0;
111+
slider.min = 0;
112+
slider.max = 1;
113+
slider.step = 0.01;
114+
slider.setAttribute("data-unit", "");
115+
} else if (filter === "hue-rotate") {
116+
slider.value = 0;
117+
slider.min = 0;
118+
slider.max = 360;
119+
slider.step = 1;
120+
slider.setAttribute("data-unit", "deg");
121+
}
122+
}
123+
124+
function setDiv(filter) {
125+
const unit = slider.getAttribute("data-unit");
126+
const offset = `${Math.round(slider.value)}${unit}`;
127+
const radius = `${Math.round(Math.abs(slider.value / 2))}${unit}`;
128+
divElem.style.filter =
129+
filter === "drop-shadow"
130+
? `${selectElem.value}(${offset} ${offset} ${radius})`
131+
: `${selectElem.value}(${slider.value}${unit})`;
132+
133+
updateOutput();
134+
updateCurValue();
135+
}
136+
137+
function updateOutput() {
138+
output.textContent = slider.value;
139+
}
140+
141+
function updateCurValue() {
142+
curValue.textContent = `filter: ${divElem.style.filter}`;
143+
}
144+
145+
setSlider(selectElem.value);
146+
setDiv(selectElem.value);
147+
</script>
148+
</body>
149+
</html>

0 commit comments

Comments
 (0)