CSS3 Képvisszaverődés [CSS3 Tippek]
Eddig sok új tulajdonságot vizsgáltunk CSS3. Ezen túlmenően van néhány más tulajdonság, amelyek jelenleg nem szerepelnek a CSS3 hivatalos specifikációiban, amelyeket érdemes kipróbálni, amelyek közül az egyik a következő: box-tükrözik tulajdonság által kezdeményezett tulajdonság Webkit. Ez a tulajdonság tükrözheti a megadott objektumokat.
Alapvető gondolkodás
Az alapvető végrehajtás meglehetősen intuitív; mondjuk, azt akarjuk, hogy a reflexió az igazi objektum alatt legyen. Tudunk írni:
img -webkit-box-reflektor: alább;
Ez a példa megmutatja, hogyan tükrözünk egy képet lent (a pozíció) az objektumot. De ebben az esetben is elmondhatjuk a gondolkodást jobb, balra, és felett.
Reflexiós eltolás
Eltolt a reflexió és a visszavert valós objektum közötti különbség meghatározására szolgál. Lássuk az alábbi kódrészletet;
img -webkit-box-reflektor: 10px alatt;
A fenti kódban elkülönítettük a tükröződést az igazi objektumtól 10px;
- Demó megtekintése
Maszkolás a színátmenetekkel
A reflexiós hatás, amit általában látunk, az alsó fade-out, és csak az igazi objektum felét vagy kevesebbét mutatja. Ilyen effektus ismétléséhez alkalmazhatjuk CSS3 gradiensek elrejti az objektumot;
-webkit-box-reflektor: 0px -webkit-gradiens alatt (lineáris, bal felső, bal alsó, (átlátszó), (rgba (250, 250, 250, 0.1)));
Ez a kód a következő bemutatót eredményezi;
Azt is használhatjuk szín-stop az átmenetek vezérlése és a reflexió szépebbé tétele:
img -webkit-box-reflektor: 0px -webkit-gradiens alatt (lineáris, bal felső, bal alsó, (átlátszó), színes stop (70%, átlátszó), (rgba (250, 250, 250, 0,1) )));
- Demó megtekintése
A Firefox alternatívái
Ez a tulajdonság azonban csak a Webkit böngészőkben működik (azaz a Safari és a Chrome). Ahhoz, hogy ugyanazt a hatást érje el a Firefoxban, újabb útvonalra van szüksége: használjon -moz-elem () funkció. Ez a függvény lényegében bizonyos HTML-elemek tartalmát generálja vagy replikálja. Nézzük meg a következő példát;
Van egy képünk, amelyet egy És a reflexió megtartásához fogjuk használni A Sajnos még mindig nincs egyszerű módja a szép tükrözi a Firefoxot a gyakorlat alkalmazásával. A fenti kód egyszerűen létrehozza a visszaverődést, a fade effektus nélkül.moz-tükrözik id;
:után pszeudoelem, alábbiak szerint; # moz-reflektív: content: "" után; kijelző: blokk; háttér: -moz-elem (# moz-reflektív) nem-ismétlés; szélesség: auto; magasság: 375px; margin-bottom: 100px; -moz-transform: skálaY (-1);
-moz-transzformáció negatív skála segítségével a generált objektumot fejjel lefelé fordíthatjuk. Győződjön meg róla, hogy a magasság elég pontos az igazi objektumhoz magasság hogy elkerüljük a szükségtelen többletvonalakat a reflexió elhelyezéséhez.További hivatkozások
