Luo CSS-vain kuva, joka paljastaa läpinäkyvien reunojen vaikutuksen
CSS-vain kuva paljastaa vaikutuksen voidaan ratkaista eri tavoin. On itse asiassa melko helppoa koodata mallia, jossa kuva erottuu (on täynnä) sen vankka tausta -sinä vain sijoita kuva yli pienemmän elementin, jolla on vankka tausta.
Saat saman tuloksen, jos käytät avoimia rajoja, missä pidät taustaelementin koko on sama kuten etualalla ja lisätä läpinäkyviä rajoja luo tyhjä tila etualan ylivuotoon.
On jälkimmäisen menetelmän käytön edut. Koska se on läpinäkyviä rajoja, jotka tarjoavat alueen etualalle ylivuotoon, voimme hallita ylivuoton suuntaa vasemman, oikean, ylä- ja alareunan välillä. Saman kokoinen sekä etualalle että taustalle helpottaa molempien elementtien siirtämistä samanaikaisesti koko sivun.
Lyhyesti sanottuna näemme miten luoda vain CSS-kuva, joka paljastaa vaikutuksen käyttää pienempi kiinteä tausta kanssa etualan kuva, jossa on läpinäkyviä rajoja. Voit tarkistaa lopullinen demo alla.
1. Luo alkuperäinen koodi
HTML-viisas, Vain yksi Käytämme CSS: ssä kaksi CSS-muuttujaa, Lisäämme myös Me lisää tyhjä Lisäämme kuvan On alla oleva kuva voit nähdä, mitä meillä on tähän mennessä ( Voit lisätä pienempi (liukuva) tausta kuvan takana, käytämme toista pseudoelementtiä, Luomme toisen CSS-muuttujan, leveys lasketaan korkeus lasketaan Kanssa CSS-suodatin Tässä on demon näyttökuva toistaiseksi Me lisää Kuten me jo lisännyt Alla näet lopullinen demo. Jos näyttöön tulee
--BGC ja --himmeä varten taustaväri ja mitat n .foo säiliöön. Esimerkissä käytin sama arvo luo neliön muotoisen laatikon leveys ja korkeus erilliset muuttujat korkeus ja leveys, jos haluat suorakulmaisen.kanta: suhteellinen sääntö .foo, niin että sen pseudoelementit, joita aiomme käyttää paljastaa kuva, voi olla täysin sijoitettu (katso alla) ja näin ollen pinottu toisilleen. .foo --bgc: # FFCC03; - dim: 300px; leveys: var (- himmeä); korkeus: var (- himmeä); taustaväri: var (- bgc); asema: suhteellinen;
pitoisuus omaisuus molemmille pseudoelementeille, .foo :: ennen ja .foo :: jälkeen, saada ne asianmukaisesti. .foo :: before, .foo :: jälkeen content: ", sijainti: absoluuttinen, vasen: 0; top: 0;
.foo elementti, sen kaksi pseudoelementtiä, .foo :: ennen, .foo :: jälkeen, ja heidän : hover näennäisluokkia saada siirtyminen omaisuus se tulee olemaan lisää siirtymävaihe heille 500 millisekuntia (puoli sekuntia). .foo, .foo: hover, .foo :: ennen, .foo :: after, .foo: hover :: ennen, .foo: hover :: jälkeen siirtyminen: muuntaa 500ms help-in;
2. Lisää kuva
.foo :: ennen pseudo-elementti taustakuvana, ja kokoa koko pseudoelementin kattamiseksi kanssa leveys ja korkeus ominaisuudet. Me pinoa se suoraan alla .foo elementti käyttämällä z-indeksi: -1 sääntö. .foo :: ennen leveys: 100%; korkeus: 100%; tausta: url (camel.png) keskus / kansi; z-indeksi: -1;
keskusta avainsana keskittää kuvan, samalla kun peite avainsana skaalaa kuvan peittää koko elementin samalla säilyttäen sen kuvasuhteen. z-index poistetaan .foo :: ennen niin, että se näkyy):
3. Lisää liukuva tausta
.foo :: jälkeen.--b, varten reunan leveys. Me annamme kolme läpinäkyvää reunaa että ::jälkeen pseudo-elementti: ylhäältä, oikealta ja pohjalta. .foo :: jälkeen - b: 20px; leveys: laskettu (100% - var (- b)); korkeus: laskettu (100% - laskettu (var (- b) * 2)); raja: var (- b) kiinteä läpinäkyvä; raja-vasen: ei; box-shadow: upotettu 0 var (- dim) 0 var (- bgc); suodatin: kirkkaus (.8); z-indeksi: -2;
Calc (100% - var - b)) että palaa kokonaisleveys .foo miinus sen horisontaalisten rajojen kokonaisleveys (vain oikea reunus, koska ei ole vasemmalla reunaa).laskettu (100% - laskettu (var (- b) * 2)) että palaa kokonaiskorkeus .foo miinus sen pystysuorien rajojen kokonaisleveys (ylä- ja alareunat).box-varjo omaisuutta, me myös lisää vaakasuora sisäänrakennettu varjo koko on sama kuin .foo (mikä on var (- dim)).kirkkaus (0,8) tummenee taustavärin vähän, ja lopuksi z-indeksi: -2 sääntö sijoittaa ::jälkeen pseudoelementti alla ::ennen joka sisältää kuvan.z-index poistettu molemmista pseudoelementeistä, jotta ne voidaan nähdä):
4. Lisää muunnos
muuttaa omaisuus kahdelle pseudoelementille, joten kun käyttäjä siirtyy yli .foo, molemmat pseudoelementit ovat siirretty vaakasuoraan.siirtyminen omaisuutta kaikille elementeille vaiheen 1 lopussa kuvan ja sen taustan liike on sekä animoitu. .foo: hover :: ennen, .foo: hover :: sen jälkeen transform: translateX (100%);
Bonus: Valinnainen marginaali
.foo muiden elementtien vieressä sivulla ja haluavat näiden muiden elementtien olevan muuttaa pois kun kuva ja sen tausta liukuvat sitten lisää oikea marginaali, jonka leveys on sama kuin .foo että .foo: hover elementti. .foo: hover margin-right: var (- dim);
