Share
Idag vill jag visa dig ett snyggt trick. Vi skapar en dokumentikon med ren CSS3. Ännu bättre, den här effekten kräver bara ett enda HTML-element.
Låt oss börja!
Vi börjar med att lägga till vårt enda HTML-element: en ankare-tagg. Det här är meningsfullt, eftersom de flesta ikoner också tjänar till att vara länkar.
Dokument Ikon
Låt oss ange de lite godtyckliga dimensionerna för vår ikon. Vi gör 40x56px - helt enkelt för den här demo. I en verklig världsapplikation kommer du sannolikt att minska detta! Också, kom ihåg att vi måste lägga till display: block, eftersom alla ankarkoder är inline, som standard.
.docIcon bakgrund: #eee; bakgrund: linjär gradient (topp, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); gränsen: 1px solid #ccc; display: block; bredd: 40 bildpunkter; höjd: 56px; positioner: relativ; marginal: 42px auto;
Observera att vi ovan ställer in en positioneringskontext för att snabbt kunna arbeta med pseudoelement. Du kommer att märka att jag bara har använt den officiella CSS3-syntaxen för gradienten. Du kommer sannolikt att vilja använda de olika webbläsarprefixen också. För att påskynda saker kan du använda Prefixr.com eller dess API i din favorit kodredigerare. Kopiera kodfliken ovan, klistra in den i Prefixr textarea och klicka på Enter. Det kommer då att spotta ut alla de olika prefixerade egenskaperna, som så:
.docIcon bakgrund: #eee; bakgrund: -webkit-linjär gradient (topp, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); bakgrund: -moz-linjär gradient (topp, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); bakgrund: -o-linjär gradient (topp, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); bakgrund: -ms-linjär gradient (topp, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); bakgrund: linjär gradient (topp, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); gränsen: 1px solid #ccc; display: block; bredd: 40px; höjd: 56px; position: relativ; marginal: 42px auto;
Låt oss sedan lägga till lite glans med hjälp av CSS-boxskuggor. Jag har också använt text-strecksatsen egendom för att dölja texten.
.docIcon ? -webkit-box-skugga: inset rgba (255,255,255,0,8) 0 1px 1px; -moz-box-skugga: inset rgba (255,255,255,0,8) 0 1px 1px; boxskugga: inset rgba (255,255,255,0,8) 0 1px 1px; text-indent: -9999em;
Därefter måste vi skapa en rundad hörnseffekt. Lägg till följande:
.docIcon ? -webkit-gränsradien: 3px 15px 3px 3px; -moz-gränsen-radie: 3px 15px 3px 3px; gränsstråle: 3px 15px 3px 3px;
Genom att ge fyra värden kan vi ange topp-, höger-, botten- och vänsterradien i enlighet därmed. Detta liknar hur du skulle tillämpa marginaler eller vadderingar.
För att skapa en illusion av ett krökt hörn, använder vi genererat innehåll eller pseudoelement.
Lägg först till innehåll :innan vår ikon. I det här fallet behöver vi inte någon specifik text. I stället behöver vi skapa en 15px-ruta och tillämpa en bakgrundsgradient.
.docIcon: före innehåll: ""; display: block; position: absolut; topp: 0; höger: 0; bredd: 15px; höjd: 15px; bakgrund: #ccc; bakgrund: -webkit-linjär gradient (45deg, #fff 0, #eee 50%, #ccc 100%); bakgrund: -moz-linjär gradient (45deg, #fff 0, #eee 50%, #ccc 100%); bakgrund: -o-linjär gradient (45deg, #fff 0, #eee 50%, #ccc 100%); bakgrund: -ms-linjär gradient (45deg, #fff 0, #eee 50%, #ccc 100%); bakgrund: linjär gradient (45deg, #fff 0, #eee 50%, #ccc 100%); -webkit-box-skugga: rgba (0,0,0,0,05) -1px 1px 1px, insetvit 0 0 1px; -moz-box-skugga: rgba (0,0,0,0,05) -1px 1px 1px, insetvit 0 0 1px; boxskugga: rgba (0,0,0,0,05) -1px 1px 1px, insetvit 0 0 1px; border-bottom: 1px solid #ccc; gränsen till vänster: 1px solid #ccc;
För att vårt genererade innehåll också ska få den högra avrundade kanten måste vi på nytt tillämpa samma radier för att anpassa den.
? -webkit-gränsradien: 3px 15px 3px 3px; -moz-gränsen-radie: 3px 15px 3px 3px; gränsstråle: 3px 15px 3px 3px;
Nästa ska vi använda :efter psuedo-element för att lägga till några streckade linjer för att representera zoomad text. Applicera en bredd på 60% och a margin-vänster och margin-höger av 20% (vilket motsvarar 100%). Därefter specificerar vi en höjd och placerar den på 0 0.
.docIcon: efter innehåll: ""; display: block; position: absolute; vänster: 0; top: 0; bredd: 60%; marginal: 22px 20% 0; höjd: 15px;
Att skapa en uppsättning linjer är lite knepig. Om vi är kloka kan vi dock använda CSS-gradienter för att uppnå denna effekt. Först dela den totala höjden med fem och ställ in varje block med en fast fyllning. Se bilden nedan för en tydligare exemplifiering av detta tänkande. Nyfty, ay? Det är en bra teknik att ha i ditt verktygsband.
.docIcon: efter ? bakgrund: #ccc; bakgrund: -webkit-linjär gradient (topp, #ccc, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80% #ccc 80%, #ccc 100%); bakgrund: -moz-linjär gradient (topp, #cc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80% #ccc 80%, #ccc 100%); bakgrund: -o-linjär gradient (topp, #ccc, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80% #ccc 80%, #ccc 100%); bakgrund: -ms-linjär gradient (topp, #cc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80% #ccc 80%, #ccc 100%); bakgrund: linjär gradient (topp, #cc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80 %, #ccc 100%);
Live-demo Njut du av inlägget? Har andra liknande knep? Om så är fallet, länka till dem i kommentarerna nedan.
Accentsconagua