Filtre CSS
Efectele vizuale precum estomparea și saturația ajung la elemente prin proprietatea CSS filter.
Aceasta acceptă următoarele funcții de filtru:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()
Funcția CSS blur()
Elementele sunt estompate de funcția de filtru blur(), iar estomparea crește odată cu valoarea.
Fără o valoare, se folosește 0, care nu are niciun efect.
Exemplu
Două intensități diferite de estompare pe elemente <img>:
Prompt
Creați o pagină HTML care aplică diferite efecte de filtru blur CSS pentru două imagini. Prima imagine ar trebui să aibă o estompare de 2px, iar a doua de 6px, folosind proprietatea CSS filter.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Blur Filter</title>
<style>
#img1 {
filter: blur(2px);
}
#img2 {
filter: blur(6px);
}
</style>
</head>
<body>
<h2>CSS blur() Filter</h2>
<p>Original image:</p>
<img src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>blur(2px):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>blur(6px):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>
Funcția CSS brightness()
Cât de luminos arată un element este controlat de funcția de filtru brightness().
- 0% face imaginea complet neagră
- Orice valoare sub 100% întunecă imaginea
- 100% este valoarea implicită și păstrează luminozitatea originală
- Orice valoare peste 100% face imaginea mai luminoasă
Exemplu
O imagine afișată atât mai luminoasă, cât și mai întunecată decât originalul:
Prompt
Creați o pagină HTML care ajustează luminozitatea a două imagini folosind proprietatea CSS filter. Prima imagine ar trebui să fie mai luminoasă, la 150%, iar a doua mai întunecată, la 50%.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Brightness Filter</title>
<style>
#img1 {
filter: brightness(150%);
}
#img2 {
filter: brightness(50%);
}
</style>
</head>
<body>
<h2>CSS brightness() Filter</h2>
<p>Original image:</p>
<img src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>brightness(150%):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>brightness(50%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>
Funcția CSS contrast()
Creșterea sau scăderea contrastului unui element este rolul funcției de filtru contrast().
- 0% lasă imaginea complet gri
- Sub 100%, contrastul scade
- 100% este valoarea implicită și păstrează contrastul original
- Peste 100%, contrastul crește
Exemplu
O imagine cu contrastul mărit și apoi cu contrastul scăzut:
Prompt
Creați o pagină HTML care ajustează contrastul a două imagini folosind proprietatea CSS filter. Prima imagine ar trebui să aibă contrast mărit, la 150%, iar a doua contrast scăzut, la 50%.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Contrast Filter</title>
<style>
#img1 {
filter: contrast(150%);
}
#img2 {
filter: contrast(50%);
}
</style>
</head>
<body>
<h2>CSS contrast() Filter</h2>
<p>Original image:</p>
<img src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>contrast(150%):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>contrast(50%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>
Funcția CSS drop-shadow()
Ca să dai unei imagini un efect de umbră, folosește funcția de filtru drop-shadow().
Exemplu
Două efecte drop-shadow diferite pe aceeași imagine:
Prompt
Creați o pagină HTML care aplică diferite efecte de filtru drop-shadow CSS pentru două imagini. Prima ar trebui să aibă o umbră gri (8px 8px 10px), iar a doua o umbră albastru-deschis (10px 10px 7px).
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Drop Shadow Filter</title>
<style>
#img1 {
filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
filter: drop-shadow(10px 10px 7px lightblue);
}
</style>
</head>
<body>
<h2>CSS drop-shadow() Filter</h2>
<p>drop-shadow(8px 8px 10px gray):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>drop-shadow(10px 10px 7px lightblue):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>
Funcția CSS grayscale()
Transformarea unei imagini în tonuri de gri este rolul funcției de filtru grayscale().
- 0% (sau 0) lasă imaginea neschimbată
- 100% (sau 1) face imaginea complet în tonuri de gri
Exemplu
Aceeași imagine la mai multe niveluri de tonuri de gri:
Prompt
Creați o pagină HTML care aplică diferite efecte de filtru grayscale pentru trei imagini folosind proprietatea CSS filter. Folosiți valorile 1, 60% și, respectiv, 0.4.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grayscale Filter</title>
<style>
#img1 {
filter: grayscale(1);
}
#img2 {
filter: grayscale(60%);
}
#img3 {
filter: grayscale(0.4);
}
</style>
</head>
<body>
<h2>CSS grayscale() Filter</h2>
<p>grayscale(1):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>grayscale(60%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>grayscale(0.4):</p>
<img id="img3" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>
Funcția CSS hue-rotate()
Cu funcția de filtru hue-rotate(), culorile unui element se rotesc în jurul cercului cromatic.
Valoarea ei este numărul de grade cu care este ajustată imaginea. La 0deg vezi imaginea originală, valorile pozitive cresc nuanța, iar cele negative o scad.
Exemplu
Aceeași imagine la mai multe rotiri de culoare:
Prompt
Creați o pagină HTML care aplică diferite efecte de filtru hue-rotate pentru trei imagini folosind proprietatea CSS filter. Folosiți valorile 200deg, 90deg și, respectiv, -90deg.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Hue Rotate Filter</title>
<style>
#img1 {
filter: hue-rotate(200deg);
}
#img2 {
filter: hue-rotate(90deg);
}
#img3 {
filter: hue-rotate(-90deg);
}
</style>
</head>
<body>
<h2>CSS hue-rotate() Filter</h2>
<p>hue-rotate(200deg):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>hue-rotate(90deg):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>hue-rotate(-90deg):</p>
<img id="img3" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>
Funcția CSS invert()
Folosește funcția de filtru invert() ca să inversezi culorile unei imagini.
- 0% (sau 0) lasă imaginea neschimbată
- 100% (sau 1) inversează complet culorile
Exemplu
Trei niveluri de inversare a culorilor pe o singură imagine:
Prompt
Creați o pagină HTML care aplică diferite efecte de filtru invert pentru trei imagini folosind proprietatea CSS filter. Folosiți valorile 0.3, 70% și, respectiv, 100%.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Invert Filter</title>
<style>
#img1 {
filter: invert(0.3);
}
#img2 {
filter: invert(70%);
}
#img3 {
filter: invert(100%);
}
</style>
</head>
<body>
<h2>CSS invert() Filter</h2>
<p>invert(0.3):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>invert(70%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>invert(100%):</p>
<img id="img3" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>
Funcția CSS opacity()
Funcția de filtru opacity() face un element parțial sau complet transparent.
- 0% (sau 0) lasă elementul complet transparent
- 50% (sau 0.5) lasă elementul 50% transparent
- 100% (sau 1) lasă elementul neschimbat
Exemplu
Aceeași imagine la mai multe niveluri de opacitate:
Prompt
Creați o pagină HTML care aplică diferite efecte de filtru opacity pentru trei imagini folosind proprietatea CSS filter. Folosiți valorile 80%, 50% și, respectiv, 0.2.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Opacity Filter</title>
<style>
#img1 {
filter: opacity(80%);
}
#img2 {
filter: opacity(50%);
}
#img3 {
filter: opacity(0.2);
}
</style>
</head>
<body>
<h2>CSS opacity() Filter</h2>
<p>opacity(80%):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>opacity(50%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>opacity(0.2):</p>
<img id="img3" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>
Funcția CSS saturate()
Intensitatea culorii, sau saturația, este ceea ce ajustează funcția de filtru saturate() la un element.
- 0% (sau 0) elimină complet saturația
- 100% (sau 1) lasă elementul neschimbat
- 200% (sau 2) produce un element super saturat
Exemplu
Aceeași imagine la mai multe niveluri de saturație:
Prompt
Creați o pagină HTML care aplică diferite efecte de filtru saturate pentru trei imagini folosind proprietatea CSS filter. Folosiți valorile 0, 100% și, respectiv, 200%.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Saturate Filter</title>
<style>
#img1 {
filter: saturate(0);
}
#img2 {
filter: saturate(100%);
}
#img3 {
filter: saturate(200%);
}
</style>
</head>
<body>
<h2>CSS saturate() Filter</h2>
<p>saturate(0):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>saturate(100%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>saturate(200%):</p>
<img id="img3" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>
Funcția CSS sepia()
O tonalitate sepia este o culoare mai caldă, mai brun-gălbuie, iar funcția de filtru sepia() o aplică unei imagini.
- 0% (sau 0) lasă imaginea neschimbată
- 100% (sau 1) aplică efectul sepia complet
Exemplu
Aceeași imagine la mai multe niveluri de sepia:
Prompt
Creați o pagină HTML care aplică diferite efecte de filtru sepia pentru trei imagini folosind proprietatea CSS filter. Folosiți valorile 1, 60% și, respectiv, 0.4.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Sepia Filter</title>
<style>
#img1 {
filter: sepia(1);
}
#img2 {
filter: sepia(60%);
}
#img3 {
filter: sepia(0.4);
}
</style>
</head>
<body>
<h2>CSS sepia() Filter</h2>
<p>sepia(1):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>sepia(60%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>sepia(0.4):</p>
<img id="img3" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>