CSS3 pildi peegeldus [CSS3 nõuanded]
Siiani oleme arutanud palju uusi omadusi CSS3. Peale selle on tegelikult veel mõningaid muid omadusi, mida praegu CSS3 ametlikesse spetsifikatsioonidesse ei kuulu, mida tasub proovida, millest üks on kasti peegeldamine poolt algatatud vara Webkit. See omadus võib kajastada määratud objekte.
Põhiline peegeldus
Põhiline rakendamine on üsna intuitiivne; Oletame, et me tahame peegeldust tegeliku objekti all. Me saame kirjutada:
img -webkit-box-reflect: allpool;
See näide näitab, kuidas me kujutist peegeldame allpool (asukoht) objekti. Kuid sellisel juhul võime ka peegeldust pidada õigus, vasakule, ja eespool.
Peegeldushälve
Nihe kasutatakse peegelduse ja peegeldunud tegeliku objekti vahelise vahe määramiseks. Vaatame allpool olevat koodilõiget;
img -webkit-box-reflection: alla 10 px;
Ülaltoodud koodis eraldasime peegelduse tegelikust objektist 10tk;
- Kuva demo
Peegeldamine maskidega
Peegeldav mõju, mida me tavaliselt näeme, on fade-out allosas ja ainult pool või vähem tegelikust objektist. Sellise efekti kordamiseks võime taotleda CSS3 gradientid varjata objekti, nagu seda;
-webkit-box-reflect: allpool 0px -webkit-gradienti (lineaarne, vasakpoolne, vasakpoolne, (läbipaistev), (rgba (250, 250, 250, 0.1)));
See kood toob kaasa järgmise esitluse;
Me saame kasutada ka värvipeatus üleminekute kontrollimiseks ja peegelduse ilusamaks muutmiseks:
img -webkit-box-reflect: alla 0px -webkit-gradient (lineaarne, vasakul üleval, vasakul all, alates (läbipaistev), värvipeatus (70%, läbipaistev), kuni (rgba (250, 250, 250, 0,1) )));
- Kuva demo
Firefoxi alternatiivid
See omadus töötab siiski ainult Webkit brauserites (mis tähendab Safari ja Chrome). Sama efekti saavutamiseks Firefoxis vajate teist marsruuti: kasutades -moz-element () funktsiooni. See funktsioon tekitab sisuliselt või kordab teatud HTML-elementide sisu. Vaatame järgmist näidet;
Meil on pilt, mis on pakitud a Ja peegelduse hoidmiseks kasutame me The Kahjuks pole veel lihtne moodustada a kena peegeldav mõju Firefoxis, kasutades seda tava. Ülaltoodud kood loob lihtsalt peegelduse ilma fade efekti.moz-reflektor id;
: pärast pseudoelement, järgnevalt; # moz-refl: pärast sisu: "; kuva: plokk; taust: -moz-element (# moz-refleks) no-kordus; laius: auto; kõrgus: 375px; margin-bottom: 100px; -moz-transform: scaleY (-1);
-moz-transform negatiivse skaalaga kasutatakse tekitatud objekti tagurpidi. Veenduge ka, et kõrgus on tegelikule objektile piisavalt täpne kõrgus et vältida asjatut lisarida peegelduse paigutamiseks.Edasised viited
