Share
I dag vil jeg gjerne vise deg et pent trick. Vi lager et dokumentikon med ren CSS3. Enda bedre, denne effekten vil bare kreve et enkelt HTML-element.
La oss komme i gang!
Vi begynner med å legge til vårt enkelt HTML-element: en ankermerke. Dette gir mening fordi de fleste ikoner også tjener til å være lenker.
Dokumentikon
La oss stille de noe vilkårlig dimensjonene for vårt ikon. Vi skal gjøre 40x56px - bare for denne demoen. I en ekte verden applikasjon, vil du sannsynligvis ønske å redusere dette! Vær også oppmerksom på at vi må legge til skjerm: blokk, siden alle ankerkoder er inline, som standard.
.docIcon bakgrunn: #eee; bakgrunn: lineær gradient (topp, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); grense: 1px solid #ccc; display: block; bredde: 40px; høyde: 56px; stilling: i forhold; margin: 42px auto;
Vær oppmerksom på at vi, ovenfor, setter inn en posisjonskontekst for å kunne arbeide med pseudoelementer innen kort tid. Du finner at jeg bare har brukt den offisielle CSS3-syntaksen for gradienten. Du vil sannsynligvis også bruke de forskjellige nettleserprefiksene. For å øke hastigheten, kan du bruke Prefixr.com eller API-en i din favorittkodeditor. Kopier bare kodestykket over, lim det inn i Prefixrs tekstområde, og klikk på enter. Det vil da spytte ut alle de forskjellige prefikserte egenskapene, slik som:
.docIcon bakgrunn: #eee; bakgrunn: -webkit-lineær gradient (topp, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); bakgrunn: -moz-lineær gradient (topp, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); Bakgrunn: -O-lineær gradient (topp, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); bakgrunn: -ms-lineær gradient (topp, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); bakgrunn: lineær gradient (topp, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); grense: 1px solid #ccc; skjerm: blokk; bredde: 40px; høyde: 56px; stilling: relativ; margin: 42px auto;
Deretter la vi legge til litt glans ved hjelp av CSS-bokseskygger. Jeg har også brukt text-indent eiendom for å skjule teksten.
.docIcon ? -webkit-boks-skygge: innsett rgba (255,255,255,0,8) 0 1px 1px; -moz-boks-skygge: innsett rgba (255,255,255,0,8) 0 1px 1px; boks-skygge: innsett rgba (255,255,255,0,8) 0 1px 1px; text-indent: -9999em;
Deretter må vi lage en avrundet hjørneeffekt. Legg til følgende:
.docIcon ? -webkit-grense-radius: 3px 15px 3px 3px; -moz-grense-radius: 3px 15px 3px 3px; border-radius: 3px 15px 3px 3px;
Ved å overføre fire verdier kan vi angi topp, høyre, bunn og venstre radi, tilsvarende. Dette ligner måten du vil bruke marginer eller polstring på.
For å skape illusjonen av et krøllet hjørne, bruker vi generert innhold eller pseudoelementer.
Først legg til innhold :før vårt ikon. I dette tilfellet krever vi ingen spesifikk tekst. I stedet må vi lage en 15px-boks, og bruke en bakgrunnsgradient.
.docIcon: før innhold: ""; skjerm: blokk; posisjon: absolutt; topp: 0; høyre: 0; bredde: 15px; høyde: 15px; bakgrunn: #ccc; bakgrunn: -webkit-lineær gradient (45deg, #fff 0, #eee 50%, #ccc 100%); bakgrunn: -moz-lineær gradient (45deg, #fff 0, #eee 50%, #ccc 100%); bakgrunn: -o-lineær gradient (45deg, #fff 0, #eee 50%, #ccc 100%); bakgrunn: -ms-lineær gradient (45deg, #fff 0, #eee 50%, #ccc 100%); bakgrunn: lineær gradient (45deg, #fff 0, #eee 50%, #ccc 100%); -webkit-boks-skygge: rgba (0,0,0,0,05) -1px 1px 1px, innsett hvit 0 0 1px; -moz-boks-skygge: rgba (0,0,0,0,05) -1px 1px 1px, innsett hvit 0 0 1px; boks-skygge: rgba (0,0,0,0,05) -1px 1px 1px, innsett hvit 0 0 1px; grensebunn: 1px solid #ccc; border-left: 1px solid #ccc;
For at vårt genererte innhold også skal motta den øverste høyre avrundede kanten, må vi igjen bruke samme radius for å justere den.
? -webkit-grense-radius: 3px 15px 3px 3px; -moz-grense-radius: 3px 15px 3px 3px; border-radius: 3px 15px 3px 3px;
Deretter skal vi bruke :etter psuedo element for å legge til noen stiplede linjer for å representere forstørret tekst. Påfør en bredde på 60%, og a margin-left og margin-right av 20% (som tilsvarer 100%). Deretter spesifiserer vi en høyde og plasserer den på 0 0.
.docIcon: etter innhold: ""; display: block; stilling: absolutt; venstre: 0; topp: 0; bredde: 60%; margin: 22px 20% 0; høyde: 15px;
Å lage et sett med linjer er litt vanskelig. Hvis vi er klare, kan vi imidlertid bruke CSS-gradienter for å oppnå denne effekten. Først del opp den totale høyden med fem, og sett hver blokk med en solid fylling. Se bildet nedenfor for å få et tydeligere eksemplar på denne tenkningen. Nifty, ay? Det er en fin teknikk å ha i verktøylengden.
.docIcon: etter ? bakgrunn: #ccc; bakgrunn: -webkit-lineær gradient (topp, #ccc, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80% #ccc 80%, #ccc 100%); bakgrunn: -moz-lineær gradient (topp, #ccc, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80% #ccc 80%, #ccc 100%); Bakgrunn: -o-lineær gradient (topp, #ccc, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80% #ccc 80%, #ccc 100%); bakgrunn: -ms-lineær gradient (topp, #cc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80% #ccc 80%, #ccc 100%); bakgrunn: lineæ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 Nyt du innlegget? Har andre lignende triks? I så fall, lenke til dem i kommentarene nedenfor.
Accentsconagua