5 CSS-ominaisuudet, jotka sinun pitäisi tietää

Voit käyttää CSS-ominaisuuksia, kuten taustakuvia, reunakuvia, peitto- ja leikkausominaisuuksia lisää kuvia suoraan Web-sivuille ja hallita niiden käyttäytymistä. On kuitenkin myös harvemmin mainittuja kuvaan liittyviä CSS-ominaisuuksia työhön lisätyt kuvat HTML-tunniste, joka on suosituin tapa lisätä kuvia verkkosivuille.

Näiden jälkimmäisten ominaisuuksien kuvaus vaihtelee kuvan varjon hallinta että terävyyden asettaminen, auttaa meitä hallitsemaan paremmin kuvien ulkoasua ja sijaintia tag. Katsotaanpa ne yksitellen.

1. Teroita kuvia image-mallinnus

Kun kuva on skaalattu, selain tasoittaa kuvaa, joten se ei näytä pikseleinä. Mutta kuvan ja näytön resoluutiosta riippuen tämä ei ehkä ole aina paras. Voit ohjata selaimen käyttäytymistä image-mallinnus omaisuus.

Tämä hyvin tuettu ominaisuus ohjaa kuvan mittakaavassa käytettävää algoritmia. Sen kaksi pääarvoa ovat teräviä reunoja ja pixelated.

teräviä reunoja arvo säilyttää värikontrastin pikseleiden välillä. Toisin sanoen kuviin ei tehdä tasoitusta mahtava pikseliteos.

Kun pixelated käytetään, pikselin läheiset pikselit voivat aloittaa sen ulkonäkö, tuntuu siltä, ​​että ne näyttävät yhdessä muodostavat yhden suuren pikselin, hyvä suuriresoluutioisille näytöille.

Jos tarkastelet tarkasti alla olevan GIF-kukka-alan reunoja, näet tavallisen ja a: n välisen eron pixelated kuva.

 img image-rendering: pixelated;  

2. Venytä kuvia objekti-fit

sisältää, peite, täyttää arvot ovat kaikki tuttuja, käytämme niitä tausta-koko ominaisuus, joka määrittää, miten taustakuva täyttää sen sisältämän elementin. objekti-fit omaisuus on aivan samankaltainen kuin se myös määrittää miten kuvakoko säiliön sisällä.

sisältää arvo sisältää kuvan sen säiliössä. peite tekee saman, mutta jos kuvan ja säiliön kuvasuhde ei vastaa, kuva on leikattu. täyttää aiheuttaa kuvan venyttää ja täyttää sen säiliö. scale-alas valitsee pienimmän version kuvasta näyttää.

 
  #container leveys: 300px; korkeus: 300px;  img leveys: 100%; korkeus: 100%; objekti-sovitus: sisältää;  

3. Siirrä kuvat painikkeilla objekti-asemassa

Samoin kuin täydentäminen tausta-asemassa Omaisuutta tausta-koko, siellä on objekti-asemassa omaisuutta objekti-fit, liian.

objekti-fit omaisuus siirtää kuvaa kuvan säiliön sisällä koordinaatteihin. Koordinaatit voidaan määritellä absoluuttisen pituuden yksiköt, suhteellisen pituuden yksiköt, avainsanat (ylin, vasen, keskusta, pohja, ja oikea) tai a voimassa oleva yhdistelmä (alkuun 20px oikea 5px, keskellä oikealle 80px).

 
  #container leveys: 300px; korkeus: 300px;  img leveys: 100%; korkeus: 100%; objektiasema: 150px 0;  

4. Tilaa kuvat vertical-align

Joskus lisätään (jotka ovat luonteeltaan inline) tekstin merkkijonojen vieressä lisätietoa tai koristelua. Siinä tapauksessa, kohdistetaan teksti ja kuva haluttuun asentoon voi olla hieman hankalaa, jos et tiedä, mitä omaisuutta käytetään.

vertical-align omaisuus on ei yksinomaan taulukon soluihin. Se voi myös kohdistaa inline-elementin sisäisen ruudun sisällä ja sitä voidaan käyttää kohdista kuva tekstiriville. Se vie melkoisen määrän arvoja, joita voidaan soveltaa inline-elementtiin, joten sinulla on monia vaihtoehtoja.

 
 PDF  
 

5. Varjele kuvia suodatin: drop-shadow ()

Varjoja voi lisätä elämään verkkosivulle, kun tekstiä ja laatikoita käytetään huomaamattomasti. Sama pätee kuviin. Kuvat, joissa on keskeiset muodot ja läpinäkyvät taustat voi hyötyä drop-varjo CSS-suodatin.

Sen väitteet ovat samanlainen kuin varjoihin liittyvien CSS-ominaisuuksien arvot (text-shadow, box-varjo). Kaksi ensimmäistä edustavat pystysuora ja vaakasuora etäisyys varjojen ja kuvan välillä, kolmas ja neljäs ovat hämärtää ja levitä säteen säde, ja viimeinen on varjon väri.

Ihan kuin text-shadow, drop-varjo luo myös varjon, joka on muokataan kuuluvan esineen päälle. Joten, kun sitä sovelletaan kuvaan, varjo ottaa kuvan näkyvän osan muodon.

 img filter: drop-shadow (0 0 5px sininen);  

Lue myös: CSS3-kuvien heijastus [CSS3-vinkit]