Veliko ljudi uporablja CSS za prilagoditev besedila, spreminjanje pisave, barve, velikosti in še več. Toda ena stvar, na katero marsikdo pogosto pozabi, je, da lahko CSS uporabljate tudi s slikami.
Sama sprememba slike
CSS vam omogoča, da prilagodite način prikaza slike na strani. To je lahko zelo koristno za ohranjanje doslednosti vaših strani. Z nastavitvijo slogov na vseh slikah ustvarite standardni videz slik. Nekaj stvari, ki jih lahko storite:
- Dodajte obrobo ali oris okoli slik
- Odstranite barvno obrobo okoli povezanih slik
- Prilagajanje širine in / ali višine slik
- Dodajte senco
- Zavrtite sliko
- Spremenite sloge ko se slika premakne
Dajanje obrobe vaši sliki je odličen kraj za začetek. Upoštevajte pa več kot le obrobo - pomislite na celoten rob slike in prilagodite robove in oblazinjenje prav tako. Slika s tanko črno obrobo je videti lepo, dodajanje oblazinjenja med obrobo in sliko pa je lahko videti še boljše.
To je dobra ideja vedno povezuj nedekorativne slike, kadar je to mogoče. Ko pa to storite, ne pozabite, da večina brskalnikov doda barvno obrobo okoli slike. Tudi če za spremembo meje uporabite zgornjo kodo, bo povezava to preglasila, razen če odstranite ali spremenite tudi obrobo na povezavi. Če želite to narediti, uporabite podrejeno pravilo CSS, da odstranite ali spremenite obrobo okoli povezanih slik:
S pomočjo CSS lahko spremenite ali nastavite višino in širino slik. Čeprav s pomočjo brskalnika zaradi hitrosti prenosa za prilagajanje velikosti slik ni dobra ideja, so veliko boljši pri spreminjanju velikosti slik, tako da so še vedno videti dobro. In s CSS lahko nastavite, da so vaše slike standardne širine ali višine ali celo nastavite dimenzije glede na vsebnik.
Ne pozabite, da pri spreminjanju velikosti slik za najboljše rezultate spremenite velikost samo ene dimenzije - višine ali širine. To bo zagotovilo, da bo slika ohranila razmerje stranic in tako ne bo videti čudno. Nastavite drugo vrednost na samodejno ali pustite, da brskalniku pove, da mora biti razmerje stranic dosledno.
CSS3 ponuja rešitev te težave z novimi lastnostmi objekt-fit in objekt-položaj. S temi lastnostmi boste lahko določili natančno višino in širino slike ter način obdelave razmerja stranic. To lahko ustvari učinke poštnega nabiranja okrog vaših slik ali obrezovanje, da se slika prilega zahtevani velikosti.
Obstajajo tudi druge lastnosti CSS3, ki so v večini brskalnikov dobro podprte, s katerimi lahko spremenite tudi svoje slike. Stvari, kot so senčila, zaobljeni vogali in preoblikovanja, da zasukate, popačite ali premaknete slike, trenutno delujejo v večini sodobnih brskalnikov. Nato lahko s prehodi CSS naredite, da se slike spremenijo, ko premaknete miškin kazalec, kliknete ali takoj po določenem času.
Uporaba slik kot ozadij
CSS olajša ustvarjanje modnih ozadij s slikami. Ti lahko dodajte ozadja na celotno stran ali samo na določen element. Na strani je enostavno ustvariti sliko za ozadje z slika ozadja lastnina:
Spremenite telo izberite določen element na strani, da postavite ozadje samo na en element.
Še ena zabavna stvar, ki jo lahko naredite s slikami, je, da ustvarite sliko v ozadju, ki se ne pomika skupaj s preostalo stranjo - kot vodni žig. Samo uporabite slog pritrditev ozadja: fiksno; skupaj s sliko v ozadju. Druge možnosti za ozadje vključujejo izdelavo ploščic le vodoravno ali navpično z uporabo ozadje-ponovitev lastnine. Napiši background-repeat: repeat-x; da vodoravno položite sliko in background-repeat: repeat-y; na ploščice navpično. Sliko za ozadje lahko namestite s položaj ozadja lastnine.
In CSS3 doda več stilov tudi za vaše ozadje. Slike lahko raztegnete tako, da ustrezajo ozadju poljubne velikosti, ali pa nastavite, da se slika ozadja prilagodi velikosti okna. Lahko spremenite položaj in nato izrežete sliko ozadja. Toda ena najboljših stvari pri CSS3 je ta, da lahko zdaj plastete več slik v ozadju, da ustvarite še bolj zapletene učinke.
HTML5 pomaga pri oblikovanju slik
The SLIKA element v HTML5 je treba postaviti okoli vseh slik, ki so lahko samostojne v dokumentu. Eden od načinov razmišljanja je, če bi se slika lahko pojavila v dodatku, potem bi morala biti znotraj SLIKA element. Nato lahko uporabite ta element in FIGCAPTION element za dodajanje slogov slikam.