Stilizirajte slike in uporabite slike v slogih
Mnogi ljudje uporabljajo CSS za prilagajanje besedila, spreminjanje pisave, barve, velikosti in več. Ampak ena stvar, ki jo mnogi ljudje pogosto pozabljajo, je, da lahko s CSS uporabite tudi slike.
Spreminjanje slike samega sebe
CSS vam omogoča prilagajanje prikaza slike na strani. To je lahko zelo koristno za ohranjanje dosedanjih strani. Z nastavitvijo sloga na vse slike ustvarite standarden videz za svoje slike. Nekatere stvari, ki jih lahko naredite:
- Dodajte rob ali okvir okoli slik
- Odstranite obarvano rob okrog povezanih slik
- Prilagajanje širine in / ali višine slik
- Dodajte senco kapljice
- Zavrtite sliko
- Spremenite sloge, ko je slika premaknjena
Dajanje svoje slike meji je odličen kraj za začetek. Toda razmislite o več kot le meji - pomislite na celoten rob vaše slike in prilagodite robove in oblazinjenje . Podoba s tanko črno obrobo izgleda lepo, vendar dodaja nekaj obloge med mejo in slika lahko izgleda še bolje.
img {
border: 1px solid black;
padding: 5px;
}
Dobra ideja je, da vedno povežete ne-dekorativne slike , kadar je to mogoče. Toda, ko to storite, ne pozabite, da večina brskalnikov dodaja barvno rob okrog slike. Tudi če uporabite zgornjo kodo, če želite spremeniti mejo, bo povezava preglasila to, razen če odstranite ali spremenite mejo na povezavi. Če želite to narediti, morate uporabiti otroško pravilo CSS, da odstranite ali spremenite rob okoli povezanih slik:
img> a {
meja: nič;
}
Za spreminjanje ali nastavitev višine in širine slik lahko uporabite CSS. Čeprav ni dobra ideja za uporabo brskalnika za prilagajanje velikosti slik zaradi hitrost prenosa, so pri spreminjanju velikosti slike veliko boljši, tako da so še vedno videti dobro. In s CSS lahko slike nastavite na standardno širino ali višino ali celo nastavite razsežnosti glede na vsebnik.
Ne pozabite, da pri spreminjanju velikosti slik za najboljše rezultate spremenite samo eno dimenzijo - višino ali širino. To bo povzročilo, da slika ohranja razmerje stranic in tako ne izgleda čudno. Druga vrednost nastavite na samodejno ali pa pustite, da bo brskalniku povedal, da je razmerje med širino in širino dosledno.
img {
širina: 50%;
višina: avto;
}
CSS3 ponuja rešitev za to težavo z novimi lastnostmi, ki se prilagajajo objektu in objektu. S temi lastnostmi boste lahko natančno določili višino in širino slike ter kako bi bilo treba uporabiti razmerje stranic. To lahko ustvari učinke pisemskega okvirja okoli vaših slik ali obrezovanje, da se slika prilagodi zahtevani velikosti.
Medtem ko lastnosti objekta CSS3 in objektne pozicije še niso podprte, obstajajo še druge lastnosti CSS3, ki so v večini sodobnih brskalnikov dobro podprte, da jih lahko uporabite za spreminjanje slik. Stvari, kot so senčne sence, zaobljeni koti in preobliki, ki se vrtijo, poševijo ali premikajo slike, zdaj delujejo v večini sodobnih brskalnikov. Nato lahko uporabite prehodi CSS, da se slike spremenijo, ko se premikate, kliknete ali pa po določenem času.
Uporaba slik kot ozadja
CSS olajša ustvarjanje fancy ozadij s svojimi slikami.
Ozadju lahko dodate celotno stran ali samo določen element. To je preprosto ustvariti sliko ozadja na strani s sliko ozadja:
telo {
ozadje-slika: url (background.jpg);
}
Če želite spremeniti izbirnik telesa na določen element na strani, ozadje postavite na samo en element.
Druga zabavna stvar, ki jo lahko naredite s slikami, je ustvariti sliko v ozadju, ki se ne pomika z ostalo stranjo - kot vodni žig. Uporabljate samo slog ozadja: pritrjen; skupaj z vašo sliko v ozadju. Druge možnosti za vaše ozadje vključujejo izdelavo ploščic v vodoravni ali navpični smeri s pomočjo lastnosti ponovitve ozadja.
Napiši ozadje-ponovi: ponovi-x; da se slika razširi vodoravno in ozadje ponovi: ponovite-y; za ploščice navpično. In svojo sliko ozadja lahko postavite v lastnost pozicije.
CSS3 dodaja več stilov za vaše ozadje. Vaše slike lahko raztegnete tako, da ustrezajo vsaki velikosti ozadju ali nastavite ozadje na velikost okna . Položaj lahko spremenite in nato posnamete sliko ozadja. Toda ena od najboljših stvari o CSS3 je, da zdaj lahko prekrivate več slik v ozadju, da ustvarite še bolj zapletene učinke.
HTML5 pomaga slogu slik
Element FIGURE v HTML5 je treba postaviti okrog poljubnih slik, ki so lahko znotraj dokumenta. Eden od načinov razmišljanja je, če bi se lahko slika pojavila v dodatku, potem mora biti znotraj elementa FIGURE. Nato lahko uporabite ta element in element FIGCAPTION, da dodate sloge na svoje slike.