Cum se utilizează forme CSS în designul dvs. Web

Principiile de structură-coloane și rânduri, unghiuri și linii - pe care le folosim pentru a construi astăzi site-urile web, sunt în mare măsură influențate de patrimoniul lor tipărit. Și, deși implementarea rețelei pe web devine din ce în ce mai bună și mai lustruită, aspectul web este, în general, incomod în comparație cu mediile de imprimare, mai ales când vine vorba de fluxul de conținut.

Revistele și ziarele s-au bucurat întotdeauna de moduri elegante pentru aranjarea aspectului conținutului, cum ar fi împachetarea textului în jurul sau în interiorul unor forme nerectangulare.

Revista multifuncțională de către GreenSocks

Să explorăm modul în care modulul CSS Shapes Module ne va permite aceeași libertate pe web.

Introducere rapidă în forme CSS

Formatele CSS permit proiectanților web să creeze aspecte geometrice mai abstracte, dincolo de simple dreptunghiuri și pătrate. Specificația ne oferă noi proprietăți CSS care includ formă-exterior și forma marja. Suportul pentru browser este rezonabil, deși aceste proprietăți sunt în prezent disponibile numai în Chrome, Opera și Safari, cu -WebKit- prefix, prin urmare -webkit forma literei afara.

formă-exterior proprietatea va determina ca conținutul în linie să se înfășoare (în afară) după curba elementului, mai degrabă decât modelul cutiei. Inițial a existat, de asemenea formă-interior pentru a înfășura conținutul în interiorul unui element; textul dintr-un element circular va fi modelat și într-o formă de cerc. Cu toate acestea, implementarea a fost amânată pentru CSS Shapes Level 2.

De sus în jos: formă-exterioară și formă-în interior în acțiune.

forma marja proprietatea stabilește marginea în jurul oricărei forme care utilizează formă-exterior.

Să aruncăm o privire la câteva exemple.

Crearea unei forme

Cel mai simplu mod de a afla cum funcționează formele CSS este probabil crearea unui cerc. Deci, iată a div (cercul nostru), alături de mai multe paragrafe.

Lorem ipsum ...

Iată câteva elemente de bază, inclusiv lățimea și înălțimea cercului nostru border-radius pentru a forma elementul și un flotor astfel încât paragraful să se înfășoare în jurul elementului.

.cerc width: 250px; înălțime: 250px; fundal-culoare: # 40a977; raza de graniță: 50%; plutește la stânga;

Așa cum am face cu excepția, paragrafele sunt acum înfășurate în jurul elementului. Cu toate acestea, deoarece proprietatea razei de frontieră nu definește forma efectivă a elementului, înfășurarea paragrafului nu formează curba cercului.

Dacă vom inspecta elementul prin intermediul browserului DevTools, vom găsi că elementul este, de fapt, încă o cutie. Deci, chiar dacă divul nostru are aspectul unui cerc, border-radius nu a făcut nimic pentru real forma elementului.

Observați accentul dreptunghiular în jurul elementului.

Pentru ca punctul nostru să adere la forma circulară, trebuie să schimbăm real element prin formă-exterior proprietate; în acest caz, vom adăuga unul cu cerc() funcția a trecut ca valoare.

.cerc width: 250px; înălțime: 250px; fundal-culoare: # 40a977; raza de graniță: 50%; plutește la stânga; -webkit-shape-out: cerc (); formă-exterioară: cerc ();

Paragrafele noastre se înfășoară perfect pe circumferința cercului.

În plus, dacă inspectăm acum elementul prin DevTools, vom vedea că elementul este redat corect într-un cerc.

Observați culoarea mai întunecată.

Cu unele margini, arătați cum ar putea îmbunătăți un aspect simplu:

Personalizarea cercului

cerc() funcția necesită câteva valori pentru definirea funcției rază si coordonate de centru respectiv: cerc (r la x y). În mod implicit, valoarea razei este derivată din dimensiunea elementului; dacă elementul este 300px de exemplu, raza va fi 150px (raza fiind jumătate din diametrul cercului).

În mod similar, X și y coordonatele sunt măsurate în raport cu mărimea elementului și sunt setate, în mod implicit, la 50% 50%; chiar în centrul elementului.

Cercul este poziționat în centrul elementului.

Aceste două valori vor fi utile atunci când doriți să redimensionați forma, păstrând în același timp dimensiunea reală a elementului sau mutați forma în timp ce păstrați poziția elementului. În următorul exemplu, vom reduce raza cercului până la 60 px și setați coordonatul central la 30% 70%, care ar trebui să deplaseze cercul în stânga jos a casetei element.

Paragrafele trec acum prin caseta de element care urmează dimensiunea cercului. Vizualizați demonstrația.

Este de remarcat faptul că atunci când se modifică cercul, atât coordonatele centrale cât și raza trebuie să fie definite în mod explicit; adăugând doar una dintre ele nu este validă.

cerc (60 de pixeli la 30% 70%) // corect. cerc (60px) // invalid. cerc (la 30% 70%) // invalid.

Forma modelului de model

Modelele CSS moștenesc la fel model de cutie ca element, dar aplicat în afara sferei de aplicare a elementului însuși. Acest lucru ne permite să setăm separat elementul, de exemplu, la frontieră-box în timp ce setați forma la padding-box. Pentru a schimba forma model de cutie, adăugați una dintre model de cutie Cuvinte cheie, conținut-box, Marja-box, frontieră-box, sau padding-box după funcția respectivă.

.cerc width: 250px; înălțime: 250px; fundal-culoare: # 40a977; raza de graniță: 50%; plutește la stânga; padding: 10px; frontieră: 20px solid #ccc; margine: 30px; -webkit-shape-exterior: cerc () padding-box; forma-exterioară: cerc ();

Modelul cutie implicit al formei este setat la Marja-box. Și în exemplul următor am schimbat-o padding-box pentru a le spune browserului să excludă marginea elementului atunci când se determină dimensiunea sau intervalul de formă. Acum ar trebui să găsim că paragraful trece prin graniță și imediat atinge căptușeala elementului.

Pătratul portocaliu este marginea, pătratul galben este granița, iar pătratul verde este căptușeala,

Vă recomandăm să verificați cursul nostru gratuit cu privire la modul de bază al CSS Box Model pentru mai multe informații despre modul în care modelul cutie funcționează în detaliu.

Crearea mai multor forme

Specificațiile CSS Shapes au mai multe funcții de formă:

elipsă(): După cum sugerează și numele, această funcție va crea o formă de elipsă. Putem configura raza de elipsă și putem muta și coordonatele centrelor de formă. Dar spre deosebire de cerc() funcția, elipsă() funcționează două măsurători de rază, orizontală și verticală, prin urmare elipsă (100px 180px la 10% 20%).
poligon(): Această funcție ne permite să realizăm forme mai complexe, cum ar fi triunghiurile, hexagonii, precum și formele non-geometrice. Folosirea poligonului nu este la fel de ușor ca crearea unui cerc, dar instrumentul Path to Polygon Converter îl face puțin mai intuitiv.

Înfășurarea în sus

În acest tutorial, am analizat aplicația de bază a formelor CSS; am creat o formă, am personalizat dimensiunea, poziția și model de cutie. La momentul scrierii, mai multe aspecte ale formelor CSS sunt încă foarte dure în jurul marginilor, ceea ce probabil este motivul pentru care nu o vedem folosită pe scară largă încă.

Așa cum am menționat mai devreme în acest tutorial, CSS Shapes formă-interior proprietatea, care ne permite să înfășurăm și să formăm conținutul în interiorul unui element, a fost pus pe gheață.
Specificația CSS Shapes oferă o proprietate separată numită forma-box pentru a defini modelul cutie de forma, deși în prezent pare inaplicabil pentru orice browser.
Safari necesită -WebKit- prefix, evidențiind faptul că această caracteristică este experimentală.

Cu toate acestea, în ciuda progreselor lente și a diferențelor dintre browsere în acest moment, aștept cu nerăbdare Formatele CSS! Odată ce browserele majore o iau, nu pot să aștept să vad câteva layout-uri cu adevărat creative pe web!

Web design