 | Peatüki sisukord | |
8.3 Pildid
Siin peatükis õpime, kuidas saab CSS-i abil modifitseerida erineval viisil pilte. Oletame, et teil on mingisugune pilt koduleheküljel, mida tahaksite muuta must-valgeks. Esimene mõte võiks olla see, et minna ja teha seda mingisuguses pildiredaktoris - kuid seda saab teha ka kergelt CSS-i koodi abil. Selleks kasutame parameetrit filter ning väärtusega grayscale, mis muudab pildi must-valgeks.
<!DOCTYPE html> <html> <head> <title>Must-valge pilt</title> <style>
img {filter: grayscale(100%);}
</style> </head> <body> <img src = "https://courses.cs.ut.ee/topic_wikis/nooredkoodi/uploads/Veebilehed/pilt20.jpg" alt="pilt"> </body> </html>
Järgmises tabelis on näha kõiki erinevaid väärtusi, mida filter parameeter saab kasutada.
| Väärtus | Arvväärtus | Näide ning kirjeldus |
| blur | pikslid | filter: blur(5px);muudab pildi uduseks; mida suurem väärtus seda udusem pilt |
| brightness | protsentuaalne kümnendmurd | filter: brightness(200%);reguleerib pildi heledust; 0% teeb pildi täiesti mustaks; 100% on pildi tavaolek;väärtused suuremad kui 100% teevad pildi heledamaks. |
| contrast | protsentuaalne kümnendmurd | filter: contrast(200%);reguleerib pildi kontrastsust; 0% teeb pildi täiesti mustaks; 100% on pildi tavaolek;väärtused suuremad kui 100% teevad pildi vähem kontrastsemaks. |
| grayscale | protsentuaalne kümnendmurd | filter: grayscale(50%);muudab pildi värvituks; 0% on pildi tavaolek; 100% teeb pildi täiesti must-valgeks;negatiivseid väärtused pole lubatud. |
| hue-rotate | kraadid | filter: hue-rotate(90deg);muudab pildi värvitooni |
| invert | protsentuaalne kümnendmurd | filter: invert(100%);inverteerib pildi värvid; 0% on pildi tavaolek; 100% korral pildi värvid on täiesti inverteeritud;negatiivsed väärtused pole lubatud. |
| opacity | protsentuaalne kümnendmurd | filter: opacity(30%);määrab pildi läbipaistvuse taseme; 0% on täiesti läbipaistev; 100% on pildi tavaolek;negatiivsed väärtused pole lubatud |
| saturate | protsentuaalne kümnendmurd | filter: saturate(800%);kohandab pildi värvierksust(küllastust); 0% korral on pilt täiesti küllastumata; 100% on pildi tavaolek;väärtused suuremad kui 100% küllastavad pilti aina rohkem; negatiivsed väärtused pole lubatud |
| sepia | protsentuaalne kümnendmurd | filter: sepia(100%);annab pildile sepia värvitooni; 0% korral on pilt oma tavaolekus; 100% korral on pildi värvus täielikult konverteeritud sepia värvitooniks;negatiivsed väärtused pole lubatud |
| drop-shadow | protsentuaalne kümnendmurd | filter: drop-shadow(8px 8px 10px red);rakendab pildi peal varju efekti. esimene(kohustuslik) arvväärtus täpsustab horisontaalse varju väärtuse; teine(kohustuslik) arvväärtus täpsustab vertikaalse varju väärtuse; kolmas(mittekohustuslik) väärtus on blur arvväärtus(pikslites), mis muudab varju udusemaks; väärtuse puudumisel - vaikimisi 0px;neljas(mittekohustuslik) arvväärtus(pikslites) määrab varju laiali levimist; positiivsed väärtused panevad varju rohkem laiali levima, negatiivsed väärtused teevad varju väiksemaks; vaikimisi väärtus 0px;viies(mittekohustuslik) arvväärtus on varju värv; kui värv pole määratud, siis tavaliselt on see vaikimisi must (oleneb veebilehitsejast) |
Tasub mainida, et sama pildi peal saab kasutada korraga ka mitu erinevat filtrit. Näiteks niimodi:
img {filter: sepia(60%) brightness(90%);}
CSS-is on olemas ka parameetreid, mis lubavad muuta piltide positsiooni. Üheks selliseks parameetriks on transform. Sarnaselt eelmisele filter parameetrile, on transform parameetril ka omajagu erinevaid väärtusi, mille abil saab modifitseerida pilte. Kasulikumad väärtused on näidatud siin:
| Väärtus | Arvväärtus | Näide ning kirjeldus |
| translate(x,y) | pikslid | transform:translate(20px,10px);muudab pildi asukohta vastavalt x ja y väärtustele |
| scale(x,y) | kümnendmurrud | transform:scale(2,2);muudab pildi suurust vastavalt x ja y väärtustele |
| rotate(kraadid) | kraadid | transform:rotate(90deg);pöörab pildi vastavalt määratud kraadidele |
Iseseisev ülesanne:
Kasutage õpitud teadmisi mõlemas alapeatükist ning muutke näitekoodis (selle lehe alguses) etteantud pilti oma veebileheküljel. Kasutage vähemalt kolme erinevat filter parameetrit. Lisaks sellele kasutage vähemalt ühte transform parameetrit.
| Peatüki sisukord | |