Odsev slike CSS3 [Nasveti CSS3]
Do sedaj smo razpravljali o številnih novih lastninah CSS3. Poleg tega je dejansko še nekaj drugih lastnosti, ki trenutno niso vključene v uradne specifikacije CSS3, ki jih je vredno preizkusiti, od katerih je ena box-refleksija premoženje, ki ga sproži Webkit. Ta lastnost se lahko odraža na določenih objektih.
Osnovna refleksija
Osnovno izvajanje je precej intuitivno; recimo, želimo odsev pod realnim predmetom. Lahko pišemo:
img -webkit-box-odraža: spodaj;
Ta primer prikazuje, kako odražamo sliko spodaj (položaj) predmet. Toda v tem primeru lahko zadržimo tudi razmislek o prav, levo, in nad.
Odmik odboja
Offset se uporablja za definiranje vrzeli med refleksijo in realnim predmetom, ki se odraža. Spodaj si oglejte odrezek kode;
img -webkit-box-reflektira: pod 10px;
V zgornji kodi smo ločili odsev od realnega objekta 10 px;
- Prikaži predstavitev
Maskiranje z gradienti
Učinek refleksije, ki ga ponavadi vidimo, je fade-out na dnu in prikazuje samo polovico ali manj realnega predmeta. Če želimo ponoviti takšen učinek, lahko uporabimo CSS3 gradienti za prikrivanje predmeta, kot je to;
-webkit-box-reflektira: pod 0px -webkit-gradient (linearno, levo zgoraj, levo spodaj, od (transparentno) do (rgba (250, 250, 250, 0.1)));
Rezultat te kode bo naslednja predstavitev;
Uporabimo lahko tudi barvno zaustavitev za nadzor prehodov in boljšo preglednost:
img -webkit-box-odraža: pod 0px -webkit-gradient (linearno, levo zgoraj, levo spodaj, od (transparentno), barvno stop (70%, transparentno), do (rgba (250, 250, 250, 0,1) )));
- Prikaži predstavitev
Alternative za Firefox
Ta lastnost pa trenutno deluje le v brskalnikih Webkit (kar pomeni Safari in Chrome). Da bi dosegli enak učinek v Firefoxu, potrebujete drugo pot: uporabo -moz-element () funkcijo. Ta funkcija bo v bistvu ustvarila ali posnemala vsebino iz določenih elementov HTML. Oglejmo si naslednji primer;
Imamo sliko, ovito v a In, da bi zadržali razmislek, bomo uporabili The Na žalost še vedno ni enostavnega načina za ustvarjanje lepo učinek refleksije v Firefoxu s to prakso. Zgornja koda bo preprosto ustvarila refleksijo, brez učinka fade.moz-refleksija id;
: after psevdoelement, kot sledi; # moz-reflect: after content: ""; prikaz: blok; ozadje: -moz-element (# moz-odražaj) brez ponavljanja; width: auto; višina: 375px; margin-bottom: 100px; -moz-transform: scaleY (-1);
-moz-transform z negativno lestvico se uporablja za obrnjeni predmet obrnjen na glavo. Prav tako se prepričajte višine je dovolj natančen realnemu predmetu višine da bi se izognili nepotrebnim dodatnim linijam za pozicioniranje odseva.Dodatne reference
