CSS3 attēla atspoguļojums [CSS3 padomi]
Līdz šim mēs esam apsprieduši daudz jaunu īpašumu CSS3. Bez tam patiešām ir dažas citas īpašības, kas pašlaik nav iekļautas CSS3 oficiālajās specifikācijās, kuras ir vērts izmēģināt, no kurām viena ir lodziņš atspoguļo īpašums, ko ierosina Webkit. Šī īpašība var atspoguļot norādītos objektus.
Pamata pārdomas
Pamata īstenošana ir diezgan intuitīva; teiksim, mēs vēlamies, lai atspoguļojums būtu zem patiesā objekta. Mēs varam rakstīt:
img -webkit-box-reflect: zemāk;
Šis piemērs parāda, kā mēs atspoguļojam attēlu zemāk (pozīcija) objektu. Bet šajā gadījumā mēs varam turēt arī pārdomas pa labi, pa kreisi, un virs.
Pārdomu nobīde
Offset tiek izmantots, lai noteiktu atstarpi starp atspoguļojumu un reālo objektu. Apskatīsim tālāk redzamo koda fragmentu;
img -webkit-box-reflect: zem 10px;
Iepriekš minētajā kodā mēs atdalījām atspoguļojumu no reālā objekta līdz 10px;
- Skatīt demonstrāciju
Masēšana ar gradientiem
Pārdomu efekts, ko mēs parasti redzam, ir izbalēšana apakšā un tikai puse vai mazāk no reālā objekta. Lai atkārtotu šāda veida efektu, mēs varam pieteikties CSS3 gradienti maskēt objektu, piemēram,;
-webkit-box-reflect: zem 0px -webkit gradienta (lineāra, kreisā augšējā, kreisā apakšējā, no (caurspīdīga) līdz (rgba (250, 250, 250, 0.1)));
Šis kods radīs šādu prezentāciju;
Mēs varam izmantot arī krāsu apstāšanās lai kontrolētu pārejas un padarītu refleksiju patīkamāku:
img -webkit-box-refleksija: zem 0px -webkit-gradienta (lineāra, kreisā augšējā, kreisā apakšējā, no (caurspīdīga), krāsu apstāšanās (70%, caurspīdīga), līdz (rgba (250, 250, 250, 0,1) )));
- Skatīt demonstrāciju
Firefox alternatīvas
Šī īpašība tomēr darbojas tikai Webkit pārlūkprogrammās (kas nozīmē Safari un Chrome). Lai nodrošinātu tādu pašu efektu Firefox, jums ir nepieciešams cits maršruts: izmantojot -moz-element () funkciju. Šī funkcija būtībā radīs vai atkārto konkrētu HTML elementu saturu. Apskatīsim šādu piemēru;
Mums ir attēls, kas iesaiņots a Un, lai noturētu pārdomas, mēs to izmantosim The Diemžēl vēl nav viegli izveidot a jauki atspoguĜošanas efekts Firefox, izmantojot šo praksi. Iepriekš minētais kods vienkārši radīs pārdomas, bez izbalināšanas efekta.moz-refleksija id;
: pēc pseidoelements, sekojoši; # moz-reflekts: pēc saturs: "; displejs: bloks; fons: -moz-element (# moz-reflekts) nav atkārtots; platums: auto; augstums: 375px; margas apakšā: 100px; -moz-transform: mērogsY (-1);
-moz-transform ar negatīvu skalu izmanto, lai apgrieztu radīto objektu otrādi. Tāpat pārliecinieties, vai augstums ir pietiekami precīzs, lai reālais objekts augstums lai izvairītos no nevajadzīgām papildu līnijām pārdomu pozicionēšanai.Citas atsauces
