Astăzi vom crea o diagramă animată cu CSS3. Anterior am făcut ceva similar cu ajutorul lui Jquery, dar este timpul să scăpăm în cele din urmă de plug-in-uri voluminoase, cu o grămadă de caracteristici inutile.
Redactăm cerințele de bază. Diagrama noastră ar trebui să fie:
- independent de fundal
- adaptiv (pentru orice număr de coloane)
- scalabil (cum ar fi grafica vectorială)
- ușor de reglabil (culoare, dimensiuni și proporții)
Să începem în ordine.
O coloană cu un bloc intern în mișcare.
Coloana noastră trebuie prezentată sub forma unui paralelipiped dreptunghiular format din 6 laturi, în timp ce blocul interior trebuie să se deplaseze vertical. De asemenea, trebuie să oferiți posibilitatea de a ascunde acest bloc. Pentru a îndeplini această sarcină, avem nevoie doar de cinci elemente bloc:
- 1 div pentru partea din spate, alcătuită din 3 laturi (peretele din spate, baza și peretele din stânga)
- 1 div pentru partea din față, format din 3 laturi (pereții din față, din partea de sus și din dreapta)
- 1 div pentru o unitate interioară formată din 3 laturi, cum ar fi partea frontală, dar cu o proprietate z-index inferioară
- Un container pentru a aranja toate cele trei părți în raport cu acesta și pentru a aplica o singură textură de fundal în colțul din dreapta jos
- 1 recipient cu preaplin: ascuns. Pentru a ascunde blocul interior sub coloană atunci când acesta coboară
S-ar putea să te întrebi de ce avem nevoie de două containere? Nu este ușor de înțeles, deci îți voi explica. Avem nevoie de cel puțin un container pe coloană (astfel încât să putem aranja frontul, spatele și peretele interior cu privire la acesta). În plus, coloana noastră ar trebui să fie scalabilă și, prin urmare, vom folosi procentul pentru a controla umplerea coloanei. Pentru aceasta avem nevoie ca înălțimea containerului nostru să fie egală cu înălțimea uneia dintre laturile postului.
Apoi, ar trebui să avem un buton, cu care să puteți ascunde blocul interior, adică unitatea noastră ar trebui să meargă "sub bara" și să dispară. Puteți aplica surplusul: proprietatea ascunsă. dar nu pentru acest container, deoarece înălțimea acestuia este mai mică decât înălțimea reală a coloanei. Adăugăm încă un container în partea superioară a acestuia și deja aplicăm pentru el o suprapunere: ascunsă. Și așa au ieșit două containere.
Interiorul diagramei în CSS3.
Este timpul să lucrăm la interior pentru graficul coloanelor noastre, astfel încât totul să fie frumos și funcțional. Cerințele pentru aceasta sunt destul de dure:
- timp pentru tot în 3D, atunci aveți nevoie de trei avioane (peretele din spate, peretele din stânga și din stânga)
- nu depind de fundal
- Nu depindeți de numărul de coloane și de caracteristicile lor (înălțime, lățime etc.)
- Axele X și Y trebuie să fie pe exterior cu etichetele corespunzătoare imprimate pe ele
Pentru aceasta avem nevoie de:
- 1 listă neordonată ul
- 1 element din fiecare element de listă pentru etichetele axei X.
- 1 din fiecare element de listă
- 1 listați o listă cu o listă neordonată în interiorul etichetelor pe axa Y.
Lista neordonată, vă întrebați? Este mai semantic să nu folosiți lista definițiilor dl pentru un graf de bare? Poate că, dar nu o putem folosi, pentru că trebuie să înfășurăm fiecare coloană și eticheta ei pe axa X cu un singur container pentru a le poziționa unul față de celălalt.
Mai mult decât atât, nu putem folosi elementul din listă în locul celui de al doilea container la coloană, așa cum avem nevoie pentru a aranja etichetele pe axa X în afara graficului, si din moment ce știm că a doua coloană container ascunde orice conținut care este mai mare decât sau dincolo de ea, vom folosi elemente ale listei pentru a vă asigura că toate elementele sunt poziționate corect.
punerea în aplicare
Este timpul sa incheiem teoria si sa ne implicam in codificare. Codul pentru o coloană cu o unitate interioară în mișcare arată astfel:
Să discutăm din nou scopul fiecărui bloc:
- .bar-wrapper - ascunde .bar-interior. când este sub coloană
- .bar-container - pentru poziționarea relativă. .bar-interior și .bar-foreground
- .bar-background - creează 3 fețe ale casetei: spate, partea de jos și partea stângă
- .bar-inner - blocul interior al coloanei noastre
- .bar-foreground - creează restul de 3 fețe ale casetei: față, sus, dreapta
În primul rând, vom emite containerele noastre
Rețineți că elementul .bar-container are o lățime de 12,5 sem. Acest număr este egal cu suma lățimii frontului (10 mm) și a lățimii laturilor din dreapta (2,5 mm) ale coloanei. De asemenea, folosim granițele pentru a crea o formă triunghiulară utilizând proprietățile în stil de frontieră. latimea graniței și culoarea frontală. Acest triunghi este plasat în colțul din dreapta jos al elementului .bar-container pentru a se asigura că interiorul coloanei este "tăiat" atunci când se mișcă vertical.
Și acum treceți la proiectarea peretelui din spate:
După cum vedeți, mutăm carcasa la 2,5 mm spre dreapta și înclinăm partea stângă și cea inferioară cu 45 de grade. Acordați atenție și transformării liniei: oblic (0deg, -45deg); Prin stabilirea pantei axei X la 0 grade și a axei Y la -45 grade, înclinăm peretele inferior vertical.
Să mergem la proiectarea peretelui frontal.
Aici totul este același ca și în stilizarea peretelui din spate, doar transformarea în cealaltă direcție. În plus, am aplicat aceleași stiluri pe ambele părți ale cazului și pe unitatea interioară, deoarece au aceleași proprietăți.
Acum o să stilisem unitatea interioară.
Am creat coloanele noastre și acum putem face față designului extern:
Așa cum am menționat mai devreme, folosim o listă neordonată și etichete de span pentru a plasa etichete pe axele X și Y.
Aici dificultatea se află în fundal. Utilizăm un gradient liniar pentru a umple containerul de diagramă și a-l ridica la 2.5m. De ce? Faptul este că partea inferioară a cutiei noastre cu o înălțime este de 2,5 mm și este înclinată la 45 de grade, astfel încât spațiul gol este lăsat în colțul din dreapta jos.
Acum, hai să mergem la stilul părții de jos.
Am cant 45 de grade și ușor deplasată spre stânga de 1/2 înălțimea (ca transformarea a avut loc în raport cu axa care trece prin mijlocul marginile din stânga și din dreapta ale unității noastre inferioare). Ca rezultat al acestei deplasări, partea inferioară este strâns legată de peretele stâng. Apoi, setați lățimea la 100% pentru a vă asigura că umple tot spațiul alocat pentru aceasta. Acum să luăm partea stângă:
După explicațiile de mai sus, puteți înțelege cu ușurință codul. În ea, am înclinat elementul la 45 de grade și l-am deplasat ușor cu 1/2 din lățime. Acum, să ne stilizăm coloanele:
Voi explica ce se întâmplă aici. Construim coloanele noastre unul lângă celălalt utilizând proprietatea float. După aceasta, adăugăm linia dreaptă la ultima coloană a diagramei. Aceasta se face pentru a arăta colțul din dreapta jos. Încercați să eliminați acest parametru și veți vedea imediat ce se întâmplă. Și, în concluzie, ne stilizăm etichetele de-a lungul axei X.
OK, aproape că am terminat. Acum rămâne să stilizăm marcatorii de-a lungul axei Y și va fi posibil să traducă spiritul:
După cum puteți vedea din cod, am atribuit lățimea axelor cu markere egale cu 100%. Acest lucru este necesar, astfel încât linia trasată între punctul de afișaj grafic liniidlya axa Y și poziționată deschidere element, astfel încât etichetele axa Y au fost în afara diagramei. Cu: înainte și după, putem face acest lucru destul de ușor și nu lăsăm codul html.
Așadar, am terminat stilul graficului nostru, dar nu am specificat variabile importante precum dimensiunile, culorile și nivelul de umplere a coloanelor! Faptul este că diagrama noastră va fi personalizabilă, așa că am decis să nu confundăm variabilele cu restul codului, astfel încât să le poți schimba singuri.
În fișierul demo veți găsi câteva diferențe în cod. Acest lucru se datorează faptului că am decis să folosim butoanele radio pentru a modifica caracteristicile tabelelor fără a modifica codul. Nu ezitați să citiți codul sursă. Dar, dacă aveți nevoie doar de o diagramă statică, utilizați fragmentul de cod de mai sus și efectuați propriile modificări.
postfață
În concluzie, să reamintim proprietățile CSS, tehnicile pe care le-am întâlnit cu comandantul diagramei noastre, dar care nu au primit explicația corectă:
- transformă: oblic () și rotiți () pentru a transforma elementele noastre într-un mod care, împreună, creează un sentiment de spațiu tridimensional
- pseudo-clase: înainte și după: sunt necesare pentru a genera elemente prin intermediul CSS și pentru marcarea ușoară HTML
- pseudo-clase: nth-last-child () și: nu sunt necesare pentru a defini anumite elemente de listă și pentru a evita adăugarea de clase suplimentare / id la markup
- liniar-gradient cu poziția de fundal sunt necesare pentru a umple parțial un element cu fundal
- rgba () pentru un fond translucid
- border: pentru a crea forme tip triunghi
- unitate
Articole similare
Trimiteți-le prietenilor: