Mnogi ljudi koriste CSS za prilagodbu teksta, promjenu fonta, boje, veličine i još mnogo toga. Ali jedna stvar koju mnogi ljudi često zaborave jest da CSS možete koristiti i sa slikama.
Promjena same slike
CSS vam omogućuje podešavanje prikaza slike na stranici. Ovo može biti vrlo korisno za održavanje dosljednosti stranica. Postavljanjem stilova na svim slikama stvarate standardni izgled slika. Neke stvari koje možete učiniti:
- Dodajte obrub ili obris oko slika
- Uklonite obrub u boji oko povezanih slika
- Podešavanje širine i / ili visine slika
- Dodajte kapljicu sjene
- Zakrenite sliku
- Promijenite stilove kad se slika zadrži iznad
Davanje obruba vašoj slici izvrsno je mjesto za početak. Ali trebali biste uzeti u obzir ne samo obrube - razmislite o cijelom rubu slike i prilagodite margine i podmetanje također. Slika s tankim crnim obrubom izgleda lijepo, ali dodavanje popunjavanja između obruba i slike može izgledati još bolje.
Dobra je ideja uvijek povezuj nedekorativne slike, kad je to moguće. Ali kad to učinite, imajte na umu da većina preglednika dodaje obrub u boji oko slike. Čak i ako koristite gornji kôd za promjenu obruba, veza će to poništiti ukoliko ne uklonite ili promijenite i obrub na vezi. Da biste to učinili, trebali biste koristiti CSS podređeno pravilo za uklanjanje ili promjenu obruba oko povezanih slika:
CSS možete koristiti i za promjenu ili postavljanje visine i širine slika. Iako nije dobra ideja koristiti preglednik za podešavanje veličina slika zbog brzina preuzimanja, oni postaju puno bolji u promjeni veličine slika tako da i dalje izgledaju dobro. A s CSS-om možete postaviti da sve vaše slike imaju standardnu širinu ili visinu ili čak postaviti dimenzije u odnosu na spremnik.
Zapamtite, kada mijenjate veličinu slika, za najbolje rezultate trebali biste promijeniti veličinu samo jedne dimenzije - visine ili širine. To će osigurati da slika zadrži omjer slike i tako ne izgleda čudno. Postavite drugu vrijednost na auto ili izostavite da kažete pregledniku da zadrži omjer slike ujednačen.
CSS3 nudi rješenje ovog problema s novim svojstvima objekt-fit i objekt-položaj. Pomoću ovih svojstava moći ćete definirati točnu visinu i širinu slike i način na koji treba postupati s omjerom slike. To može stvoriti efekte poštanskog sandučića oko vaših slika ili obrezivanja kako bi se slika prilagodila potrebnoj veličini.
Postoje i druga svojstva CSS3 koja su dobro podržana u većini preglednika i koja možete koristiti i za izmjenu slika. Stvari kao što su sjene, zaobljeni kutovi i transformacije za rotiranje, iskrivljavanje ili pomicanje slika, sve trenutno rade u većini modernih preglednika. Tada možete koristiti CSS prijelaze kako biste promijenili slike kad zadržite pokazivač miša ili kliknete ili neposredno nakon određenog vremenskog razdoblja.
Korištenje slika kao pozadine
CSS olakšava stvaranje fantastičnih pozadina sa vašim slikama. Možeš dodajte pozadine na cijelu stranicu ili na samo određeni element. Lako je stvoriti pozadinsku sliku na stranici pomoću pozadinska slika svojstvo:
Promijeni tijelo selektora na određeni element na stranici da biste postavili pozadinu na samo jedan element.
Još jedna zabavna stvar koju možete učiniti sa slikama je stvaranje pozadinske slike koja se ne pomiče s ostatkom stranice - poput vodenog žiga. Vi samo koristite stil pozadina-privitak: fiksno; zajedno s vašom pozadinskom slikom. Ostale mogućnosti za vaše pozadine uključuju izradu pločica vodoravno ili okomito pomoću pozadina-ponavljanje imovine. Pisati pozadina-ponavljanje: repeat-x; za postavljanje slike vodoravno i pozadina-ponavljanje: ponavljanje-y; vertikalno popločati. A pozadinsku sliku možete postaviti pomoću pozadinski položaj imovine.
A CSS3 dodaje više stilova i za vaše pozadine. Svoje slike možete razvući tako da odgovaraju pozadini bilo koje veličine ili postaviti pozadinu da se prilagođava veličini prozora. Možete promijeniti položaj, a zatim isjeći pozadinsku sliku. Ali jedna od najboljih stvari o CSS3 je ta što sada možete slojiti više pozadinskih slika kako biste stvorili još zamršenije efekte.
HTML5 pomaže u stilskim slikama
The LIK element u HTML5 treba postaviti oko svih slika koje mogu samostalno stajati unutar dokumenta. Jedan od načina razmišljanja je ako bi se slika mogla pojaviti u dodatku, tada bi trebala biti unutar LIK element. Tada možete koristiti taj element i FIGCAPCIJA element za dodavanje stilova vašim slikama.