Monet ihmiset käyttävät CSS säätää tekstiä, muuttamalla kirjasinta, väriä, kokoa ja muuta. Mutta yksi asia, jonka monet ihmiset usein unohtavat, on se, että voit käyttää CSS: ää myös kuvien kanssa.
Itse kuvan muuttaminen
CSS: n avulla voit säätää kuvan esitystapaa sivulla. Tämä voi olla todella hyödyllistä pitääksesi sivusi yhtenäisinä. Asettamalla tyylit kaikille kuville luodaan kuvillesi vakiotyyli. Joitakin asioita, joita voit tehdä:
- Lisää reunus tai ääriviiva kuvien ympärille
- Poista linkitettyjen kuvien ympärillä oleva värillinen reunus
- Kuvien leveyden ja / tai korkeuden säätäminen
- Lisää varjo
- Kierrä kuvaa
- Vaihda tyylit kun kuva on hiiren päällä
Kuvan rajaaminen on hyvä paikka aloittaa. Mutta kannattaa ottaa huomioon muutakin kuin raja - ajattele kuvan koko reunaa ja säädä marginaaleja ja pehmuste yhtä hyvin. Ohut, mustalla reunalla oleva kuva näyttää hyvältä, mutta reunan ja kuvan väliin voi lisätä vielä enemmän pehmusteita.
Se on hyvä idea linkitä aina ei-koristeelliset kuvat, kun mahdollista. Mutta kun teet, muista, että useimmat selaimet lisäävät värillisen reunan kuvan ympärille. Vaikka käytät yllä olevaa koodia reunan muuttamiseen, linkki ohittaa sen, ellet poista tai muuta myös linkin reunaa. Voit tehdä tämän CSS-alatason säännön avulla poistamalla tai muuttamalla linkitettyjen kuvien ympärillä olevaa reunaa:
CSS: n avulla voit myös muuttaa tai asettaa kuviesi korkeuden ja leveyden. Vaikka ei ole hyvä idea käyttää selainta kuvakokojen säätämiseen latausnopeuden takia, ne muuttavat kuvien kokoa paljon paremmin, jotta ne näyttävät silti hyvältä. CSS: n avulla voit asettaa kaikkien kuvien olevan vakioleveyden tai -korkeuden tai jopa asettaa mittasuhteet astiaan nähden.
Muista, että kun muutat kuvien kokoa, parhaan tuloksen saavuttamiseksi sinun tulee muuttaa vain yhden ulottuvuuden - korkeuden tai leveyden kokoa. Tämä varmistaa, että kuva säilyttää kuvasuhteensa, joten se ei näytä oudolta. Aseta toisen arvon arvoksi auto tai jätä se käskemään selainta pitämään kuvasuhde yhtenäinen.
CSS3 tarjoaa ratkaisun tähän ongelmaan uusien ominaisuuksien kanssa esineeseen sopiva ja objekti-sijainti. Näillä ominaisuuksilla voit määrittää tarkan kuvan korkeuden ja leveyden sekä kuinka kuvasuhdetta tulisi käsitellä. Tämä voi luoda postilaatikkotehosteita kuviesi ympärille tai rajata, jotta kuva sopisi vaadittuun kokoon.
On muita CSS3-ominaisuuksia, jotka ovat hyvin tuettuja useimmissa selaimissa, joita voit käyttää myös kuviesi muokkaamiseen. Sellaiset asiat kuin varjot, pyöristetyt kulmat ja muunnokset kuvien kiertämiseksi, vinoutamiseksi tai siirtämiseksi, toimivat nyt useimmissa moderneissa selaimissa. Voit sitten käyttää CSS-siirtymiä saadaksesi kuvat muuttumaan, kun hiiren osoitin on hiiren päällä, napsautetaan tai vain jonkin ajan kuluttua.
Kuvien käyttö taustoina
CSS: n avulla on helppo luoda hienoja taustoja kuvillesi. Sinä pystyt Lisää taustat koko sivulle tai vain tiettyyn elementtiin. Sivulle on helppo luoda taustakuva taustakuva omaisuus:
Muuta runko valitsin sivun tiettyyn elementtiin laittaa taustan vain yhdelle elementille.
Toinen hauska asia, jonka voit tehdä kuvilla, on luoda taustakuva, joka ei vierity muun sivun kanssa - kuten vesileima. Käytä vain tyyliä taustakiinnitys: kiinteä; yhdessä taustakuvan kanssa. Muita taustan vaihtoehtoja ovat niiden asettaminen ruuduiksi vaaka- tai pystysuunnassa käyttämällä tausta-toisto omaisuus. Kirjoittaa tausta-toisto: toista-x; ruutu kuvan vaakasuunnassa ja tausta-toisto: toista-y; laatoittaa pystysuunnassa. Ja voit sijoittaa taustakuvasi taustan sijainti omaisuus.
Ja CSS3 lisää lisää tyylejä myös taustoihisi. Voit venyttää kuvia sopimaan minkä tahansa kokoiseen taustaan tai asettaa taustakuvan skaalautumaan ikkunan koon mukaan. Voit muuttaa sijaintia ja leikata taustakuvan. Mutta yksi CSS3: n parhaista asioista on se, että voit nyt kerrosta useita taustakuvia luoda vieläkin monimutkaisempia tehosteita.
HTML5 auttaa tyylikuvia
KUVA HTML5-elementti tulisi sijoittaa kaikkien kuvien ympärille, jotka voivat olla erillisiä asiakirjassa. Yksi tapa ajatella sitä on, jos kuva voisi näkyä liitteessä, niin sen pitäisi olla KUVA elementti. Voit sitten käyttää kyseistä elementtiä ja KUVAUS -elementti tyylien lisäämiseksi kuviin.