Mici trucuri cu HTML5 şi CSS


Măi, măi… HTML5 începe să mă încânte tot mai mult! Zilele trecute a apărut pe Net.tutplus.com un scurt material, de fapt un clip YouTube – Quick Tip: New HTML5 Form Features. Acolo se prezintă câteva trucuri care deja sunt suportate de unele navigatoare. De exemplu dacă sunteţi în Chome şi citiţi acest email de pe CNet.ro atunci priviţi în dreapta-sus la boxa de căutare. Vedeţi că scrie acolo cu gri „cautati…”? Un click în boxă şi textul dispare. Un click în afara boxei de căutare şi textul reapare. Desigur… trucul e vechi… dar se făcea cu JavaScript! Acum a ajuns să adaug placeholder=”căutaţi…” şi gata! Uau… Iar un autofocus face ca un câmp să aibă deja cursorul înăuntru, din nou fără JavaScript suplimentar!

[HTML]<form>
<input type="text" name="firstname" placeholder="john" />
<input type="text" name="lastname" autofocus />
<input type="url" name="url" />
<input type="email" name="email" />
<input type="submit" name="submit" />
</form> [/HTML]

Iată şi clipul (urmăriţi-l pe tot ecranul, căci e în HD)…

Astăzi acelaşi sit a publicat un alt Quick Tip: Multiple Borders with Simple CSS. Atenţie: nu e un truc CSS3! Doar că e ceva ce autorul mărturiseşte că abia a aflat… iar eu asemenea… şi probabil mulţi dintre noi. Câţi am mai folosit :before şi :after pentru un div? Iată clipul cu acest truc interesant.

PS: Dacă mergeţi pe tagul video veţi găsi şi alte clipuri similare, interesante.


Apreciază articolul:

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

0 comentarii


Lasă un răspuns

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