CSS poate scuti de Photoshop


Ca unul care când e vorba de CSS mă pricep cât să îmi formatez elementar ceea ce îmi trebuie (de la culori la margini, spaţiere, tipuri de caracter şi altele), fără să stăpânesc tehnici avansate, mă bucur şi fac “uau” când văd efecte frumoase realizate din doar câteva linii. Aşa că am scos un nou “uau” astăzi văzând articolul Quick Tip: Don’t Always Jump Back to Photoshop. Despre ce este vorba în articol? Se porneşte de la primul grafic, un PNG bun pentru un buton gen “citiţi mai departe”. Cele trei care urmează mai jos nu sunt realizate cu vreun editor grafic. Mda. Ci via CSS (evident, eu am pus capturi).

imagine

În tutorialul pe care în formă video îl puteţi vedea mai jos, Jeffrey ne arată cum cu box-shadow şi box-radius, cu variaţiile lui pentru diversele navigatoare, poţi să simulezi o umbră (chiar şi interioară, cu inset), de ce grosime, culoare şi transparenţă vrei. Avantajul? Desigur, în primul rând că nu mai lansezi Photoshopul să creezi replicile pentru celelalte stări ale unui buton (mouse peste şi apăsat), dar mai importată e flexibilitatea câştigată. La o schimbare de temă schimbi imaginea (un PNG) şi doar dacă e cazul şi ceva în CSS. Ce simplu… Găsiţi urmând linkul de mai sus codul complet. O demonstraţie live este aici, şi dacă doriţi sursa spre studiu daţi click aici. Acum vine tutorialul (mutaţi pe full screen)…

PS: M-am mirat de ce în IE şi Opera, ultimele, arată trăznet, iar în Chrome nu. Apoi în comentarii am citit că Chrome are temporar probleme cu radius/inset, dar versiunea Canary le-a depăşit deja. Deci în curând va merge perfect şi în Chrome. Frumos e că în navigatoarele mai vechi pur şi simplu vezi butonul grafic iniţial şi gata. Fără variaţii la mouse deasupra sau apăsare.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5,00 din 5)
Loading...Loading...

2 comentarii

  1. ValsiS spune:

    Foarte interesant… La cat mai multe articole despre web development.

  2. Danu spune:

    Multumesc MULT!


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *