CSS şi web design-ul

Încă de la începuturile folosirii CSS-ului (Cascading Style Sheets), prin 1998 a fost înregistrat la W3C, site-urile au început să se schimbe în privinţa aspectului şi al optimizării paginii. Paginile web au devenit mai suple prin separarea conţinutului de design (grafică şi layout).

Css Zen Garden

Css Zen Garden

Csszengarden a avut un rol determinant în evoluţia designului de pagini web. Dave Shea este iniţiatorului acestui proiect care a ambiţionat o mulţime de designeri să îşi încerce forţele în CSS. Frumuseţea provocării constă din faptul că fişierul de conţinut al paginii este întotdeauna acelaşi (nu este permisă modificare lui) însă fişierele CSS, layout-ul şi imaginile (grafica) folosită sunt personalizate de fiecare designer. Este un site de inspiraţie şi de poftă de lucru. Un site unde se pot învăţa multe din exemplele prezentate (210 momentan).

Exemplu de pe csszengarden.com

Exemplu de pe csszengarden.com

Exemplu de pe csszengarden.com

Exemplu de pe csszengarden.com

Exemplu de pe csszengarden.com

Exemplu de pe csszengarden.com

Câteva exemple sunt prezentate mai sus însă merită vizitat site-ul şi văzute paginile pe viu.

Recomand folosirea unor Add-on-uri pentru Firefox precum Web Developer (pentru afişarea contururilor casetelor DIV folosite – pentru layout), JSView (pentru afişarea fişierelor CSS sau JS), Firebug (pentru structura paginii), View Source Chart (pentru vizualizarea diverselor tag-uri închise în boxuri separate, din păcate nu este gratuit pentru FF3 decât în variantă experimentală, vezi şi site-ul creatoarei Jennifer Madden), Save Complete (pentru salvarea tuturor fişierelor necesare afişării corecte a paginii, inclusiv cele specificate în fişierul css) şi Screen Grab (pentru capturarea grafică a paginilor afişate în browser. Ar mai fi şi altele însă deocamdată astea sunt cele mai utile.

Sfat:
În general când vizitez site-ul (csszengarden) şi îmi place câte un layout mă uit şi la site-ul designerului. Asta îmi oferă mai multe exemple de site-uri frumoase lucrate cu ajutorul CSS-ului. Majoritatea designerilor de acolo au site-uri frumoase. Lângă numele paginii este trecut numele designer-ului cu link spre site-ul lor.

Pe Mezzoblue (site-ul lui Dave Shea) puteţi vedea toate paginile în galeria de thumbnail-uri (http://www.mezzoblue.com/zengarden/alldesigns/) şi puteţi alege pe care din ele vreţi să le vedeţi în întregime.

Recomandat:
Dacă vreţi să vedeţi şi mai multe trucuri de cod CSS vizitaţi site-ul lui  Stu Nicholls – CSS Play (http://www.cssplay.co.uk/). Puteţi găsi multe exemple incredibile şi precis că vă vor fi utile.

CSS Play - exemplu de galerie foto de tip sliding

CSS Play - exemplu de galerie foto de tip sliding

Link-uri:
Csszengarden (http://www.csszengarden.com/)

Mozilla Firefox Add-Ons (https://addons.mozilla.org/en-US/firefox/browse/type:1/cat:4) categoria Web Development

Să aveţi spor!

Lasă un răspuns

Completează mai jos detaliile despre tine sau dă clic pe un icon pentru autentificare:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s