CSS3 Image Reflection [CSS3 Tips]
Indtil videre har vi diskuteret mange nye ejendomme i CSS3. Udover det er der faktisk et par andre egenskaber, som i øjeblikket ikke er med i CSS3 officielle specifikationer, der er værd at prøve, hvoraf den ene er den box-afspejle ejendom, der er initieret af Webkit. Denne ejendom kan afspejle de angivne objekter.
Grundlæggende refleksion
Den grundlæggende implementering er ret intuitiv; lad os sige, vi ønsker refleksionen under det virkelige objekt. Vi kan skrive:
img -webkit-box-reflektere: nedenfor;
Dette eksempel viser, hvordan vi afspejler et billede under (positionen) objektet. Men i dette tilfælde kan vi også holde refleksionen på ret, venstre, og over.
Refleksionsforskydning
Offset bruges til at definere kløften mellem refleksionen og det reelle objekt, der reflekteres. Lad os se kodestykket nedenfor;
img -webkit-box-reflektere: under 10px;
I ovenstående kode adskilt vi refleksionen fra det virkelige objekt af 10px;
- Se Demo
Maskering med gradienter
Den reflektionseffekt, vi almindeligvis ser, er fade-out i bunden og viser kun halvdelen eller mindre af det virkelige objekt. For at gentage denne slags effekt kan vi søge CSS3 Gradienter at maskere objektet som sådan;
-webkit-box-reflektere: under 0px -webkit-gradient (lineær, venstre top, venstre bund, fra (transparent) til (rgba (250, 250, 250, 0,1)));
Denne kode vil resultere i følgende præsentation;
Vi kan også bruge farve-stop- at styre overgange og gøre refleksionen mere pæn:
img -webkit-box-reflektere: under 0px -webkit-gradient (lineær, venstre top, venstre bund, fra (gennemsigtig), farvestop (70%, gennemsigtig) til (rgba (250, 250, 250, 0,1 )));
- Se Demo
Alternativer til Firefox
Denne egenskab arbejder dog kun i Webkit-browsere (hvilket betyder Safari og Chrome). For at levere samme effekt i Firefox, har du brug for en anden rute: ved hjælp af -Moz-element () fungere. Denne funktion vil i det væsentlige generere eller replikere indholdet fra specifikke HTML-elementer. Lad os tage et kig på følgende eksempel;
Vi har et billede indpakket i en Og for at holde refleksionen vil vi bruge Det Desværre er der stadig ingen nem måde at oprette en pæn reflektionseffekt i Firefox ved hjælp af denne praksis. Koden ovenfor vil simpelthen skabe refleksionen uden fadeffekten.Moz-afspejle id;
:efter pseudo-element, som følger; # moz-reflektere: efter indhold: ""; display: blok; baggrund: -moz-element (# moz-reflekter) no-repeat; bredde: auto; højde: 375px; margin-bund: 100px; -moz-transform: skalaY (-1);
-Moz-transformation med negativ skala bruges til at vende det genererede objekt op og ned. Sørg også for at højde er præcis nok til det virkelige objekts højde for at undgå unødvendige ekstra linjer til positionering af refleksionen.Yderligere referencer
