CSS3 Image Reflection [CSS3 Tips]
Så langt har vi diskutert mange nye eiendommer i CSS3. Utover det er det faktisk noen andre egenskaper som for øyeblikket ikke er inkludert i CSS3-offisielle spesifikasjoner som er verdt å prøve ut, hvorav en er den box-reflektere eiendom som er initiert av Webkit. Denne egenskapen kan reflektere over de oppgitte objektene.
Grunnleggende refleksjon
Den grunnleggende implementeringen er ganske intuitiv; la oss si, vi vil ha refleksjonen under det virkelige objektet. Vi kan skrive:
img -webkit-box-reflektere: under;
Dette eksemplet viser hvordan vi reflekterer et bilde under (posisjonen) objektet. Men i dette tilfellet kan vi også holde refleksjonen til Ikke sant, venstre, og ovenfor.
Refleksjon Offset
offset brukes til å definere gapet mellom refleksjonen og det reelle objektet som reflekteres. La oss se kodestykket under;
img -webkit-box-reflektere: under 10px;
I koden ovenfor separerte vi refleksjonen fra det virkelige objektet av 10px;
- Se demo
Maskerer med gradienter
Refleksjonseffekten som vi vanligvis ser er fade-out nederst og viser bare halvparten eller mindre av det virkelige objektet. For å gjenskape denne typen effekt, kan vi søke CSS3 Gradienter å maskere objektet, slik som det;
-webkit-boks-refleksjon: under 0px-webkit-gradient (lineær, venstre topp, venstre bunn, fra (gjennomsiktig) til (rgba (250, 250, 250, 0,1)));
Denne koden vil resultere i følgende presentasjon;
Vi kan også bruke farge-stopp å kontrollere overganger og få refleksjonen til å se bedre ut:
img -webkit-box-reflektere: under 0px-webkit-gradient (lineær, venstre topp, venstre bunn, fra (gjennomsiktig), fargestopp (70%, gjennomsiktig), til (rgba (250, 250, 250, 0,1 )));
- Se demo
Alternativer for Firefox
Denne egenskapen fungerer imidlertid bare i Webkit-nettlesere (som betyr Safari og Chrome) for øyeblikket. For å levere samme effekt i Firefox, trenger du en annen rute: bruk -moz-element () funksjon. Denne funksjonen vil i hovedsak generere eller replikere innholdet fra bestemte HTML-elementer. La oss ta en titt på følgende eksempel;
Vi har et bilde innpakket i en Og for å holde refleksjonen, vil vi bruke De Dessverre er det fortsatt ingen enkel måte å lage en hyggelig refleksjonseffekt i Firefox ved hjelp av denne praksisen. Koden ovenfor vil ganske enkelt skape refleksjonen, uten fading-effekten.moz-reflektere id;
:etter pseudo-element, som følger; # moz-reflektere: etter innhold: ""; skjerm: blokk; bakgrunn: -moz-element (# moz-reflekter) no-repeat; bredde: auto; høyde: 375px; margin-bunn: 100px; -moz-transform: skalaY (-1);
-moz-transform med negativ skala brukes til å vende det genererte objektet opp ned. Sørg også for at høyde er presis nok til det virkelige objektets høyde for å unngå unødvendige ekstra linjer for å posisjonere refleksjonen.Ytterligere referanser
