Aseta kuvat ja käytä kuvia tyyleissä
Monet käyttävät CSS : ää tekstin säätämiseen, fontin, värin, koon muuttamiseen ja muuhun. Mutta yksi asia, että monet ihmiset usein unohtaa, on, että voit käyttää CSS kuvia samoin.
Kuvan muuttaminen itsestään
CSS: n avulla voit säätää kuvan näkyvyyttä sivulla. Tämä voi olla todella hyödyllinen, jotta sivuesi pysyvät yhdenmukaisina. Asettaessasi tyylejä kaikille kuville, luodaan vakiotarkkuus kuville. Joitakin asioita, joita voit tehdä:
- Lisää reunoja tai ääriviivoja kuvien ympärille
- Poista värillinen reunus linkitettyjen kuvien ympärillä
- Kuvan leveyden ja / tai korkeuden säätäminen
- Lisää pudota varjo
- Kierrä kuvaa
- Muuta tyylit, kun kuvaa liikkuu
Kuvan antaminen rajalle on loistava paikka aloittaa. Mutta sinun kannattaa harkita muutakin kuin rajaa - mieti koko kuvan reunaa ja säädä reunuksia ja pehmusteita . Kuvassa, jossa on ohut musta raja, näyttää hyvältä, mutta rajan ja kuvan välisen pehmusteiden lisääminen voi näyttää vielä paremmalta.
img {
raja: 1px kiinteä musta;
pehmuste: 5px;
}
On hyvä yhdistää aina ei-koristeelliset kuvat , kun mahdollista. Mutta kun tiedät, muista, että useimmat selaimet lisäävät värillisen reunuksen kuvan ympärille. Vaikka käytät yllä olevaa koodia rajan muuttamiseen, linkki ohittaa sen, ellet poista tai muuta linkin reunaa. Tätä varten sinun on käytettävä CSS-lapsisääntöä, jos haluat poistaa tai muuttaa reunoja linkitettyjen kuvien ympärillä:
img> a {
raja: ei yhtään;
}
Voit myös muuttaa CSS-asetusta tai määrittää kuvien korkeuden ja leveyden. Vaikka selaimella ei ole hyvä idea säätää kuvakoon latausnopeuksien vuoksi, ne ovat paljon parempia kuvien kokoa muutettaessa, jotta ne näyttäisivät edelleen hyviltä. Ja CSS: llä voit asettaa kaikki kuvat normaaliksi leveydeksi tai korkeudeksi tai jopa asettaa mitat suhteessa säiliöön.
Muista, että kun muutat kuvien kokoa, saat parhaan tuloksen vain kokoa - korkeutta tai leveyttä. Tämä tarkoittaa sitä, että kuva säilyttää kuvasuhteensa, joten se ei näytä kummalta. Aseta toinen arvo automaattisesti tai jätä se pois kertoaksesi selaimesta, jotta kuvasuhde säilyy yhtenäisenä.
img {
leveys: 50%;
korkeus: auto;
}
CSS3 tarjoaa ratkaisun tähän ongelmaan uusien objektien objekti-fit- ja object-position kanssa. Näillä ominaisuuksilla voit määrittää tarkan kuvan korkeuden ja leveyden ja kuinka kuvasuhdetta tulisi käsitellä. Tämä voi aiheuttaa kuvien tai rajausten ympärille levykkeitä, jotta kuva sopisi tarvittavaan kokoon.
Vaikka CSS3-objekti-asento- ja objektiasentoominaisuudet eivät ole vielä laajalti tuettuja, on olemassa muita CSS3-ominaisuuksia, jotka ovat hyvin tuettuja useimmissa nykyaikaisissa selaimissa, joita voit muokata kuvasi. Asioita, kuten pudotusvarjot, pyöristetyt kulmat ja muutokset, jotka pyörivät, vinoutuvat tai siirtävät kuvasi, toimivat nyt nykyaikaisimmissa selaimissa. Tämän jälkeen voit käyttää CSS-siirtymiä, jotta kuvat muuttuvat, kun niitä liikutetaan päälle tai napsautetaan tai vain jonkin ajan kuluttua.
Kuvien käyttäminen taustana
CSS: n avulla voit luoda kuvitteellisia taustakuvia.
Voit lisätä taustoja koko sivulle tai vain tiettyyn elementtiin. Taustakuvan omaavalle sivulle on helppo luoda taustakuva:
elin {
taustakuva: url (background.jpg);
}
Vaihda kehonvalitsin sivun tiettyyn osaan taustan asettamiseksi vain yhdelle elementille.
Toinen hauska asia, jota voit tehdä kuvien kanssa, on luoda taustakuvan, joka ei selaa muiden sivujen kanssa - kuten vesileima. Käytät vain tyyliä tausta-liitetiedostoa: kiinteä; yhdessä taustakuvan kanssa. Taustakuvan muut vaihtoehdot ovat niiden tekeminen vain vaakasuoraan tai pystysuoraan taustan toistoominaisuuden avulla.
Kirjoita tausta-toisto: toista-x; kuvan laatoittaminen vaakasuoraan ja taustan toisto: toista-y; laatta pystysuoraan. Voit sijoittaa taustakuvan tausta-aseman omaisuudeksi.
Ja CSS3 lisää taustasi tyylit. Voit venyttää kuvasi mihin tahansa koon taustaan tai asettaa taustan kuvan skaalata ikkunan koon mukaan . Voit muuttaa sijaintia ja leikata taustakuvan. Mutta yksi CSS3: n parhaista asioista on se, että voit kerätä useita taustakuvia entistä monimutkaisempien vaikutusten luomiseksi.
HTML5 auttaa tyylikuvat
HTML5-kuvion elementti on sijoitettava kaikkien sellaisten kuvien ympärille, jotka voivat olla yksin asiakirjan sisällä. Yksi tapa ajatella sitä on, jos kuva voi näkyä liitteenä, sen pitäisi olla kuvion elementin sisällä. Tämän jälkeen voit käyttää kyseistä elementtiä ja FIGCAPTION-elementtiä lisätäksesi tyylejä kuviin.