CSS3-bildreflektion [CSS3-tips]
Hittills har vi diskuterat många nya fastigheter i CSS3. Utöver det finns det faktiskt några andra egenskaper som för närvarande inte ingår i CSS3 officiella specifikationer som är värda att prova, varav en är den box-reflektera egendom som initieras av Webkit. Den här egenskapen kan reflektera över de angivna objekten.
Grundläggande reflektion
Den grundläggande implementeringen är ganska intuitiv; låt oss säga att vi vill ha reflektionen under det verkliga objektet. Vi kan skriva:
img -webkit-box-reflektera: nedan;
Detta exempel visar hur vi reflekterar en bild Nedan (positionen) objektet. Men i det här fallet kan vi också hålla reflektionen över höger, vänster, och ovan.
Reflektionsförskjutning
Offset används för att definiera gapet mellan reflektionen och det reella objektet som reflekteras. Låt oss se kodavsnittet nedan;
img -webkit-box-reflektera: under 10px;
I ovanstående kod skilde vi reflektionen från det verkliga objektet av 10px;
- Visa demo
Maskering med gradienter
Den reflektionseffekt som vi vanligtvis ser är fade-out längst ner och visar bara hälften eller mindre av det verkliga objektet. För att replikera denna typ av effekt kan vi ansöka CSS3-gradienter att maskera objektet, som så;
-webkit-box-reflektera: under 0px -webkit-gradient (linjär, vänster topp, vänster botten, från (transparent) till (rgba (250, 250, 250, 0,1)));
Denna kod kommer att resultera i följande presentation;
Vi kan också använda färg-stop att styra övergångar och göra reflektionen snyggare:
img -webkit-box-reflektera: under 0px -webkit-gradient (linjär, vänster topp, vänster botten, från (transparent), färgstopp (70%, transparent), till (rgba (250, 250, 250, 0,1 )));
- Visa demo
Alternativ för Firefox
Den här egenskapen fungerar dock bara i Webkit-webbläsare (vilket betyder Safari och Chrome) för tillfället. För att leverera samma effekt i Firefox behöver du en annan rutt: använder -moz-elementet () fungera. Denna funktion kommer i huvudsak att generera eller replikera innehållet från specifika HTML-element. Låt oss ta en titt på följande exempel;
Vi har en bild insvept i en Och för att hålla reflektionen kommer vi att använda De Tyvärr finns det fortfarande inget enkelt sätt att skapa en trevlig reflektionseffekt i Firefox med hjälp av denna praxis. Koden ovan kommer helt enkelt att skapa reflektion, utan försvagningseffekten.moz-reflektera id;
:efter pseudo-elementet, som följer; # moz-reflektera: efter innehåll: ""; display: block; bakgrund: -moz-element (# moz-reflektera) no-repeat; bredd: auto; höjd: 375px; marginal-botten: 100px; -moz-transform: skala Y (-1);
-moz-transform med negativ skala används för att vända det genererade objektet upp och ner. Se också till att höjd är noggrann nog för det verkliga objektets höjd för att undvika onödiga extra linjer för positionering av reflektionen.Ytterligare referenser
