CSS3 Image Reflection [CSS3 Tips]
Tot nu toe hebben we veel nieuwe eigenschappen besproken in CSS3. Daarnaast zijn er nog een paar andere eigenschappen die momenteel niet zijn opgenomen in officiële CSS3-specificaties die de moeite waard zijn om uit te proberen, waaronder de box-weerspiegelen eigenschap die is gestart door Webkit. Deze eigenschap kan reflecteren op de opgegeven objecten.
Basisreflectie
De basisimplementatie is vrij intuïtief; laten we zeggen dat we de reflectie onder het werkelijke object willen hebben. We kunnen schrijven:
img -webkit-box-reflect: hieronder;
Dit voorbeeld laat zien hoe we een afbeelding weergeven beneden (de positie) het object. Maar in dit geval kunnen we de reflectie ook vasthouden aan de rechts, links, en bovenstaande.
Reflectie Offset
compenseren wordt gebruikt om de kloof tussen de weerspiegeling en het gereflecteerde reële object te definiëren. Laten we het onderstaande codefragment bekijken;
img -webkit-box-reflect: onder 10px;
In de bovenstaande code hebben we de reflectie van het werkelijke object gescheiden door 10px;
- Demo bekijken
Maskeren met verlopen
Het reflectie-effect dat we gewoonlijk zien, is de fade-out onderaan en toont slechts de helft of minder van het echte object. Om dit effect te repliceren, kunnen we een aanvraag indienen CSS3 verlopen om het object te maskeren, zoals zo;
-webkit-box-reflect: onder 0px -webkit-gradient (lineair, links boven, links onderaan, van (transparant), naar (rgba (250, 250, 250, 0.1)));
Deze code resulteert in de volgende presentatie;
We kunnen ook gebruiken kleur-stop om overgangen te controleren en de reflectie er leuker uit te laten zien:
img -webkit-box-reflect: onder 0px -webkit-gradiënt (lineair, linker boven, links onder, van (transparant), kleur-stop (70%, transparant), naar (rgba (250, 250, 250, 0.1 )));
- Demo bekijken
Alternatieven voor Firefox
Deze eigenschap werkt echter op dit moment alleen in Webkit-browsers (wat betekent Safari en Chrome). Om hetzelfde effect in Firefox weer te geven, hebt u een andere route nodig: gebruiken -moz-element () functie. Deze functie genereert of kopieert in feite de inhoud van specifieke HTML-elementen. Laten we het volgende voorbeeld eens bekijken;
We hebben een afbeelding ingepakt in a En om de reflectie vast te houden, zullen we gebruiken De Helaas is er nog steeds geen gemakkelijke manier om een te maken leuk reflectie-effect in Firefox met deze oefening. De bovenstaande code creëert eenvoudig de reflectie, zonder het vervagingseffect.moz-weerspiegelen ID kaart;
:na pseudo-element, als volgt; # moz-reflect: after content: ""; weergave: blok; achtergrond: -moz-element (# moz-reflect) zonder herhaling; breedte: auto; hoogte: 375 px; margin-bottom: 100px; -moz-transform: scaleY (-1);
-moz-transform met een negatieve schaal wordt gebruikt om het gegenereerde object ondersteboven te klappen. Zorg er ook voor dat de hoogte is precies genoeg voor het echte object hoogte om onnodige extra lijnen te vermijden voor het positioneren van de reflectie.Verdere referenties
