Și din nou, dragi cititori ai blogului. Astăzi vom încerca să facem blocuri frumoase și simple cu colțuri rotunjite numai cu CSS. Spun imediat că nu este nimic complicat, necesită doar o cunoaștere minimă a CSS și, bineînțeles, să știi unde și unde să-l ții :-)
Un plus foarte mare din aceste blocuri este faptul că ele sunt realizate numai cu CSS fără a folosi nici o imagine, ceea ce înseamnă că acestea nu suportă nicio sarcină pe server.
Ei bine, acum să vedem cum se fac.
Crearea unui bloc
În primul rând, trebuie să creăm cel mai comun bloc, pe care îl oferim o variabilă, cum ar fi Box. O vom folosi mai târziu în etichetă
Asta e tot, primul pas pe care l-am făcut, după cum puteți vedea că am setat înălțimea și lățimea aproximativă a blocului, desigur că puteți schimba aceste valori la parametrii doriți.
Proiectarea blocurilor
Acum, să vedem o vedere frumoasă a blocului, și anume, să adăugăm o umbră și în jurul colțurilor:
După cum puteți vedea, și aici puteți schimba toți parametrii după preferințele dvs., puteți schimba culoarea de fundal, raza marginilor, umbra și culoarea sa. Principalul experiment.
Acum, să aplicăm toate acestea în practică. De exemplu:
Acum, asigurați-vă că vedeți ce am primit în exemplul respectiv.
Din păcate, și din fericire, metoda folosește CSS3, iar specificațiile după standarde nu au fost acceptate, în timp ce toate browserele, inclusiv toate IE "preferate", nu acceptă sau susțin parțial "cârje". Să sperăm că în viitorul apropiat vom putea să folosim pe deplin toate caracteristicile CSS3.
Opera 11 19.45%
Chrome 16 19,15%
Microsoft Internet Explorer 8 12,8%
Firefox 9 9,52%
Firefox 8 4,84%
Microsoft Internet Explorer 9 4.72%
Firefox 3 4.49%
Microsoft Internet Explorer 7 4.37%
Chrome 12 2.1%
Multumesc multă informație a venit la îndemână)))
Articole similare
-
Cum de a face un unghi uniform - unghiuri egale pentru ouat - știință - altele
-
Cum se face linia de comandă bash multicoloră și nu numai - calculul planetei
Trimiteți-le prietenilor: