Box-reflect-egenskapen är bara en av många fantastiska nya CSS3-effekter som Webkit tar med på bordet. Tyvärr är det inte lättast att använda. Det finns mycket syntax som kan vara förvirrande och idag kommer vi att sikta igenom det och förklara det i detalj så att du kan hänga på det.
Det är viktigt att notera att, vid denna punkt, box-reflekteras endast av Webkit-webbläsare. Det är en överflödig visuell effekt så att du kan använda den så länge du accepterar att den inte kommer att göra något annat än Chrome och Safari.
Grundläggande syntax: Riktningen är allt du behöver
Trots det faktum att det i praktiken är så komplicerat, -webkit-box-reflektera börjar extremt lätt att använda. Allt du behöver göra för att lägga till en reflektion till ett element är att förklara egenskapen och ställa in riktning värde.
I exemplet ovan ställer jag in riktning värde till Nedan. Helt 98% av tiden eller mer är detta det enda värdet du behöver. Men bara om du verkligen blir kreativ kan du faktiskt förklara en reflektion i någon av fyra riktningar:
Vilken riktning du väljer väljer webbläsaren det som en ankarpunkt och bläddrar bilden. Så till exempel om du ändrade vårt ursprungliga exempel till ett värde av höger, du skulle få följande.
Offset
Efter riktning värde kan du valfritt ställa in en offset värde. Detta är ganska grundläggande och lägger helt enkelt avståndet mellan bilden och dess reflektion, nästan som om bilden svängde över en glasyta. Så här fungerar det:
Här är en förhandsgranskning av vad skillnaden är mellan ett värde på? 0? och ett värde av? 20px ?.
Intressant nog, du är inte begränsad till pixlar som en mätning. Här är några andra värden som också fungerar:
Webkit Gradients
Varför pratar vi om webkitgradienter, är det inte här en artikel om reflektioner? Svaret är att det tredje värdet, mask-box-bild, använder olika komplicerade verktyg för att uppnå vissa avancerade effekter, den primära varelsen -webkit-gradient. Du kan helt enkelt inte förstå hur CSS-reflektioner fungerar utan att först förstå gradienter.
Det finns flera typer av gradienter och webbläsare skiljer sig åt i syntaxen, men i den här artikeln ska vi hålla sig till Webkit linjära gradienter. Låt oss hoppa in och titta på koden för en grundläggande Webkit-gradient.
Denna kod resulterar i följande gradient:
Denna kod kan vara förvirrande så låt oss bryta ner den. Det finns tre huvuddelar: typ, start / stopppunkt och från / till färg. Det finns ett par olika typer men vi behöver inte komma in i någonting annat än linjära gradienter så det här värdet kommer att förbli detsamma.
Start- och stopppunkter gör att du kan vinkla din lutning i den riktning du använder. I exemplet ovan började vi i mitten av toppen och slutade i mitten av botten, vilket resulterade i en perfekt vertikal gradering av färg. Om vi börjar spela med dessa kan vi dock nå olika resultat.
Den här gången började vi längst upp till vänster och slutade på höger sida, vilket resulterar i en vinklad gradient som den nedan.
Likaså från och till värden låter dig ställa in färgen i början och slutet av gradienten. I exemplen ovan gick vi från svart till vitt men du kan använda alla färger du vill ha i något av CSS-färgformatet du vill ha.
Här är ett annat exempel som skapar en fin röd gradient.
Färgstopp
Förutom start- och stopppunkter kan du också deklarera olika färgstopp under vägen. I grund och botten, vad du gör berättar webbläsaren, vid punkt? X ?, gör gradienten den här färgen.
Här är ett exempel på en gradient som går från svart till svart, vilket normalt resulterar i en fast färg. Vi har dock kastat ett färgstopp på 50% och satt den till vitt, vilket resulterar i en gradient som börjar på svart, bleknar till vit halvvägs och sedan svävar tillbaka till svart.
Maskering av reflektionen
Nu när vi vet hur gradienter fungerar har vi den tredje biten i vårt Webkit-reflektionspussel. Efter att ha förklarat riktning och offset värden, ser din reflektion fortfarande ganska tråkigt ut, men genom att använda en gradientmask har vi plötsligt mycket mer kontroll.
Låt oss kasta in gradientsyntaxen och se vad vi gör med:
Som du kan se här gick vi från topp till botten och kastade en kurvkula genom att deklarerade från färgen är så transparent. Eftersom vi väsentligen bygger en mask, tillåter den genomskinliga färgen gradienten att blekna ut över vilken bakgrund som helst. På samma sätt representerar vinkeln av gradienten helt enkelt fullständig opacitet för reflektionen vid den tiden.
Denna kod resulterar i följande bild:
Som du kan se, medger vi att reflektion med gradienten ger en viss dynamisk nivå som ger en ledning till mer realism som vi tidigare uppnådde. En av de mest förvirrande sakerna här är det, även om vi förklarade transparent längst upp i lutningen och helt ogenomskinlig i botten, vad vi verkligen får är det motsatta! Detta beror på att vår reflektion är en upp och ned-version av bilden, så allting vänds.
Om detta förvirrar dig är allt du behöver göra att vända alla gradientvärdena. Följande kod kommer att resultera i samma gradient och kan vara lättare för vissa att förstå eftersom den börjar på vit och slutar på transparent, precis som ovanstående resultat.
Förkorta reflektionen
Vid denna tidpunkt har du kanske märkt att vår reflektion är ganska lång. I de fall där du arbetar med en stor bild som vi är, kommer du förmodligen att förkorta den gradienten så att den blir mer transparent än tidigare.
Så hur fungerar det här jobbet du frågar? Det är här de färgstoppar kommer till spel. Vad vi vill göra är att skapa en lutning från transparent till vitt och sätt sedan in ett genomskinligt färgstopp någonstans under vägen, vilket effektivt slår ut reflektionen tidigare. Låt oss ta en titt på koden.
Minskar reflektionens opacitet
Varje diskussion jag någonsin har sett för box-reflektion stannar där. Tyvärr tror jag att vår gradient fortfarande inte är mycket trovärdig. När jag skapar reflektioner i Photoshop, minskar jag alltid opaciteten hos reflektionsskiktet. Sällan skulle du se en verklig reflektion som är så skarp som föremålet det reflekterar!
Så, vid den här tiden ser vår reflektion dum ut och vi behöver ett sätt att minska dess opacitet. Den uppenbara lösningen som jag först trodde hade försökt visat sig vara den rätta: rgba. Eftersom de färger vi förklarar i gradienten verkligen bara definierar gradientens genomskinlighet, använder vi rgba istället för ren vit gör det möjligt för oss att sänka opaciteten och skapa ett mycket mer trovärdigt resultat.
I koden nedan bytte jag helt enkelt ordet "vit" för dess rgba ekvivalent vid 20% (0,2).
Här är två olika resultat med endast alfa värdet av rgba-egendomen manipuleras. Som du kan se är resultatet mycket bättre än vi fick med fast vit!
Använda en bildmask
Här är ett litet knep jag lärde mig av Peter Gasston i The Book of CSS3. I stället för att bygga din mask med CSS-gradienter kan du faktiskt bara använda en bild. Med hjälp av denna metod kan du komma med några ganska galna resultat.
Allt du gör är att deklarera en källadress, precis som om du satt en bakgrundsbild på ett element. Trots nackdelen med att bli tvungen att ladda i en bild är koden faktiskt mycket renare.
För att testa det här skapade jag och sparade två separata PNG-filer med genomskinliga bakgrunder. En innehåller bara solid svart medan den andra använder en radiell gradient.
När vi använder biten ovan för att tillämpa dessa bilder på vår reflektion, är här vad vi får:
Jag kan inte för livet av mig tänka på en praktisk användning för denna teknik, men om du lägger lite kreativ tanke in i det är möjligheterna oändliga.
Layouteffekter
När du använder -webkit-box-reflektera, det är viktigt att förstå hur reflektionen kommer att interagera med din layout. Intressant nog, det gör det inte!
Reflektionen är mer en en bakgrundsbild än ett element som påverkar dokumentets flöde. För att se hur detta fungerar, här är två exempel, den första med en reflektion och den andra utan.
Som en udda och oväntad bieffekt märker du att även om reflektionen till vänster inte ändrar sidlayouten, är det på något sätt röra med texten i texten.
Kombinera med andra CSS-effekter
En sista anteckning om reflektioner: du kan kombinera dem med andra rena CSS-effekter med bra resultat. Till exempel, här är ett exempel på en bild med rundade hörn och en annan med en gräns som tillämpas. Båda effekterna är perfekt representerade i reflektionen.
Det är dock inte så Allt CSS-effekter återges i reflektionen. Till exempel här är vad som händer om du slänger in en box-shadow. Lägg märke till hur det bara visas på originalbilden och inte i reflektionen.
Slutsats
Sammanfattningsvis är allt du verkligen behöver för att skapa en fungerande reflektion en riktning värde. Men genom att använda riktning, offset och a lutning tillsammans kan du uppnå mycket bättre resultat och effektivt tona ut lutningen.
Effekten förbättras väsentligt om du använder rgba för att minska reflektionens övergripande opacitet. Du kan sedan applicera gränser, avrundade hörn och olika andra effekter och de kommer automatiskt att appliceras på reflektionen.
Slutligen, om du vill bli riktigt galen kan du använda en bild för att maskera reflektionen. Bilden används bara för att applicera genomskinlighet, så där det finns en solid färg, kommer din reflektion att vara ogenomskinlig och där det finns insyn, kommer din reflektion att vara transparent.