Workshop Ogni anno ad Amsterdam l’associazione Fronteers organizza dei workshop dedicati mondo del front-end development. Tra i relatori dell’edizione 2012 vi è anche la nota Lea Verou, nel suo talk – Altre 10 cose che forse non sapete sui CSS – mostra 10 aneddoti CSS3 molto interessanti. L’intervento di Lea Verou Ti riporto di seguito il video [...]
Dalla teoria alla pratica In questo periodo sto cercando di dare più spazio all’aspetto pratico del blog attraverso esempi concreti, la teoria è importantissima ma poi bisogna passare alla pratica no?! In questo post ho cercato di realizzare una sorta di insegna luminosa con effetto luce a intermittenza. Il Codice necessario L’html è formato da [...]
Elimina! In questo post troverai una mia realizzazione riguardo all’eliminazione di un prodotto da carrello. Ho cercato di riprodurre un’effetto simile a quello della gestione dei brani musicali su iphone, praticamente quando si vuole eliminare una canzone da un album. Vediamo in che modo. Codice Html Come prima cosa ho impostato il codice html. Questa lista [...]
Quarta e ultima parte Eccoci giunti all’ultima parte dedicata agli eventi in css. Questa tecnica che sto per descrivere è stata ideata da Joel Besada e si basa su una transizione css. Vediamo di che si tratta. Codice html e css Allora, l’idea è piuttosto semplice, al click dell’elemento span si crea una transizione con [...]
Il Simurai del CSS Conoscete simurai.com? Si tratta di un blog nel quale l’autore si diverte a sperimentare con codice CSS3, un vero e proprio parco giochi personale. Nel suo ultimo post Sim (il nome dell’autore) crea un’animazione frame by frame, quella dei cartoni animati per intenderci, attraverso l’opzione steps() della proprietà animation-timing-function. Prendendone ispirazione [...]
Disegna con i CSS! I Css3 hanno dato una buona svolta non solo alle pagine web ma sono anche uno stimolo in termini di creatività. Personalmente resto molto affascinato quando mi ritrovo davanti un’illustrazione effettuata esclusivamente con i css, ammiro molto la pazienza dei creatori In questo articolo ne ho raggruppate alcune. Mi raccomando, se [...]
Facciamo subito pratica In questo articolo vedremo in funzione le sette proprietà dell’animazione dei CSS3. Cominciamo subito con l’ esempio: prendiamo un’immagine (nel nostro caso una bolla) e inseriamola all’interno del tag body: Dopodichè cominciamo a stilare il nostro css. La prime proprietà che andremo a settare sono le “@keyframes” (permettono di definire un’animazione nel [...]