TheCodePlayer.com şi minunăţiile CSS3


Pentru început voi semnala un sit: TheCodePlayer.com. Acum în colţ scrie mic de tot alpha, ceea ce dă de înţeles că proiectul e proaspăt şi s-ar mai putea schimba/îmbunătăţi. Dar aşa cum este acum pe mine mă uimeşte deja şi zic: jos pălăria! Nu mă aştept din captura de mai jos să înţelegeţi prea multe… şi nici din explicaţiile mele. Dar înainte să plecaţi pe respectivul sit iată cam despre ce este vorba. În principiu am putea să îl descriem ca un showcase de ce poţi face cu HTML5, CSS, JavaScript… Dar e mai mult decât atât.

imagine

În ce sens? De exemplu mai sus e vorba de un script tare, tare de tot, ce simulează o lupă peste o imagine. E fantastic exemplu şi trebuie să mergeţi aici să vedeţi. Ei bine, se poate lua direct codul, dar mai frumos e că poţi să înveţi urmărind un fel de videotutorial doar că nu e video (filmare) deloc. Veţi vedea în banda de jos un buton de play, care, odată apăsat, începe să deruleze povestea scriptului: în partea stângă veţi vedea codul crescând de la zero la codul final, iar în dreapta codul în acţiune. Deci da, e ca o înregistrare doar că nu e video. Şi după puterea de înţelegere puteţi grăbi viteza. Clar? Aţi văzut exemplul magnific cu lupa? Vedeţi acum aici un excelent acordeon cu imagini făcut doar cu CSS3. Ce păcat că nici unul din exemple nu merge şi în IE, doar în celelalte navigatoare moderne (pe unii nu îi va mira).

imagine

Eu de fapt m-am oprit la respectivul sit pornind de la altceva: un set foarte reuşit de efecte pe imagini doar cu CSS3 – vedeţi aici. Care însă, deşi frumos, nu e atât de reuşit precum ce găsim în articolul Circle Hover Effects With CSS Transitions. Hei: lăsaţi acum articolul! Admiraţi de aici efectele în acţiune. Daţi click pe rând până la Demo 7 şi pregătiţi-vă să fiţi uimiţi. Desigur, nu dacă folosiţi IE. Bine… închei aici. Sper că unii vor găsi pe aici elemente utile pentru proiectele lor. Eu am admirat cu gura căscată şi acum mă gândesc unde şi la ce să folosesc ce am văzut.

imagine


Apreciază articolul:

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

1 comentariu

  1. Madalin spune:

    Foarte interesant site-ul si functionalitatea sa.


Lasă un răspuns

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