Share
Odată cu sosirea ecranelor de înaltă definiție (cred că Retina) au apărut noi provocări de design; trebuie să găsim modalități de a găzdui toate dispozitivele. Luați afișarea icoanelor, de exemplu. Ne-am putea baza pe servirea imaginilor la 200% sau folosind SVG, dar este de asemenea posibil să construim o sumă surprinzătoare de grafică doar cu CSS. Să construim o pictogramă elaborată cu un singur element HTML.
Principala problemă cu elementele unice constă în faptul că suntem limitați la numărul de "blocuri" pe care le putem folosi. Din fericire, există câteva trucuri:
Elementele Pseudo (denumite și "conținut generat") nu există în marcajul documentului însuși (DOM), ci sunt create de CSS. Acestea vă oferă posibilitatea de a adăuga la elementul dvs. implicit alte două, care pot (mai mult sau mai puțin) să utilizeze aceleași proprietăți.
De exemplu, luați acest marcaj:
Aplicați apoi următoarele reguli de stil:
.pătrat poziție: relativă; fundal: albastru; lățime: 50px; înălțime: 50px; .square :: înainte de position: absolute; stânga: -50px; conținut: "; înălțime: 50px; lățime: 50px; afișare: bloc; fundal: verde; .square :: după position: absolute; left: 50px; content:"; înălțime: 50px; lățime: 50px; afișare: bloc; fundal: roșu;
În scopul acestui exercițiu vom folosi valorile pixelilor, deși este adesea recomandabil să se utilizeze unități flexibile de măsură, cum ar fi ems.
Notă: Colonul dublu (::), spre deosebire de un singur colon, este sintaxa CSS3. Diferă pseudo element din pseudo selectoare, precum :planare.
Ne-am dat mai multe două blocuri de construcție, dar merită menționat faptul că unele proprietăți CSS3 nu vor funcționa cu conținut generat:
Alte lucruri pe care trebuie sa le stiti este ca continutul generat va fi afisat pe partea de sus a elementului implicit, daca nu au z-index: -1. Browserele le interpretează ca și cum ar fi situate în elementul implicit. Dacă am fi reprezentat pseudoelementele cu marcaj real, codul ar fi după cum urmează:
.pătrat fundal: albastru; lățime: 50px; înălțime: 50px; poziție: relativă; .square. înainte de left: -50px; poziția: absolută; conținut: "; înălțime: 50px; lățime: 50px; afișare: bloc; fundal: verde; .square .after content:"; înălțime: 50px; lățime: 50px; fundal: roșu; poziția: absolută; stânga: 50px;
Dacă numai pseudoelementele nu vă dau destule "blocuri" pentru a construi pictograma dvs., puteți folosi și umbrele de pe cutie. Această tehnică vă va permite să creați cât mai multe "clone" după cum doriți. Să examinăm un exemplu cu un cerc:
.cerc poziție: relativă; fundal: albastru; lățime: 50px; înălțime: 50px; border-radius: 50%; box-shadow: -110px 0 0 -20px violet, -60px 0 0 -10px roșu, 80px 0 0 10px verde, 180px 0 0 20px portocaliu;
După cum puteți vedea, umbrele cutie vă permit să reduceți sau să măriți dimensiunea formei initale și să o plasați acolo unde doriți.
Detaliile proprietatii box-shadow: 80px 5px 1px 10px verde pot fi împărțite după cum urmează:
Notă: Prima umbră definită va apărea întotdeauna peste umbrele ulterioare.
medalion de asemenea, permite diferite posibilități:
.minge poziție: relativă; fundal: albastru; lățime: 50px; înălțime: 50px; raza de graniță: 50%; box-shadow: inset 20px 0 0 -10px galben, inset -20px 0 0 -10px roșu;
Pentru cei interesați de Internet Explorer, merită menționat că gradienții CSS sunt compatibili numai cu IE10. Pentru alte browsere, amintiți-vă prefixele furnizorilor corespunzători.
Ca umbre, gradienti pot fi combinate și plasate independent. Folosirea gradientilor pentru a crea forme este un pic mai complicata decat proprietatile anterioare, asa ca sa ne concentram pe un exemplu "simplu".
În acest exemplu, vom crea patru cercuri diferite utilizând gradienți radiali și le vom distribui în cadrul elementului părinte.
.fundal fundal: gradient radial (centru, elipsă, rgba (0, 0, 0, 1) 10%, transparent 10%, transparent 100% 1) 30%, transparente 32%, transparente 100%), gradient radial (centru, elipsă, rgba (50,0%, transparente 52%, transparente 100% elipse, rgba (0, 0, 0, 1) 60%, transparente 62%, transparente 100%); fundal-culoare: roșu; background-repeat: nu-repeta; Poziția fundalului: 0px 0px, 50px 0px, 50px 50px, 0px 50px; dimensiune de fundal: 50px 50px; lățime: 100px; înălțime: 100px; poziție: relativă;
Pentru a înțelege acest demo trebuie să vă imaginați o grilă pe element. Fiecare celulă din grilă ar fi un gradient diferit. În acest caz, celulele sunt de 50px și 50px (dimensiune de fundal: 50px 50px;). Le-am răspândit în mod deliberat în cadrul elementului, dar trebuie să fiți conștient de faptul că pot fi suprapuse. Fiecare celulă poate fi plasată pe o axă x și y separată, cu originea în colțul din stânga sus al elementului de bază (Poziția fundalului: 0px 0px, 50px 0px, 50px 50px, 0px 50px;).
Proprietatea Gradient în detaliu: fundal: radial-gradient (centru, acoperire cu elipsă, rgba (0, 0, 0, 1)
Pentru a ajuta la crearea gradientilor CSS, puteti folosi un generator, cum ar fi Collorzilla's Gradient Editor.
Acum că am văzut cum să creăm un maxim de blocuri de construcție dintr-o singură div, să practicăm!
Iată ce vom crea folosind doar un div (bonus la final!):
Aici vine o singură linie HTML a acestui tutorial:
Pentru a permite ca pictograma noastră să fie ușor redimensionată, vom folosi unități flexibile de măsurare; em și%. Datorită acestui lucru veți putea redimensiona după cum doriți, pur și simplu modificând dimensiunea fontului elementului. Dezvolt acest lucru în Chrome, vă permit să modificați prefixele furnizorilor în funcție de browserul dvs..
Vom începe prin a da formă și culoare corpului nostru de bunicuță:
.gărgăriță poziție: relativă; font-size: 60px; lățime: 1,8; înălțime: 2m; raza de graniță: 50%; fundal-culoare: # E11;
Acum, să punem punctele pe corp folosind proprietatea gradientului radial.
.gărgăriță poziție: relativă; font-size: 60px; lățime: 1,8; înălțime: 2m; raza de graniță: 50%; fundal: -webkit-radial-gradient (centru, elipsă, rgba (0, 0, 0, 1) 30%, transparent 33%, transparente 100% 0, 0, 1) 50%, transparente 55%, transparente 100%); - webkit-gradient radial (centrul, elipsa, rgba (0, 0, 0, 1) 50%; , - gradient radiant-webkit (centrul, elipsa, rgba (0, 0, 0, 1) 40%, transparenta 43%, transparenta 100% , 0, 1) 40%, transparente 43%, transparente 100%); - webkit-gradient radial (centru, elipsă, rgba (0, 0, 0, -webkit-radial-gradient (centru, elipsă, rgba (0, 0, 0, 1) 45%, transparent 50%, transparent 100%); fundal-culoare: # E11; background-repeat: nu-repeta; pozitie fundal: 0,66m 0,2m, 0,3m 0,6em, 1em 0,6em, 0,9m 1,1m, 0,4m 1,1m, 1,1m 1,5m, 0,2em 1,5em; dimensiunea fundalului: 0.5 mm 0.5 sem;
Excelentă muncă - am terminat cu corpul pentru moment.
Această parte este cea mai rapidă. Vom desena o jumătate de cerc negru și o vom pune în partea superioară a corpului. Pentru aceasta vom folosi elementul pseudo ::inainte de.
.Ladybug :: înainte de conținut: "; poziția: absolută; afișarea: bloc; înălțimea: 0.5em; lățimea: 1.2m; top: -0.24em; fundal: negru; stânga: 0.3em; 0% 0% / 100% 100% 0 0;
Aici vom crea ochi folosind elementul pseudo ::după și proprietatea umbră cutie. Începem prin crearea cercului nostru de bază (elevul), apoi vom "clona" acest element pentru a crea albul ochiului, conturul și celălalt ochi.
.Ladybug :: după conținut: "; poziția: absolută; afișarea: bloc; înălțimea: 0.1em; lățimea: 0.1em; fundal: negru; top: -0.1em; stânga: 0.5em; raza de graniță: 50%; : 0 0 0 0.1m alb, 0em 0 0 0.13m negru, 0.7m 0 0 0 negru, 0.7em 0 0 0.1em alb, 0.7em 0 0 0.13em negru;
Trebuie să vă gândiți "avem un element stâng". Nu vă faceți griji, vom reutiliza aceeași umbra cutie folosită pentru ochi.
.Ladybug :: după conținut: "; poziția: absolută; afișarea: bloc; înălțimea: 0.1em; lățimea: 0.1em; fundal: negru; top: -0.1em; stânga: 0.5em; raza de graniță: 50%; : 0 0 0 0.1m alb, 0em 0 0 0.13m negru, 0.7em 0 0 0 negru, 0.7em 0 0 0.1em alb, 0.7m 0 0 0.13em negru, 1.2m 0.5em 0 0.02em negru, 1.35 em 1.1em 0 0.02m negru, 1.2em 1.65em 0 0.02em negru, -0.5em 0.5em 0 0.02em negru, -0.65em 1.1em 0 0.02em negru, -0.5em 1.65em 0 0.02em negru;
Pictograma noastră de ladybug este terminată!
De fapt, nu am terminat. Ți-am promis un bonus și aici este. Animația este un avantaj CSS are peste SVG; hai să ne animăm bastonul cu mouseover. Iată codul CSS bonus:
@ -webkit-keyframes gărgăriță 0% poziția de fundal: 0.66m 0.2em, 0.3m 0.6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; 50% poziția de fundal: 0,66m 0,8m, 0,66m 0,8em, 0,66m 0,8em, 0,66m 0,8em, 0,66m 0,8em, 0,66m 0,8em, 0,66m 0,8em; 100% poziția de fundal: 0,66 mm 0,2, 0,3 mm 0,6 mm, 1, 0,6 mm, 0,9 cm 1,1 cm, 0,4 mm 1,1 mm, 1,1 mm 1,5 mm, 0,2 pm 1,5; .ladybug: hover -webkit-animație: Ladybug 1s;
Începem prin definirea unor cadre cheie pe care le numim buburuză. Apoi declanșăm acele cadre cheie în acțiune în starea de hover a icoanei noastre. Cadrele cheie fiecare modifică poziția de fond a petelor de ladybug
În cele din urmă, aici este codul complet CSS:
.gărgăriță poziție: relativă; font-size: 60px; lățime: 1,8; înălțime: 2m; raza de graniță: 50%; fundal: -webkit-radial-gradient (centru, elipsă, rgba (0, 0, 0, 1) 30%, transparent 33%, transparente 100% 0, 0, 1) 50%, transparente 55%, transparente 100%); - webkit-gradient radial (centrul, elipsa, rgba (0, 0, 0, 1) 50%; , - gradient radiant-webkit (centrul, elipsa, rgba (0, 0, 0, 1) 40%, transparenta 43%, transparenta 100% , 0, 1) 40%, transparente 43%, transparente 100%); - webkit-gradient radial (centru, elipsă, rgba (0, 0, 0, -webkit-radial-gradient (centru, elipsă, rgba (0, 0, 0, 1) 45%, transparent 50%, transparent 100%); fundal-culoare: # E11; background-repeat: nu-repeta; pozitie fundal: 0,66m 0,2m, 0,3m 0,6em, 1em 0,6em, 0,9m 1,1m, 0,4m 1,1m, 1,1m 1,5m, 0,2em 1,5em; dimensiunea fundalului: 0.5 mm 0.5 sem; .ladybug: înainte de conținut: "; poziția: absolută; afișarea: bloc; înălțimea: 0.5em; lățimea: 1.2m; top: -0.24em; fundal: negru; stânga: 0.3em; % 0% 0% / 100% 100% 0 0; .ladybug :: după conținut: "; poziția: absolută; afișare: bloc; înălțime: 0,1; lățime: 0,1; fundal: negru; top: -0.1em; stânga: 0,5 sem; raza de graniță: 50%; cutie 0 0 0 0.1m alb, 0em 0 0 0.13m negru, 0.7m 0 0 0 negru, 0.7em 0 0 0.1em alb, 0.7m 0 0 0.13em negru, 1.2m 0.5em 0 0.02em negru, 1.35em 1.1m 0 0.02m negru, 1.2em 1.65em 0 0.02em negru, -0.5em 0.5em 0 0.02em negru, -0.65em 1.1em 0 0.02em negru, -0.5em 1.65em 0 0.02em negru; @ -webkit-frame-keyframes 0% poziția de fundal: 0.66m 0.2em, 0.3m 0.6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; 50% poziția de fundal: 0,66m 0,8m, 0,66m 0,8em, 0,66m 0,8em, 0,66m 0,8em, 0,66m 0,8em, 0,66m 0,8em, 0,66m 0,8em; 100% poziția de fundal: 0,66 mm 0,2, 0,3 mm 0,6 mm, 1, 0,6 mm, 0,9 cm 1,1 cm, 0,4 mm 1,1 mm, 1,1 mm 1,5 mm, 0,2 pm 1,5; .ladybug: hover -webkit-animație: Ladybug 1s;
Prin acest tutorial sper că v-am arătat potențialul CSS și ce este posibil cu un singur element HTML. Este întotdeauna înțelept să luați în considerare asistența browserului pentru proprietățile CSS discutate în acest tutorial, asigurându-vă că acestea se degradează cu grație.
Dacă doriți să vedeți alte pictograme create cu un singur element, vă invit să vizitați site-ul meu one-div.com. Vă mulțumim pentru lectură!
Accentsconagua