CSS3 vaizdo atspindys [CSS3 patarimai]
Iki šiol mes aptarėme daug naujų savybių CSS3. Be to, iš tikrųjų yra keletas kitų savybių, kurios šiuo metu nėra įtrauktos į CSS3 oficialiąsias specifikacijas, kurias verta išbandyti. langelis atspindi nuosavybė, kurią inicijavo „Webkit“. Ši savybė gali atspindėti nurodytus objektus.
Pagrindinis atspindys
Pagrindinis įgyvendinimas yra gana intuityvus; Tarkime, norime, kad atspindys būtų žemiau tikrojo objekto. Mes galime rašyti:
img -webkit-box-reflect: žemiau;
Šis pavyzdys rodo, kaip mes atspindime vaizdą žemiau (pozicija) objektą. Bet šiuo atveju mes taip pat galime pasvarstyti teisė, kairėje, ir aukščiau.
Atspindėjimo nuokrypis
Offset naudojamas apibrėžti atotrūkį tarp atspindžio ir atspindėto tikrojo objekto. Pažiūrėkime toliau pateiktą kodo fragmentą;
img -webkit-box-reflect: žemiau 10px;
Minėtame kode mes atskirėme atspindį nuo tikrojo objekto iki 10px;
- Peržiūrėti demonstraciją
Kaukės su gradientais
Atspindėjimo efektas, kurį paprastai matome, yra išnykimas apačioje ir tik pusė ar mažiau tikrojo objekto. Norėdami pakartoti tokio pobūdžio efektą, galime kreiptis CSS3 gradientai užmaskuoti objektą, pavyzdžiui,;
-webkit-box-reflect: žemiau 0px -webkit gradiento (tiesinė, kairė viršuje, kairėje apačioje, nuo (skaidri), iki (rgba (250, 250, 250, 0.1)));
Dėl šio kodo bus pateiktas šis pristatymas;
Taip pat galime naudoti spalvų sustojimas valdyti perėjimus ir padaryti atspindį gražesnį:
img -webkit-box-reflect: žemiau 0px -webkit-gradientas (linijinis, kairysis viršuje, kairėje apačioje, nuo (skaidrus), spalvų sustojimas (70%, skaidrus), (rgba (250, 250, 250, 0,1) )));
- Peržiūrėti demonstraciją
„Firefox“ alternatyvos
Tačiau ši funkcija veikia tik „Webkit“ naršyklėse (ty „Safari“ ir „Chrome“). Norint pateikti tą patį efektą „Firefox“, reikia kito maršruto: naudojant -moz-element () funkcija. Ši funkcija iš esmės sukurs ar replikuos turinį iš konkrečių HTML elementų. Pažvelkime į šį pavyzdį;
Mes turime įvaizdį įvynioti į a Ir, norėdami pasvarstyti, mes naudosime The Deja, vis dar nėra lengva sukurti a malonu atspindėjimo efektas „Firefox“ naudojant šią praktiką. Aukščiau pateiktas kodas paprasčiausiai sukurs atspindį be išblukimo efekto.moz-reflektuoti id;
: po pseudo elementas, taip: # moz-refl: po content: ""; ekranas: blokas; fonas: -moz-element (# moz-atspoguļoti) ne kartoti; plotis: auto; aukštis: 375px; paraštės apačia: 100px; -moz-transform: mastelisY (-1);
-moz-transform su neigiama skalė naudojama generuojamam objektui apversti. Taip pat įsitikinkite, kad aukštis yra pakankamai tikslus, kad tikrasis objektas būtų aukštis išvengti nereikalingų papildomų linijų atspindžio pozicionavimui.Kitos nuorodos
