Efectul colțurilor îndoite folosind doar css

În această lecție, vom crea un efect de colțuri îndoite fără a utiliza imagini și marcare suplimentară. Acesta funcționează bine în toate browserele moderne și este foarte potrivit pentru site-ul web cu soluții color simple.







Efectul colțurilor îndoite folosind doar css

Acest efect a fost folosit în demonstrația la lecția "Backgrounds Multiple and Stroke Using CSS2". În plus, utilizarea colțurilor îndoite în proiectarea unui site real poate fi văzută în exemplul lui Yiibu. Dar site-ul Yiibu folosește imagini și folosim pseudo-elemente și CSS.

Efectul colțurilor îndoite folosind doar css
Efectul colțurilor îndoite folosind doar css

Nimic complicat. Orice element va face, și nici o marcare suplimentară nu va fi necesară. Totul începe cu un dreptunghi simplu colorat. Browserele care nu acceptă pseudo-elementele (IE6 și IE7) vor afișa și ele.

Adăugarea poziției: proprietatea relativă permite poziționarea absolută a pseudo-elementelor.

Colțuri îndoite

Colțul îndoit este creat folosind un pseudo-element, care este poziționat în colțul superior al dreptunghiului. Pseudo-elementul nu are o lățime sau înălțime, dar are un accident vascular cerebral gros. Schimbând grosimea cursei, vom schimba dimensiunea colțului pliat.

În acest exemplu, părțile superioare și drepte ale cursei au culori care se potrivesc cu culoarea de fundal a dreptunghiului părinte. Partea stângă și cea inferioară a cursei au o culoare mai închisă sau o culoare mai deschisă decât culoarea de fundal a dreptunghiului.

Acesta este tot ceea ce aveți nevoie pentru a crea un efect de colț simplu, similar cu cel folosit pe site-ul Yiibu.

Firefox 3.0 nu vă permite să poziționați pseudoelemente. Puteți utiliza câteva proprietăți pentru a remedia poziția în acest browser.

Adăugați o umbră ușoară

Vizualizarea colțului poate fi ușor îmbunătățită prin adăugarea proprietății box-shadow (pentru browserele care îl suportă) la pseudo-element. Setarea suprapunerii: proprietatea ascunsă pentru o clasă de elemente ascunde o porțiune a umbrei care încalcă efectul de colț curbat.







Colțuri rotunjite

Este, de asemenea, relativ ușor de utilizat această tehnică împreună cu colțurile rotunjite. Din nefericire, fiecare browser modern are unele erori asociate cu proprietatea razei de frontieră (inclusiv cele care utilizează proprietatea fără prefix). Această situație înseamnă nevoia de muncă suplimentară.

Numai browserele Webkit pot face colțuri rotunjite pentru pseudo-elemente, dacă au numai 2 părți ale cursei. Opera 11 și Firefox 3.6 creează un ochi neplăcut pentru ochi. Mai mult, Opera 11 are eroarea maximă în acest proces.

Utilizând toate cele patru părți elimină problemele din Opera 11 și Firefox 3.6. Dar această metodă de rezolvare duce la o eroare în Safari 5, care este exprimată în derivarea liniei diagonale cu dinții. Puteți rezolva această problemă prin setarea culorii pentru cel puțin o parte a cursei ca fiind transparentă.

Culoarea fundalului va fi vizibilă prin cursa transparentă. În mod ideal, această abordare va forma un efect și va conține un minim de cod. Dar Opera 11 arată culoarea de fundal prin cursa transparentă numai dacă este setată proprietatea radius-limită.

Forma finală a codului

Mai jos este un cod CSS necesar pentru a crea efectul colțurilor curbate cu umbre ușoare și folosind doar un singur element HTML.

concluzie

Pagina demo conține exemple care folosesc culori diferite pentru a vă asigura că efectul este destul de ușor de utilizat.

Trebuie avut în vedere faptul că această tehnică funcționează mai rău atunci când folosește o imagine ca fundal pentru un element decât atunci când folosește o culoare simplă. Dar asemenea limite sunt disponibile și pentru alte metode de organizare a colțurilor.

Efectul colțurilor îndoite folosind doar css

Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!

Efectul colțurilor îndoite folosind doar css

Efectul colțurilor îndoite folosind doar css

Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!

Efectul colțurilor îndoite folosind doar css

Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.

Efectul colțurilor îndoite folosind doar css

Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!







Articole similare

Trimiteți-le prietenilor: