Share
Astăzi, aș vrea să vă arăt un truc bun. Vom crea o pictogramă document cu CSS3 pură. Chiar mai bine, acest efect va necesita doar un singur element HTML.
Să începem!
Vom începe prin adăugarea elementului HTML unic: o etichetă de ancorare. Acest lucru are sens, deoarece majoritatea icoanelor servesc și pentru legături.
Document Icon
Să stabilim dimensiunile oarecum arbitrare pentru pictograma noastră. Vom face 40x56 px - pur și simplu pentru această demonstrație. Într-o aplicație din lumea reală, probabil veți dori să reduceți acest lucru! De asemenea, rețineți că trebuie să adăugăm afișare: blocare, deoarece toate etichetele de ancorare sunt în linie, în mod implicit.
.docIcon background: #eee; fundal: gradient liniar (top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); frontieră: 1px solid #ccc; display: block; lățime: 40px; înălțime: 56px; Poziția: relativă; margine: 42 pixeli automat;
Rețineți că, mai sus, setăm un context de poziționare pentru a lucra în scurt timp cu pseudo elemente. Veți observa că am folosit doar sintaxa oficială CSS3 pentru gradient. Veți dori probabil să utilizați și diferitele prefixe ale browserului. Pentru a grăbi lucrurile, puteți folosi Prefixr.com sau API-ul acestuia în editorul dvs. de cod preferat. Pur și simplu copiați fragmentul de cod de mai sus, inserați-l în textarea lui Prefixr și faceți clic pe Enter. Acesta va scuipa apoi toate proprietățile prefixate diferite, cum ar fi:
.docIcon background: #eee; fundal: -webkit-gradient linear (top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); fundal: -moz-linear-gradient (top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); fundal: -o-gradient linear (top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); fundal: -ms-linear-gradient (top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); fundal: gradient liniar (top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); frontieră: 1px solid #ccc; afișare: bloc; lățime: 40px; înălțime: 56px; poziție: relativă; margine: 42 pixeli automat;
Apoi, să adăugăm câteva strălucire folosind umbrele cutiei CSS. Am folosit de asemenea text-liniuță proprietate pentru a ascunde textul.
.docIcon ? -webkit-box-shadow: inscripție rgba (255,255,255,0.8) 0 1px 1px; -moz-box-shadow: inset rgba (255,255,255,0.8) 0 1px 1px; box-shadow: inset rgba (255,255,255,0.8) 0 1px 1px; text-liniuță: -9999em;
Apoi, trebuie să creați un efect de colț rotunjit. Adăugați următoarele:
.docIcon ? -webkit-border-radius: 3px 15px 3px 3px; -moz-border-radius: 3px 15px 3px 3px; raza de graniță: 3px 15px 3px 3px;
Prin trecerea a patru valori, putem specifica raza de sus, dreapta, fund și stânga, în consecință. Acest lucru este similar cu modul în care aplicați margini sau plăcuțe.
Pentru a crea iluzia unui colț curbat, vom folosi conținutul generat sau pseudo elemente.
Mai întâi, adăugați conținut :inainte de icoana noastra. În acest caz, nu solicităm niciun text specific. În schimb, trebuie să creați o casetă de 15px și să aplicați un gradient de fundal.
.docIcon: înainte de content: ""; afișare: bloc; poziția: absolută; top: 0; dreapta: 0; lățime: 15px; înălțime: 15px; fundal: #ccc; fundal: -webkit-gradient linear (45deg, #fff 0, #eee 50%, #ccc 100%); fundal: -moz-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%); fundal: -o-gradient linear (45deg, #fff 0, #eee 50%, #ccc 100%); fundal: -ms-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%); fundal: gradient linear (45deg, #fff 0, #eee 50%, #ccc 100%); -webkit-box-shadow: rgba (0,0,0,0,05) -1px 1px 1px, inset alb 0 0 1px; -moz-box-shadow: rgba (0,0,0,0,05) -1px 1px 1px, inset alb 0 0 1px; box-shadow: rgba (0,0,0,0,05) -1px 1px 1px, inset alb 0 0 1px; frontieră-fund: 1px solid #ccc; frontieră-stânga: 1px solid #ccc;
Pentru ca conținutul nostru generat să primească și marginea rotundă de sus-dreapta, trebuie să aplicăm din nou aceleași raze pentru a alinia.
? -webkit-border-radius: 3px 15px 3px 3px; -moz-border-radius: 3px 15px 3px 3px; raza de graniță: 3px 15px 3px 3px;
Apoi, vom folosi :după elementul psuedo pentru a adăuga câteva linii punctate pentru a reprezenta textul mărit. Aplicați o lățime de 60% și a -Marginea din stânga și margin-dreapta de 20% (care este egal cu 100%). Apoi, specificăm o înălțime și o poziționăm 0 0.
.docIcon: după content: ""; display: block; Poziția: absolută; stânga: 0; top: 0; lățime: 60%; margine: 22px 20% 0; înălțime: 15px;
Crearea unui set de linii este un pic dificil. Dacă suntem inteligenți, cu toate acestea, putem folosi gradienții CSS pentru a obține acest efect. Mai întâi, împărțiți înălțimea totală cu cinci și setați fiecare bloc cu o umplutură solidă. Consultați imaginea de mai jos pentru o exemplificare mai clară a acestei gândiri. Nifty, nu? Este o tehnică frumoasă pe care o aveți în centura dvs. de instrumente.
.docIcon: după ? fundal: #ccc; fundal: -webkit-gradient linear (top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80% #ccc 80%, #ccc 100%); fundal: -moz-linear-gradient (top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80% #ccc 80%, #ccc 100%); fundal: -o-gradient linear (top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80% #ccc 80%, #ccc 100%); fundal: -ms-gradient liniar (sus, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80% #ccc 80%, #ccc 100%); fundal: gradient liniar (top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80 %, #ccc 100%);
Live Demo Te-ai bucurat de post? Au alte trucuri similare? În caz afirmativ, trimiteți-le la comentariile de mai jos.
Accentsconagua