CSS3-kuvien heijastus [CSS3-vinkit]
Tähän mennessä olemme keskustelleet monista uusista ominaisuuksista vuonna 2007 CSS3. Tämän lisäksi on olemassa muutamia muita ominaisuuksia, joita ei tällä hetkellä sisällytetä CSS3: n virallisiin eritelmiin, joita kannattaa kokeilla, joista yksi on box-heijastavat ominaisuus, joka käynnistetään Webkit. Tämä ominaisuus voi heijastaa määritettyjä kohteita.
Perusheijastus
Perusrakenne on varsin intuitiivinen; Sanotaan, että haluamme heijastuksen todellisen kohteen alla. Voimme kirjoittaa:
img -webkit-box-refleksi: alla;
Tämä esimerkki näyttää, miten kuvastamme kuvaa alla (sijainti). Mutta tässä tapauksessa voimme myös pitää heijastuksen oikea, vasen, ja edellä.
Heijastussiirtymä
Offset määritetään heijastuksen ja heijastuneen todellisen kohteen välinen kuilu. Katsotaan alla olevaa koodinpätkiä;
img -webkit-box-reflection: alle 10px;
Yllä olevassa koodissa erotimme todellisen kohteen heijastuksen 10px;
- Näytä demo
Peittäminen gradienteilla
Heijastava vaikutus, jota tavallisesti näemme, on alhaalla oleva haalistuminen ja vain puolet tai vähemmän todellisesta esineestä. Voit toistaa tällaisen vaikutuksen toistamalla CSS3-gradientit peittää esine, kuten näin;
-webkit-box-refleksi: alle 0px -webkit-gradientti (lineaarinen, vasen yläosa, vasen pohja, (läpinäkyvä), (rgba (250, 250, 250, 0.1)));
Tämä koodi johtaa seuraavaan esitykseen;
Voimme myös käyttää väri-stop hallita siirtymiä ja tehdä heijastuksesta hienompaa:
img -webkit-box-refleksi: alle 0px -webkit-gradientti (lineaarinen, vasen yläosa, vasen pohja, läpinäkyvä), värin pysäytys (70%, läpinäkyvä), (rgba (250, 250, 250, 0,1) )));
- Näytä demo
Vaihtoehdot Firefoxille
Tämä ominaisuus toimii kuitenkin vain Webkit-selaimissa (eli Safari ja Chrome). Saman vaikutuksen aikaansaamiseksi Firefoxissa tarvitset toisen reitin: käyttämällä -moz-elementti () toimia. Tämä toiminto tuottaa olennaisesti HTML-elementtien sisällön tai toistaa sen. Katsotaanpa seuraavaa esimerkkiä;
Meillä on kuva, joka on kääritty a Ja pitääkseen heijastuksen käytämme Valitettavasti ei ole vielä helppoa luoda kiva heijastava vaikutus Firefoxissa tämän käytännön avulla. Yllä oleva koodi luo yksinkertaisesti heijastuksen ilman häipymän vaikutusta.MOZ-heijastavat id;
:jälkeen pseudo-elementti, seuraavasti; # moz-refl: jälkeen content: ""; näyttö: lohko; tausta: -moz-elementti (# moz-reflection) ei-toista; leveys: auto; korkeus: 375px; marginaalin pohja: 100px; -moz-transform: scaleY (-1);
-MOZ-muunnos negatiivisella mittakaavalla käytetään tuotetun kohteen kääntämistä ylösalaisin. Varmista myös, että korkeus on riittävän tarkka todelliseen kohteeseen korkeus välttää tarpeettomia ylimääräisiä rivejä heijastuksen sijoittamiseksi.Lisää viitteitä
