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:

Affrontare da zero tutte le sfide che comporta la progettazione dei fogli di stile per un progetto web può essere interessante (e direi indispensabile) da un punto di vista didattico, ma non approfittare di strumenti costruiti da consolidate comunità , che cercano di raccogliere le migliori raccomandazioni degli esperti, e che di liberano della necessità  di seguire ogni minimo dettaglio è poco raccomandabile a livello professionale (leggi: con poco tempo e poche risorse). (more...)

Continua a leggere Pure e Topcoat: due nuovi framework CSS da Yahoo e Adobe

Categoria: CSS