Korišćenje CSS-a sa slikama

Stilirajte slike i koristite slike u stilovima

Mnogi ljudi koriste CSS za podešavanje teksta, promjenu fonta, boje, veličine i više. Ali jedna stvar koju mnogi ljudi zaboravljaju jeste da možete koristiti i CSS sa slikama.

Promena same slike

CSS vam omogućava da prilagodite kako se slika prikazuje na stranici. Ovo može biti korisno za održavanje vaših stranica konzistentnim. Postavljanjem stilova na sve slike kreirate standardni izgled svojih slika. Neke od stvari koje možete učiniti:

Davanje imidža granici je odlično mesto za početak. Ali trebalo bi da razmislite više od granice - razmislite o čitavoj ivici vaše slike i prilagodite margine i podlogu . Slika sa tankom crnom granicom izgleda lepo, ali dodavanjem neke podloge između granice i slike mogu izgledati još bolje.

img {
granica: 1px solid black;
padding: 5px;
}

Dobra je ideja da uvek povezujete ne-dekorativne slike , kada je moguće. Ali, kada to uradite, zapamtite da većina pretraživača dodaju obojanu ivicu oko slike. Čak i ako koristite gornji kod za promjenu granice, link će to prevazići ako ne uklonite ili promenite granicu na linku. Da biste to uradili, trebate koristiti CSS dječje pravilo za uklanjanje ili promjenu granice oko povezanih slika:

img> a {
granica: nema;
}

Takođe možete koristiti CSS da biste promenili ili podesili visinu i širinu vaših slika. Iako nije dobra ideja da koristite pretraživač da biste prilagodili veličine slika zbog brzina prenosa, postaju mnogo bolje pri promeni veličine slike, tako da i dalje izgledaju dobro. Sa CSS-om možete podesiti slike kao standardne širine ili visine ili čak postaviti dimenzije da budu relativne prema kontejneru.

Zapamtite, prilikom promjene veličine slike, za najbolje rezultate, trebalo bi samo da promenite veličinu jedne dimenzije - visinu ili širinu. Ovo će uticati na to da slika zadržava svoj aspekt, pa tako ne izgleda čudno. Podesite drugu vrednost na auto ili ostavite je da reći pregledaču da održi odnos slike.

img {
širina: 50%;
visina: auto;
}

CSS3 nudi rješenje za ovaj problem s novim svojstvima prilagođenim objektnim i objektnim položajem. Sa ovim svojstvima moći ćete da definišete tačnu visinu i širinu slike i kako treba da postupite sa odnosom visine. Ovo može dovesti do efekata pisanja na slike ili obrezivanja kako bi se slika prilagodila potrebnoj veličini.

Iako karakteristike CSS3 objektne i objektne pozicije još uvek nisu široko podržane, postoje i druga svojstva CSS3 koja su dobro podržana u najsavremenijim pregledačima koje možete koristiti za modifikovanje vaših slika. Stvari poput senki kapljica, zaobljeni uglovi i transformacije koje se rotiraju, skewuju ili pomeraju slike, trenutno rade u većini modernih pregledača. Tada možete koristiti CSS prelaze kako biste učinili da se slike menjaju kada se premještate ili klikne ili neposredno nakon određenog vremenskog perioda.

Korišćenje slika kao pozadina

CSS olakšava kreiranje fensi pozadina sa vašim slikama.

Možete dodati pozadine na celu stranicu ili samo određeni element. Lako je napraviti pozadinsku sliku na stranici sa svojstvom pozadine slike:

body {
background-image: url (background.jpg);
}

Promijenite selektor tijela na određeni element na stranici kako biste pozadinu postavili samo na jedan element.

Još jedna zabavna stvar koju možete učiniti sa slikama je stvoriti pozadinsku sliku koja se ne pomiče sa ostatkom stranice - kao vodeni žig. Koristite samo pozadinski prilog: fiksni; uz vašu sliku u pozadini. Druge opcije za vaše pozadine uključuju ih samo horizontalno ili vertikalno koristeći svojstvo pozadine-ponavljanje.

Napiši pozadinsko ponavljanje: ponoviti-x; da postavite sliku horizontalno i ponovite pozadinu: ponovite-y; da pločice vertikalno. Možete postaviti svoju pozadinu u svojstvo pozadine.

CSS3 dodaje više stilova za svoje pozadine. Možete da istegnete svoje slike kako bi odgovarali bilo kojoj veličini pozadine ili podesili sliku u pozadini sa veličinom prozora . Možete promijeniti položaj, a zatim isječiti pozadinsku sliku. Ali jedna od najboljih stvari o CSS3 je da sada možete da slojite više pozadinskih slika kako biste stvorili još složenije efekte.

HTML5 pomaže stilskim slikama

Element FIGURE u HTML5 treba da bude postavljen oko svih slika koje mogu sami da stoje unutar dokumenta. Jedan od načina razmišljanja o tome je da li se slika može pojaviti u dodatku, tada bi trebalo da bude unutar elementa FIGURE. Tada možete koristiti taj element i element FIGCAPTION da dodate stilove vašim slikama.