CSS3 refleksija slike [CSS3 savjeti]
Do sada smo raspravljali o mnogim novim nekretninama u Hrvatskoj CSS3. Osim toga, postoji još nekoliko drugih svojstava koja trenutno nisu uključena u službene specifikacije CSS3 koje vrijedi isprobati, a jedna od njih je kutija-odražavaju imovine koju inicira WebKit. Ovo svojstvo može se odraziti na navedene objekte.
Osnovna refleksija
Osnovna implementacija je prilično intuitivna; recimo, želimo odraz ispod stvarnog objekta. Možemo pisati:
img -webkit-box-odražava: ispod;
Ovaj primjer pokazuje kako odražavamo sliku ispod (položaj) objekta. Ali, u ovom slučaju, također možemo zadržati refleksiju na pravo, lijevo, i iznad.
Pomak refleksije
ofset koristi se za definiranje razmaka između refleksije i stvarnog reflektiranog objekta. Pogledajmo isječak koda u nastavku;
img -webkit-box-reflektira: ispod 10px;
U gornjem kodu smo odvojili odraz stvarnog objekta 10px;
- Prikaži demo
Maskiranje s gradijentima
Efekt refleksije koji obično vidimo je fade-out na dnu i prikazuje samo pola ili manje stvarnog objekta. Da bismo ponovili ovu vrstu učinka, možemo se prijaviti CSS3 gradijenti kako bi prikrili objekt, tako;
-webkit-box-reflektira: ispod 0px -webkit-gradijent (linearno, lijevo gore, lijevo dolje, od (transparentno) do (rgba (250, 250, 250, 0.1)));
Ovaj kod će rezultirati sljedećom prezentacijom;
Možemo također koristiti boja-stop kontrolirati prijelaze i učiniti izgled refleksije ljepšim:
img -webkit-box-odražava: ispod 0px -webkit-gradijent (linearno, lijevo gore, lijevo dno, od (transparentno), zaustavljanje boje (70%, transparentno) do (rgba (250, 250, 250, 0,1) )));
- Prikaži demo
Alternative za Firefox
Ovo svojstvo, međutim, trenutno radi samo u Webkit preglednicima (što znači Safari i Chrome). Da biste ostvarili isti učinak u Firefoxu, potrebna vam je druga ruta: upotreba -Moz-element () funkcija. Ova funkcija bitno će generirati ili replicirati sadržaj iz određenih HTML elemenata. Pogledajmo sljedeći primjer;
Imamo sliku umotanu u a I, da održimo refleksiju, koristit ćemo Nažalost, još uvijek nema jednostavnog načina za stvaranje Lijepo efekt refleksije u Firefoxu koristeći ovu praksu. Gornji kod će jednostavno stvoriti refleksiju, bez efekta fade.moz-odražavaju iskaznica;
:nakon pseudo elemenata, kako slijedi; # moz-odražava: poslije content: ""; prikaz: blok; pozadina: -moz-element (# moz-odražava) nema ponavljanja; width: auto; visina: 375px; margin-bottom: 100px; -moz-transform: scaleY (-1);
-moz-transformacija s negativnom skalom koristi se za okretanje generiranog objekta naopako. Također, provjerite je li visina je dovoljno precizan za stvarni objekt visina kako biste izbjegli nepotrebne dodatne linije za pozicioniranje odraza.Daljnje reference
