Skip to content

Commit 8496673

Browse files
teoli2003teoli2003
authored
Merge pull request mdn#114 from estelle/filterfunc
CSS filter-functions data type
2 parents 5104ae4 + d2711cb commit 8496673

File tree

1 file changed

+153
-0
lines changed

1 file changed

+153
-0
lines changed

‎types/filterfunctions.html‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
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+
switch(filter) {
78+
case "blur":
79+
slider.value = 0;
80+
slider.min = 0;
81+
slider.max = 30;
82+
slider.step = 1;
83+
slider.setAttribute("data-unit", "px");
84+
break;
85+
case "brightness":
86+
case "contrast":
87+
case "saturate":
88+
slider.value = 1;
89+
slider.min = 0;
90+
slider.max = 4;
91+
slider.step = 0.05;
92+
slider.setAttribute("data-unit", "");
93+
break;
94+
case "drop-shadow":
95+
slider.value = 0;
96+
slider.min = -20;
97+
slider.max = 40;
98+
slider.step = 1;
99+
slider.setAttribute("data-unit", "px");
100+
break;
101+
case "opacity":
102+
slider.value = 1;
103+
slider.min = 0;
104+
slider.max = 1;
105+
slider.step = 0.01;
106+
slider.setAttribute("data-unit", "");
107+
break;
108+
case "grayscale":
109+
case "invert":
110+
case "sepia":
111+
slider.value = 0;
112+
slider.min = 0;
113+
slider.max = 1;
114+
slider.step = 0.01;
115+
slider.setAttribute("data-unit", "");
116+
break;
117+
case "hue-rotate":
118+
slider.value = 0;
119+
slider.min = 0;
120+
slider.max = 360;
121+
slider.step = 1;
122+
slider.setAttribute("data-unit", "deg");
123+
break;
124+
default:
125+
console.error("Unknown filter set");
126+
}
127+
128+
function setDiv(filter) {
129+
const unit = slider.getAttribute("data-unit");
130+
const offset = `${Math.round(slider.value)}${unit}`;
131+
const radius = `${Math.round(Math.abs(slider.value / 2))}${unit}`;
132+
divElem.style.filter =
133+
filter === "drop-shadow"
134+
? `${selectElem.value}(${offset} ${offset} ${radius})`
135+
: `${selectElem.value}(${slider.value}${unit})`;
136+
137+
updateOutput();
138+
updateCurValue();
139+
}
140+
141+
function updateOutput() {
142+
output.textContent = slider.value;
143+
}
144+
145+
function updateCurValue() {
146+
curValue.textContent = `filter: ${divElem.style.filter}`;
147+
}
148+
149+
setSlider(selectElem.value);
150+
setDiv(selectElem.value);
151+
</script>
152+
</body>
153+
</html>

0 commit comments

Comments
 (0)