Arvutiteaduse instituut
  1. Esileht
  2. Noored Koodi
EN
Logi sisse
Tähelepanu! Tehnilise tõrke tõttu on hetkel kättesaadavad vaid 2020.a. ja hilisemad üles laetud failid ja kevadsemestri kursused. Rikke kõrvaldamisega tegeletakse.

Noored Koodi

Veebilehed

<< Kõik kursused

  • Kursusest
    • 0. Sissejuhatus veebimaailma

HTML

  • 1. Mis on HTML?
  • 2. Tekst ja viidad
  • 3. Loendid. Tabelid
  • 4. Pildid. Audio. Video

CSS

  • 5. Mis on CSS?
  • 6. Tabelid, loendid, piirid
  • 7. Pseudoelemendid ja positsioneerimine
  • 8. Kursorid, taustad, pildid

8.1 CSS-i kursorid 8.2 Taustad 8.3 Pildid Enesekontroll

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äärtusArvväärtusNäide ning kirjeldus
blurpikslid
filter: blur(5px);
muudab pildi uduseks; mida suurem väärtus seda udusem pilt
brightnessprotsentuaalne
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.
contrastprotsentuaalne
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.
grayscaleprotsentuaalne
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-rotatekraadid
filter: hue-rotate(90deg);
muudab pildi värvitooni
invertprotsentuaalne
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.
opacityprotsentuaalne
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
saturateprotsentuaalne
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
sepiaprotsentuaalne
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-shadowprotsentuaalne
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äärtusArvväärtusNä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
  • Arvutiteaduse instituut
  • Loodus- ja täppisteaduste valdkond
  • Tartu Ülikool
Tehniliste probleemide või küsimuste korral kirjuta:

Kursuse sisu ja korralduslike küsimustega pöörduge kursuse korraldajate poole.
Õppematerjalide varalised autoriõigused kuuluvad Tartu Ülikoolile. Õppematerjalide kasutamine on lubatud autoriõiguse seaduses ettenähtud teose vaba kasutamise eesmärkidel ja tingimustel. Õppematerjalide kasutamisel on kasutaja kohustatud viitama õppematerjalide autorile.
Õppematerjalide kasutamine muudel eesmärkidel on lubatud ainult Tartu Ülikooli eelneval kirjalikul nõusolekul.