Stil svoje slike i korištenje slika u stilovima
Mnogi ljudi upotrebljavaju CSS za prilagodbu teksta, mijenjanje fontova, boje, veličine i još mnogo toga. Ali jedna stvar koju mnogi često zaboravlja jest da možete koristiti CSS i slike.
Promjena same slike
CSS vam omogućuje podešavanje prikaza slike na stranici. To može biti korisno za održavanje dosljednih stranica. Postavljanjem stilova na svim slikama izrađujete standardni izgled vaših slika. Neke od stvari koje možete učiniti:
- Dodajte obrub ili obris oko slika
- Uklonite obojeni okvir oko povezanih slika
- Podešavanje širine i / ili visine slika
- Dodajte kapljicu
- Zakrenite sliku
- Promijenite stilove tijekom prebacivanja slike
Davanje vaše slike granicu je odlično mjesto za početak. No, trebali biste razmotriti više od granice - razmislite o cijelom rubu slike i podesite margine i padding . Slika s tankom crnom granicom izgleda lijepo, ali dodavanje nekih padding između granice i slike može izgledati još bolje.
img {
granica: 1px kruto crno;
padding: 5px;
}
Dobro je uvijek povezati ne-dekorativne slike , kada je to moguće. No, kada to učinite, zapamtite da većina preglednika dodaju obojenu rubu oko slike. Čak i ako koristite gornji kôd za promjenu granice, veza će poništiti to ako osim toga ne uklonite ili promijenite granicu na vezi. Da biste to učinili, trebali biste upotrijebiti pravilo djeteta CSS za uklanjanje ili promjenu obruba oko povezanih slika:
img> a {
granica: none;
}
Također možete koristiti CSS za promjenu ili postavljanje visine i širine vaših slika. Iako nije sjajna ideja da koristite preglednik za prilagodbu veličine slika zbog brzina preuzimanja, dobivaju puno bolje promjenu veličine slike tako da i dalje izgledaju dobro. S CSS-om možete postaviti slike na sve standardne širine ili visine ili čak postaviti dimenzije u odnosu na spremnik.
Ne zaboravite, kada promijenite veličinu slika, za najbolje rezultate, trebali biste samo promijeniti veličinu jedne dimenzije - visinu ili širinu. To će značiti da slika zadržava omjer slike i tako ne izgleda čudno. Postavite drugu vrijednost na automatsko ili ga ostavite da biste pregledniku rekli da omjer slike ostaje dosljedan.
img {
širina: 50%;
visina: auto;
}
CSS3 nudi rješenje ovog problema s novim svojstvima objekta-fit i objekt-položaj. S ovim svojstvima moći ćete odrediti točnu visinu i širinu slike i način na koji treba proći omjer slike. To bi moglo stvoriti efekte širine okvira oko vaših slika ili izrezivanje kako bi slika odgovarala potrebnoj veličini.
Iako svojstva objekta CSS3 i prikaza objekta nisu široko podržana, postoje i drugi CSS3 svojstva koja su dobro podržana u većini modernih preglednika koje možete koristiti za izmjenu vaših slika. Stvari kao što su kap sjene, zaobljeni uglovi i preobrazbe za okretanje, skretanje ili pomicanje vaših slika sve radi upravo sada u većini modernih preglednika. Zatim možete koristiti prijelaze s CSS-om da biste izmijenili slike kada ih lebdete ili kliknete ili nakon nekog vremena.
Korištenje slika kao pozadina
CSS olakšava stvaranje fancy pozadina sa svojim slikama.
Možete dodati pozadine na cijelu stranicu ili samo na određeni element. Lako je stvoriti pozadinsku sliku na stranici sa svojstvom pozadinske slike:
tijelo {
pozadina: url (background.jpg);
}
Promijenite tijelo izbornika na određeni element na stranici kako biste pozadinu stavili na samo jedan element.
Još jedna zabavna stvar koju možete učiniti s slikama je stvaranje pozadinske slike koja se ne može pomicati s ostatkom stranice - poput vodenog žiga. Upotrebljavate pozadinu stila - privitak: fiksno; zajedno s vašom pozadinskom slikom. Ostale opcije za vaše pozadine uključuju izradu pločica samo vodoravno ili okomito pomoću svojstava pozadinske reprodukcije.
Pišite ponavljanje pozadine: ponovite-x; za crtanje slike vodoravno i pozadinu ponoviti: ponavljati-y; na pločicu okomito. A pozadinsku sliku možete pozicionirati i svojom pozadinskom pozicijom.
A CSS3 dodaje više stilova za vaše pozadine. Možete istegnuti svoje slike kako bi odgovarao bilo kojoj veličini pozadine ili postaviti pozadinsku sliku na ljestvici s veličinom prozora . Možete promijeniti položaj, a zatim isječak pozadinske slike. Ali jedna od najboljih stvari o CSS3 jest da sada možete slati više pozadinskih slika da biste stvorili još zamršenije efekte.
HTML5 pomaže u stilu slikama
Element FIGURE u HTML5 trebao bi biti postavljen oko bilo koje slike koja može stajati samostalno u dokumentu. Jedan od načina da razmislite o tome jest da li se slika može pojaviti u dodatku, onda bi to trebalo biti unutar elementa FIGURE. Zatim možete upotrijebiti taj element i element FIGCAPTION za dodavanje stilova na slike.