Creați forme perfect responsive folosind unitatea CSS vw. Generator CSS3 online cu o interfață grafică simplă - EnjoyCSS Css shapes

, apoi aplicați-i transformarea opusă roti()
HTML

.imagine(
latime: 400px;
transformare: rotire(45deg);
preaplin: ascuns;
}
.picture > img (
latime maxima: 100%;
transformare: rotire(-45deg);
}
Cu toate acestea, după cum puteți vedea în imagine, nu am reușit să obținem imediat stilizarea necesară. Desigur, dacă intenționați să decupați imaginea într-o formă de octogon, puteți numi treaba terminată și treceți la altceva. Dar pentru a decupa poza la forma unui diamant, va trebui să muncești mai mult.

Transformările de rotație opusă () nu sunt suficiente pentru a obține efectul dorit (div-ul cu numele.imaginea este indicat printr-un contur punctat)
Principala problemă constă în lățimea maximă: declarație 100%. 100% se aplică containerului nostru. Cu toate acestea, dorim ca lățimea imaginii rezultate să fie egală cu diagonala originalului, nu cu latura acesteia. Ați ghicit deja că avem nevoie din nou de ajutorul teoremei lui Pitagora (dacă aveți nevoie să vă împrospătați memoria, veți găsi explicația în secret). După cum spune teorema, diagonala unui pătrat este egală cu latura lui înmulțită cu .

Prin urmare, este logic să setăm o valoare a lățimii maxime de 2 × 100% ≈ 141,4213562% sau, rotunjită, 142%, deoarece în niciun caz nu dorim ca imaginea să devină mai mică (și dacă se dovedește a fi puțin mai mare, atunci totul ok pentru ca oricum il taiem).

De fapt, este chiar mai bine să mărim imaginea folosind transformarea scale(), din două motive: dorim ca dimensiunea imaginii să rămână la 100% în situațiile în care transformările CSS nu sunt acceptate;
Când o imagine este mărită folosind transformarea scale(), aceasta este scalată din centru (cu excepția cazului în care este specificată o valoare diferită de origine a transformării). Dacă o măriți prin modificarea valorii proprietății lățimi, aceasta se va scala din colțul din stânga sus și pentru a o muta va trebui să folosim valori de marjă negative. Punând totul împreună, obținem acest cod final:
.imagine(
latime: 400px;
transformare: rotire(45deg);
preaplin: ascuns;
}
.picture > img (
latime maxima: 100%;
transformare: rotire(-45deg) scară(1,42);
}
După cum puteți vedea în imagine, acest lucru ne oferă în sfârșit rezultatul dorit.

INCEARCA-L TU INSUTI!
http://play.csssecrets.io/diamond-images

Soluție pentru calea de tăiere

Soluția anterioară funcționează, dar este în mod inerent un truc murdar. Necesită un element HTML suplimentar, ceea ce înseamnă că este o soluție dezordonată, confuză și fragilă: dacă avem de a face cu imagini nepătrate, rezultatul va fi dezastruos.

În realitate, există o modalitate mult mai bună de a obține rezultatul dorit. Ideea principală este utilizarea proprietății clip-path- o altă caracteristică împrumutată de la SVG. Această proprietate poate fi aplicată acum conținutului HTML (cel puțin în browserele compatibile) și într-o sintaxă plăcută, lizibilă, spre deosebire de echivalentul SVG, care este notoriu pentru că îi înnebunește pe oameni.

Are un singur dezavantaj (la momentul scrierii acestui capitol) - suport limitat pentru browser. Cu toate acestea, această soluție se întoarce cu grație la o randare simplificată (fără tăiere), așa că este un candidat demn de luat în considerare. Sunt șanse să fiți deja familiarizați cu traseele de tăiere datorită aplicațiilor de editare a imaginilor precum Adobe Photoshop. Traseele de tăiere vă permit să tăiați un element în orice formă doriți. În acest caz vom folosi forma polygon() .

Vom defini un romb, dar în general această formă vă permite să definiți orice poligon printr-o succesiune de puncte separate prin virgule. Puteți folosi chiar și procente - valorile totale vor fi calculate în raport cu dimensiunile totale ale elementului. Codul este foarte simplu:
clip-path: poligon(50% 0, 100% 50%, 50% 100%, 0 50%);

Crezi sau nu, asta-i tot! Dar în loc de două elemente HTML și opt linii de cod CSS confuz, am realizat ceea ce ne-am dorit doar cu o singură linie simplă. Dar abilitățile minunate ale clip-path nu se limitează la asta. Această proprietate acceptă chiar și animația - cu condiția să animam tranziția între două funcții de formă identice (în cazul nostru polygon()) cu același număr de puncte. Deci, dacă dorim să extindem fără probleme întreaga imagine la trecerea mouse-ului, se poate face astfel:
img (
clip-path: poligon (50% 0, 100% 50%,
50% 100%, 0 50%);
tranziție: 1s clip-path;
}
img:hover (
clip-path: polygon(0 0, 100% 0,
100% 100%, 0 100%);
}
În plus, această metodă se adaptează perfect la imaginile non-pătrate, Ah, bucuriile CSS moderne...
INCEARCA-L TU INSUTI!

De la autor: Un dreptunghi în dreptunghiuri: așa au fost întotdeauna construite paginile noastre web. Am încercat de mult să ne eliberăm de aceste limitări folosind CSS pentru a crea forme geometrice, dar acele forme nu afectează niciodată conținutul din interiorul elementelor stilate sau modul în care sunt așezate alte elemente de pe pagină în raport cu elementele stilate.

Noua specificație CSS pentru forme schimbă status quo-ul. Introdus de Adobe la jumătatea anului 2012, își propune să ofere designerilor web capacitatea de a schimba fluxul de conținut în și în jurul formelor relativ complexe - ceva ce nu am putut realiza înainte, chiar și folosind JavaScript.

De exemplu, observați cum textul se înfășoară în jurul imaginilor rotunde în următorul design. Fără Forme, textul ar avea formă dreptunghiulară - aruncând la gunoi o tehnică subtilă care duce designul la următorul nivel.

Observați cum textul capătă o formă rotunjită în jurul marginilor plăcii în acest exemplu. Folosind Forme CSS, putem crea un design similar pentru o pagină web.

Să aruncăm o privire mai atentă asupra modului în care funcționează Formele și cum puteți începe să le utilizați.

Suport pentru browser

Formele CSS sunt acceptate în prezent numai în Webkit Nightly și Chrome Canary, dar modulul lor de nivel 1 a atins starea de recomandare a candidatului, astfel încât proprietățile și sintaxa definite în specificație sunt destul de stabile. Nu va trece mult până când alte browsere vor începe să le accepte. Acest nivel se concentrează pe acele proprietăți ale Formelor care schimbă fluxul de conținut în jurul formei. În special, se concentrează asupra proprietății forme-exterior și pe cele conexe.

Combinate cu alte funcții de ultimă oră, cum ar fi Decupare și mască, Filtre CSS și Colaj și îmbinare, Formele CSS ne vor permite să creăm modele mai complexe și mai sofisticate, fără a fi nevoie să recurgem la editori de imagine precum Photoshop și InDesign.

Nivelurile viitoare ale Formelor CSS se vor concentra, de asemenea, pe conținutul de stil din cadrul formelor. De exemplu, astăzi este destul de ușor să creezi o formă de romb în CSS, rotind elementul cu 45 de grade și apoi răsturnând conținutul din interior invers, astfel încât să se așeze orizontal pe pagină. Dar conținutul din interiorul diamantului nu va lua forma adecvată și va rămâne întotdeauna dreptunghiular. În momentul în care proprietatea shape-inside este implementată, putem face și conținutul sub formă de romb, creând un marcaj similar cu imaginea de mai jos.

În curând, Formele CSS vă vor permite, de asemenea, să stilați textul în interior ca aceste romburi, astfel încât, în loc să decupați sau să folosiți overflow, textul în sine să fie poziționat în raport cu marginile containerului..

Pentru a folosi formele CSS în Chrome Canary astăzi, trebuie să activați caseta de selectare care face disponibile funcțiile experimentale.

Crearea formelor CSS

Puteți aplica o formă unui element folosind proprietățile Forme. Treceți funcția de formă ca valoare proprietății forme. Funcția de formă este secțiunea de cod în care treceți parametrii care specifică forma pe care doriți să o aplicați unui element.

Formele pot fi create folosind una dintre următoarele funcții:

Fiecare formă este definită de un set de puncte. Unele funcții acceptă puncte ca parametri; alții preiau parametri de offset, dar toți ajung să deseneze formele pe element ca un set de puncte. Vom parcurge parametrii pentru fiecare dintre aceste funcții cu exemple.

O cifră poate fi determinată și dintr-o imagine folosind extragerea canalului alfa. Când o imagine este transmisă proprietății forme, browserul extrage o formă din imagine pe baza valorii pragului formei-imagine. Forma este definită de pixeli a căror valoare alfa este mai mare decât un prag specificat. Imaginea trebuie să fie compatibilă CORS. Dacă cel furnizat nu este disponibil dintr-un motiv oarecare (de exemplu, nu există), atunci nu se va aplica nicio formă.

Următoarele cifre iau funcțiile de mai sus ca valori:

shape-outside: face ca conținutul să se înfășoare în jurul formei (în exterior)

shape-inside: conținutul ia forma formei din interior

Puteți utiliza proprietatea shape-outside în combinație cu shape-margin pentru a adăuga o margine exterioară în jurul unei forme, care va împinge conținutul departe de formă, lăsând spațiu între ele. Așa cum shape-outside primește o proprietate de margine de formă, shape-inside primește o proprietate de umplutură de formă, care adaugă umplutură.

Folosind proprietățile formei sau ale funcției, declararea unui element de formă se poate face cu o singură linie de cod CSS:

Element (forma-exterior: circle(); /* conținutul se va înfășura în jurul cercului dat elementului */ )

Element ( form-outside: url(path/to/image-with-shape.png); )

Element ( form - exterior : url ( cale / spre / imagine - cu - form . png ) ; )

Dar... Dacă aplicați această linie de cod CSS unui element, forma nu va fi aplicată acestuia decât dacă sunt îndeplinite următoarele condiții:

Elementul trebuie să fie plutitor. Nivelurile viitoare de Forme CSS ne vor permite să definim forme pentru elementele care nu sunt plutitoare, dar acest lucru nu este încă posibil.

Elementul trebuie să aibă dimensiunile specificate. Înălțimea și lățimea date elementului vor fi utilizate pentru stabilirea sistemului de coordonate.

După cum ați văzut în funcțiile de mai sus, formele sunt definite de un set de puncte. Deoarece punctele au coordonate, browserul are nevoie de un sistem de coordonate pentru a ști exact unde trebuie plasat fiecare punct pe un element. Deci exemplul de mai sus ar funcționa dacă ar avea următoarele:

Element (float: stânga; înălțime: 10em; lățime: 15em; formă-exterior: cerc(); )

Element (float: stânga; înălțime: 10em; lățime: 15em; formă - exterior: cerc () ; )

Cu toate acestea, setarea unui element la o anumită dimensiune nu afectează capacitatea de răspuns (vom vorbi despre asta mai târziu). Deoarece fiecare formă este definită ca un set de puncte situate folosind o pereche de coordonate, modificarea coordonatelor unui punct va afecta direct forma creată. De exemplu, figura următoare arată un hexagon care poate fi creat folosind funcția polygon() . Cifra este formată din șase puncte. Modificarea coordonatei orizontale a punctului portocaliu va schimba forma finală și va afecta, de asemenea, plasarea conținutului în interiorul/în afara oricărui element căruia i se aplică forma.

Dacă un element este plutit și aliniat la dreapta și are o formă aplicată acestuia, conținutul din stânga acestuia își va schimba poziția atunci când una dintre coordonatele punctului portocaliu din interiorul funcției poligon() este schimbată..

Formează blocul de referință

Formele CSS sunt definite și create în interiorul unei casete de referință, unde este desenată forma. Pe lângă înălțimea și lățimea unui element, componentele modelului de casetă ale elementelor - caseta de margine, caseta de conținut, caseta de umplutură și caseta de chenar - oferă, de asemenea, referințe pentru definirea formei elementului.

În mod implicit, caseta de margine este folosită ca referință, așa că dacă elementul căruia îi aplicați o formă are deja o marjă în partea de jos, forma se va termina la marginea marginii și nu la margine. Dacă doriți să utilizați alte valori ale modelului de casetă, le puteți specifica împreună cu funcția de formă pe care o treceți proprietății forme:

forma-exterior: cerc (250px la 50% 50%) padding-box;

forma - exterior : cerc (250px la 50 % 50 %) umplutura - caseta ;

Cuvântul cheie padding-box din această regulă definește aplicarea formei și constrângerea padding box (zona de umplutură). Funcția circle() determină cercul, dimensiunile și poziționarea acestuia în raport cu elementul.

Definirea formelor folosind funcții

Vom începe prin a include text informațional în jurul unei imagini rotunde a avatarului utilizatorului, la fel ca pentru un profil de utilizator sau o recenzie.

Folosind Forme CSS, textul din jurul imaginii utilizatorului curge în jurul formei în loc să mențină o formă dreptunghiulară.

Vom folosi funcția circle() pentru a aplica o formă circulară imaginii de profil folosind următorul marcaj:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci?

Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.

< img src = „//api.randomuser.me/0.3.2/portraits/men/7.jpg” alt = "imagine de profil" / > !}< p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci?< / p > < p >Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.< / p >

Puteți întreba: „De ce nu putem folosi raza de margine pentru a rotunji imaginea?” Răspuns: Proprietatea border-radius nu are niciun efect asupra plasării conținutului în interiorul sau în afara elementului căruia i se aplică. Afectează doar marginile sau fundalul elementului. Fundalul este decupat la colțurile rotunjite, asta-i tot. Conținutul din interiorul elementului va rămâne dreptunghiular, iar conținutul din exteriorul elementului se va comporta ca și cum elementul ar rămâne dreptunghiular.

Vom folosi proprietatea border-radius pentru a rotunji o imagine - iată ce facem pentru a rotunji imaginile sau alte elemente dintr-o pagină:

img ( float : stânga ; lățime : 150 px ; înălțime : 150 px ; chenar - rază : 50 % ; margine - dreapta : 15 px ; )

Fără forme CSS, textul vede imaginea ca pătrată și se înfășoară în jurul unei forme pătrate, mai degrabă decât una rotundă.

Într-un browser care nu acceptă Forme CSS, conținutul din jurul unei imagini circulare va fi poziționat ca și cum nu ar fi rotund. Exact așa va arăta în browserele mai vechi. Pentru a modifica modul în care conținutul se înfășoară în jurul unei anumite forme, utilizați proprietățile formei.

img ( float: stânga; lățime: 150 px; înălțime: 150 px; chenar-rază: 50%; formă-exterior: cerc(); formă-margine: 15px; )

img ( float : stânga ; lățime : 150 px ; înălțime : 150 px ; chenar - rază : 50 % ; formă - exterior : cerc () ; formă - margine : 15 px ; )

Cu acest cod, textul va putea „vedea” forma circulară aplicată imaginii și se va înfășura în jurul ei, așa cum se arată în prima captură de ecran. (Puteți să vă uitați la rezultat.) În browserele care nu acceptă forme, va arăta ca a doua imagine.

Puteți folosi funcția circle() ca atare sau îi puteți transmite parametri. Iată sintaxa sa oficială:

cerc() = cerc([ ]? ? [la< position > ] ? )

Semnele de întrebare indică faptul că acești parametri sunt opționali și pot fi omisi. Acei parametri pe care îi omiteți vor lua valorile implicite. Când utilizați circle() așa cum este, în loc să specificați direct poziția, centrul implicit al cercului va fi în centrul elementului la care îl aplicați.

Puteți seta raza unui cerc utilizând orice unități de lungime (px, em, pt etc.) De asemenea, puteți seta raza folosind parametrii folosind partea cea mai apropiată sau cea mai îndepărtată, dar cea mai apropiată este cea implicită browserul va lua distanța de la centrul elementului până la cea mai apropiată parte, deoarece raza, cea mai îndepărtată parte utilizează distanța de la centru la partea îndepărtată.

forma-exterior: cerc (partea cea mai îndepărtată la 25% 25%); /* definește un cerc a cărui rază este jumătate din latura cea mai lungă, situat la coordonatele 25% 25% în sistemul de coordonate al elementului */ shape-inside: circle(250px la 500px 300px); /* definește un cerc al cărui centru este de 500px pe orizontală și 300px pe verticală, cu o rază de 250px */

Funcția elipse() funcționează la fel ca circle(), cu același set de valori, cu excepția faptului că în loc de un parametru de rază, este nevoie de două: o rază în axa x, una în axa y.

elipsa() = elipsa([ (2)]? ? [la< position > ] ? )

Funcția inset() nu este direct legată de cerc sau elipsă, este folosită pentru a crea forme dreptunghiulare în interiorul unui element. Deoarece elementele sunt deja dreptunghiulare, nu avem nevoie de el pentru a crea dreptunghiuri. În schimb, inset() ne poate ajuta să creăm dreptunghiuri rotunjite, astfel încât conținutul să se înfășoare în jurul colțurilor rotunjite.

Funcția inset() ia unul până la patru parametri de offset, care specifică un offset relativ la marginile casetei de referință, care determină locația dreptunghiului în cadrul elementului. Colțurile rotunjite sunt specificate exact în același mod ca și raza-chenar, folosind una dintre cele patru valori, în combinație cu cuvântul cheie rotund.

inset() = inset(offset(1,4)?)

inset() = inset(offset(1, 4)[rotunzi< border - radius > ] ? )

Următorul cod va crea un dreptunghi rotunjit pe un element plutitor.

Element ( float: stânga; lățime: 250 px; înălțime: 150 px; formă-exterior: interior (0 px round 100 px) chenar-box; )

Element ( float : stânga ; lățime : 250 px ; înălțime : 150 px ; formă - exterior : interior ( 0 px rotund 100 px ) chenar - casetă ; )

Funcția finală Shapes este polygon(), care definește forme ambigue mai complexe folosind orice număr de puncte. Funcția acceptă un set de perechi de coordonate, unde fiecare pereche definește poziția unui punct.

În exemplul următor, imaginea plutitoare este plasată la marginea dreaptă, ocupând întreaga înălțime a ecranului și utilizând unități de vizualizare. Vrem ca textul din stânga să se înfășoare în jurul clepsidrei din interiorul imaginii și folosim funcția polygon() pentru a defini o formă personalizată pentru imagine.

Codul CSS pentru imaginea de mai sus arată astfel:

img.right ( float: dreapta; înălțime: 100vh; lățime: calc(100vh + 100vh/4); forma-exterior: poligon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60) %, 45% 40%);

img. dreapta ( float : dreapta ; înălțime : 100vh ; lățime : calc (100vh + 100vh / 4 ) ; formă - exterior : poligon (40% 0 , 100% 0 , 100% 100% , 40% 100% , 45,% 60% ) 45% 40%) ;

Puteți specifica coordonatele punctelor care definesc figura în unități de lungime sau în procente, ca a mea. Acest cod va da rezultatul dorit, dar după cum puteți vedea, funcția de formă nu afectează părțile rămase ale imaginii în afara formei date. Ideea este că aplicarea unei funcții de formă unui element - fie că este o imagine sau un container sau altceva - nu va afecta nimic altceva decât zona de împachetare a conținutului. Fundalul, chenarele și orice altceva vor rămâne neschimbate.

Pentru a reprezenta vizual poligonul creat, trebuie să „decupăm” părțile imaginii în afara formei. Proprietatea clip-path din specificația CSS Masking Module ne va ajuta în acest sens.

Proprietatea clip-path acceptă aceleași funcții și valori de formă ca și proprietatea formei. Dacă trecem aceeași formă poligonală pe care am folosit-o pentru proprietatea shape-outside la proprietatea clip-path, aceasta va decupa partea din imagine din afara formei.

img.right ( float: dreapta; înălțime: 100vh; lățime: calc(100vh + 100vh/4); forma-exterior: poligon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60) %, 45% 40%) /* decupați imaginea de-a lungul conturului figurii */ clip-path: poligon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%;

img. dreapta ( float : dreapta ; înălțime : 100vh ; lățime : calc (100vh + 100vh / 4 ) ; formă - exterior : poligon (40% 0 , 100% 0 , 100% 100% , 40% 100% , 45,% 60% ) 45% 40%); /* decuparea imaginii de-a lungul conturului figurii */ clip-path: poligon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); )

Rezultatul arată astfel:

Proprietatea clip-path este acceptată în prezent împreună cu prefixele, de exemplu. va funcționa în Chrome cu prefixul –webkit- adăugat. Te poți uita la demo.

Proprietatea clip-path este un însoțitor grozav al proprietății forme, deoarece vă ajută să vizualizați formele pe care le-ați creat și să decupați părțile din afara formei, așa că probabil veți ajunge să le folosiți mult împreună.

Funcția polygon() acceptă, de asemenea, un cuvânt cheie opțional de umplutură, care poate fi fie diferit de zero, fie par impar. Acesta determină modul în care se vor comporta zonele care se intersectează din poligon. Consultați proprietatea regulii de completare SVG pentru detalii.

Definirea unei figuri folosind o imagine

Pentru a defini o formă folosind o imagine, imaginea trebuie să aibă un canal alfa din care browserul va extrage imaginea.

O formă este definită de pixeli a căror valoare alfa este peste un anumit prag. Valoarea implicită de prag este o.o (complet transparentă) sau o puteți seta direct folosind proprietatea shape-image-threshold. Astfel, orice pixel opac poate fi folosit ca parte a formei definite de imagine.

Un viitor strat Forme CSS poate permite comutarea pentru a utiliza datele de luminozitate a imaginii în locul canalului alfa. Dacă se întâmplă acest lucru, form-image-threshold va fi extins pentru a include un prag fie pentru luminozitate, fie pentru canalul alfa, în funcție de starea comutatorului.

Folosim următoarea imagine pentru a defini forma elementului și pentru a face textul să se înfășoare în jurul acestuia:

) ; forma - margine : 15px ; formă - imagine - prag : 0,5 ; fundal: #009966 url(path/to/background-image.jpg); imagine-masca: url(leaf.png); )

Desigur, dacă aplicați un fundal unui element, fundalul va trebui să fie tăiat în afara formei date. Proprietatea imagine-mască (cu prefixele corespunzătoare) din Modulul Măști poate ajuta în acest sens, deoarece proprietatea calea clipă nu ia canalul alfa ca valoare. Rezultatul arată astfel:

Dacă creați forme complexe, este posibil să găsiți convenabil să definiți forma folosind o imagine. Acest lucru vă va permite să utilizați canalul alfa al imaginii în Photoshop în loc să fiți nevoit să setați punctele manual.

De asemenea, veți găsi convenabil să utilizați o imagine în loc de o funcție de formă atunci când aveți o mulțime de elemente plutitoare sau zone de excepție într-un element - deoarece în prezent nu există nicio modalitate de a declara mai multe forme unui singur element. Dar dacă imaginea conține mai multe regiuni, browserul va extrage acele regiuni și le va folosi.

Forme CSS în design receptiv

Formele CSS pot fi potrivite pentru design responsive? Specificația actuală pentru forma-exterior include acest punct deoarece permite ca un element să fie dimensionat fie în procente, fie în unități de lungime, iar punctele de definire a formei (parametrii funcției formei) pot fi, de asemenea, specificate în procente. Aceasta înseamnă că un element cu o anumită formă exterioară poate fi pe deplin receptiv, la fel ca orice element plutit cu o dimensiune definită în procente.

Proprietatea shape-inside nu este încă receptivă, dar asta se datorează faptului că a fost mutată într-un modul de nivel 2. Multe dintre limitările sale actuale vor dispărea la următorul nivel.

Instrumente pentru crearea formelor

Crearea de forme complexe folosind funcții poate fi o sarcină consumatoare de timp, mai ales dacă creați o formă cu multe puncte și coordonate folosind polygon(). Din fericire, echipa platformei web Adobe lucrează la producerea de instrumente interactive pentru a face acest proces mult mai ușor. Bear Travis a creat o colecție de instrumente de creare a formelor care ne permit să creăm vizual forme poligonale. Instrumentul generează o funcție de formă. Acest lucru poate fi util, dar are limitările sale dacă doriți să creați o formă bazată pe o anumită imagine, deoarece instrumentul nu oferă o astfel de opțiune.

Un instrument mai avansat și mai interactiv a fost dezvoltat de echipa platformei web Adobe. Instrumentul a fost lansat recent ca o extensie a editorului gratuit Brackets. Vă permite să redați și să editați forme chiar în browser și are o capacitate de previzualizare online care actualizează valorile formelor în foaia de stil pe măsură ce le modificați pe pagină. Acest lucru oferă feedback vizual instantaneu asupra modificărilor dvs., permițându-vă să vedeți cum interacționează formele cu alte elemente de pe pagină.

Editați o formă poligonală direct în browser folosind modul de previzualizare din Paranteze. Inregistrare ecran realizata de Razvan Caliman.

Acest instrument va deveni indispensabil deoarece facilitează crearea, editarea și depanarea figurilor. Razvan Caliman, care explică cum să deschideți editorul Forme în Paranteze și să începeți să îl utilizați.

Viitorul: excepții CSS

Specificația CSS Shapes a fost o specificație dedicată formelor CSS și excepțiilor, dar a fost împărțită. În timp ce CSS Shape definește proprietățile formei din interior și ale formei exterioare, Excepțiile CSS definesc proprietățile care fac ca conținutul să se încadreze în jurul elementelor care nu sunt plutitoare, cum ar fi cele care sunt poziționate absolut. Ele fac posibil ca conținutul să curgă în jurul unei întregi forme din direcții diferite, așa cum se arată în imaginea de mai jos.

În viitor, excepțiile CSS vor permite conținutului să se înfășoare în jurul unei forme ca o inserție, așa cum se arată în difuzarea revistei. Insertul poate fi, de asemenea, rotund, iar textul va curge în jurul lui în același mod.

Nou nivel de cifre

Actuala specificație CSS Shapes este doar primul pas. În curând, noile funcții ne vor oferi mai mult control asupra creării și fluxului de conținut, făcându-ne mai ușor să transformăm machetele în design vii cu doar câteva linii de cod. Începând de astăzi, editorii de specificații se concentrează pe completarea formelor în exterior și este posibil să vedeți suport pentru forme CSS în mai multe browsere până la sfârșitul anului 2014.

Puteți folosi Shapes astăzi ca parte a unei strategii de îmbunătățire progresivă, știind că au un înlocuitor acceptabil în browserele care nu acceptă. Am început recent să le folosesc pe site-ul meu și înlocuirea pare destul de acceptabilă. Pentru modele mai complexe, puteți utiliza un script pentru a verifica compatibilitatea browserului și pentru a oferi orice înlocuitor dacă nu există suport. De asemenea, puteți utiliza testele Modernizr cu acest script pentru a verifica dacă proprietatea exterioară a formei este acceptată sau puteți încărca propria versiune care include acest test.

Formele CSS ne permit să creăm o altă punte între tipărire și design web. Exemplele din acest articol sunt simple, dar ar trebui să vă ofere o bază pentru crearea unui design care este la fel de complex ca o revistă sau un poster, fără să vă faceți griji dacă îl puteți recrea pe ecran. Indiferent ce ați învățat, de la machete non-dreptunghiulare la animație Shape, acum este momentul să experimentați.

Salutare tuturor. Astăzi vom atinge un subiect destul de neobișnuit, și anume viitorul web designului, formele CSS.

După cum știți, acum este foarte la modă, dar constă în principal din dreptunghiuri, care, la rândul lor, limitează foarte mult orizonturile designerilor. Și apoi există adaptabilitatea.. Ceea ce este foarte limitativ în ceea ce privește creativitatea. Dar există un plus uriaș aici - este ușor să înfășurați textul în jurul unui dreptunghi, dar cum să faceți textul să curgă în jurul formelor rotunde sau neuniforme este mai dificil. Pentru că imaginile nu pot fi rotunde.

Doar în acest caz, cifrele ne vin în ajutor. Popularul site CSS W3C a publicat prima documentație despre forme. Iată această postare în limba engleză Modulul Forme CSS Nivelul 1. Acest modul a fost lansat recent pe 20 iunie. Până acum, aceasta este o versiune beta, care include forme precum dreptunghi, triunghi, elipsă, cerc și poligon.

Acum să aruncăm o privire mai atentă la care este avantajul formelor CSS folosind un exemplu.

Mai întâi, să luăm niște markup HTML simplu, datorită http://www.webdesignerdepot.com:

Acesta este un exemplu de text