Una volta c'era la Pixel Art, oggi è tutto un proliferare di creatività targata CSS: grazie al supporto sempre più diffuso delle proprietà CSS3 di animazione e trasformazione, possiamo assistere a delle piccole opere d'arte in quanto a creatività ed impatto. Codici non sempre usabili e proponibili nel quotidiano, ma ottimi spunti per capire a fondo certe potenzialità (un po' come fece CSS Zen Garden una quindicina d'anni fa...). Ecco una lista di 10 esempi di CSS Art, qualcuno recente e qualcuno probabilmente già visto: (more…)

Continua a leggere 10 esempi di CSS Art

Categoria: CSS

Tags:

Ereditare vecchi siti per doverli ottimizzare e ripulire nel loro codice, può significare a volte scontrarsi con un'intricata giungla di stili inline aggiunti tramite editor WYSIWYG. Il tool online ExtractCSS può essere utile per raggruppare tutte le dichiarazioni CSS trovate nel codice HTML e raggrupparle in un unico blocco, pronto all'esportazione. (more…)

Continua a leggere Rimuovere i CSS inline con ExtractCSS

Categoria: CSS

Mi è capitato ultimamente di provare la versione 2 di Normalize.css, alternativa al famoso CSS Reset di Eric Meyer, le cui ultime minor release lo rendono sempre più conforme agli standard HTML5 e al supporto dei più recenti browser. Avendolo usato soltanto in versione 1 più di 1 anno fa, devo riconoscerne una migliorata resa in partenza e una considerazione nel dualismo con l'altro Reset. (more…)

Continua a leggere Normalize vs Reset

Categoria: CSS

Tags:

Un'ottimo esempio di come giocare in maniera estrema con i metodi 3D, offerti dalle recenti specifiche CSS3, e creare qualcosa di diverso dal solito: un cubo 3D per la visualizzazione di immagini. Una soluzione impensabile da realizzare fino a pochi anni fa senza l'ausilio di flash o simili, resa ormai possibile tramite i soli CSS. L'autore ha utilizzato questo approccio nel suo sito web per creare l'effetto rotativo in primo piano, estendendola poi con la creazione di un cubo e relativo movimento di ogni sua faccia. (more…)

Continua a leggere Un cubo 3D per le immagini con CSS3

Categoria: CSS

Tags: ,

I framework CSS permettono di gestire rapidamente le regole di stile per il proprio sito Internet o per la propria Web application influendo positivamente sui tempi necessari per passare dalla fase di sviluppo a quella di deployment; in questo senso le soluzioni disponibili sono numerose e in buona parte utilizzabili gratuitamente e liberamente, alcune di esse sono però sovradimensionate rispetto all'entità di buona parte dei progetti che si desidera implementare. (more…)

Continua a leggere 5 mini-framework CSS

Categoria: CSS

Cameron McCormack, sviluppatore della Mozilla Foundation, ha recentemente confermato l'introduzione di un supporto iniziale per la dichiarazione e l'utilizzo delle variabili CSS nell'attuale versione Nightly build di Firefox; tale funzionalità è stata una delle più richieste dai componenti del CSS Working Group e dovrebbe essere disponibile in via definitiva con Firefox 29. (more…)

Continua a leggere La Nightly di Firefox 29 introduce il supporto per le variabili CSS

Categoria: CSS

Se si parla di Responsive Design si pensa subito alla recente tendenza di adattare le pagine web a tutti i dispositivi utilizzati per la fruizione, ma altrettanta attenzione andrebbe riposta anche nella creazione di newsletter responsive. Sono ormai molti (e diversi fra loro) i client email desktop o web based, e di conseguenza diversi i possibili rendering dei nostri template HTML. Uno strumento di sviluppo che può darci una mano è Ink: un mini framework CSS pronto all'uso, da trasformare in una perfetta email responsive. (more…)

Continua a leggere Ink: framework CSS per responsive email

Categoria: CSS

Diverse proprietà CSS3 stanno aiutando gli sviluppatori ad evitare l'uso di immagini decorative (vedi gradienti, sfumature e ombreggiature), in questo caso non c'è nulla di nuovo se non un approccio diverso nel mostrare o nascondere contenuti e bordi. Ecco quindi un video breve ma efficace, per spiegare in pochi frame come ottenere un triangolo con i CSS, da utilizzare come segnaposto o indicatore al posto di un'immagine. (more…)

Continua a leggere Disegnare triangoli con i CSS3

Categoria: CSS

Ecco una simpatica gallery con menu di navigazione, che sfruttano esclusivamente alcune nuove proprietà introdotte con i CSS3: l'obiettivo è fornire spunti per creare un'interazione diversa dal solito senza usare né immagini, né JavaScript. Il markup è sviluppato in modo standard, un elemento <nav> che contiene l'elenco di link, mentre l'animazione si basa sugli attributi transform e transition, a volte arricchiti da un'aggiunta di elementi (es: le brackets dell'esempio n.1) tamite le pseudoclassi :before e :after, che alterano la posizione e la forma dei link. Piacevole l'effetto di rotazione del terz'ultimo esempio (in rosso), che conferisce un aspetto 3D alle voci selezionate. Vale la pena dare anche un'occhiata ai 2 link proposti a fondo pagina, con effetti (similari) da applicare a bottoni ed icone.

Continua a leggere Menu creativi con CSS3

Categoria: CSS

Tags: ,

Voluta da Paul Irish, effeckt.js è una raccolta di animazioni basate sui keyframes CSS 3 ospitata su GitHub . Nella pagina dedicata alle demo sono presenti effetti per pulsanti di caricamento, liste dinamiche, transizioni di pagina, didascalie, modal Windows e menu di navigazione off-screen. (more…)

Continua a leggere Effeckt.css: animazioni CSS per mobile

Categoria: CSS

Tags: