Slider in puro CSS3
Giovedì 19 Aprile 2012 - 15:22
di Kiko
L’elemento slider nel design moderno è sempre più prezioso. Permette di salvare spazio raggruppando immagini e contenuti in pannelli scorrevoli, molto eleganti da presentare e assolutamente efficaci in ottica usabilità e “presentazione”. L’uso di immagini grandi e significative permette, più di ogni altra cosa, di catturare subito l’attenzione del visitatore.
Continua a leggere Slider in puro CSS3
Categoria: CSS | Permalink | Commenti (7)
Sull’abuso dei framework CSS
Mercoledì 18 Aprile 2012 - 10:07
di Gabriele Romanato
Fino a qualche anno fa i CSS erano un linguaggio progettato per essere semplice da usare e da gestire. L’esempio più convincente di questa loro caratteristica era sicuramente CSS Zengarden, che da una comune struttura HTML mostrava come fosse possibile creare layout di notevole impatto visivo. Il culmine si ebbe nel biennio 2006 - 2008 e coincise con l’avvento dei social network. Di colpo i CSS furono costretti a dover gestire layout non complessi da un punto di vista grafico (Facebook è sostanzialmente semplice a livello di impaginazione) ma sicuramente impegnativi per il numero di strutture HTML da formattare. Da lì gli sviluppatori sentirono la necessità di condensare alcuni pattern e best practices in strumenti per il riutilizzo del codice e la semplificazione del workflow. Nacquero così i framework CSS.
Continua a leggere Sull’abuso dei framework CSS
Categoria: CSS | Permalink | Commenti (13)
CSS Image Replacement: 2 nuove tecniche
Venerdì 13 Aprile 2012 - 14:56
di Marco Pontili
Negli ultimi giorni, sono state pubblicate 2 nuove tecniche di CSS image replacement (rimpiazzare via CSS il testo di un elemento con un immagine) molto interessanti.
La prima, pubblicata da Jeffrey Zeldmann sul suo blog, non fa uso di text-indent negativo (avete presente ‘text-indent: -9999px’?) e usa anche le proprietà white-space e overflow per assicurare l’invisibilità di possibili testo e spazio in eccesso.
Continua a leggere CSS Image Replacement: 2 nuove tecniche
Categoria: CSS | Permalink | Commenti (3)
CSS3 Click Chart: 50+ proprietà da consultare al volo
Giovedì 23 Febbraio 2012 - 15:39
di Marco Pontili
Nel caso vi sia sfuggita, CSS3 Click Chart è una comodissima e completa raccolta di 50+ proprietà CSS3 di facile comprensione e utilizzo creata da Louis Lazaris, web developer che scrive sul blog “Impressive Webs”.
Breve descrizione, codice, applicazione pratica, browser supportati ed eventuali script per quelli non supportati e tutorial di qualità da link esterni.
Continua a leggere CSS3 Click Chart: 50+ proprietà da consultare al volo
Categoria: CSS | Permalink | Commenti (2)
Il W3C già al lavoro sui CSS4
Venerdì 17 Febbraio 2012 - 17:06
di Fabio Lelli
Siamo invasi da notizie, tutorial e risorse relative alla potenza dei CSS3, ma questo non significa che l’evoluzione dei fogli di stile si sia fermata. Il 29 settembre dello scorso anno il W3C ha rilasciato una prima bozza delle specifiche dei CSS versione 4 incentrata completamente sui nuovi selettori. Al di là di tutti gli effetti grafici che ci possiamo aspettare da una nuova versione dei fogli di stile, sono infatti i selettori una delle caratteristiche determinanti di questa tecnologia; le nuove proposte ci consentono anche di misurare il livello di attenzione del W3C rispetto alle reali esigenze degli sviluppatori di siti web.
Continua a leggere Il W3C già al lavoro sui CSS4
Categoria: CSS, Web Standards | Permalink | Commenti (9)
Twitter Bootstrap 2.0, il toolkit da designer per lo sviluppo Web
Martedì 14 Febbraio 2012 - 09:15
di Marco Pontili
Twitter ha rilasciato un corposo aggiornamento del suo famoso framework Bootstrap che è possibile vedere in azione sul sito ufficiale e scaricare direttamente da GitHub.
Leggendo un articolo su A List Apart in italiano che spiega il processo di creazione del framework, è chiaro come Twitter l’abbia vista lunga pubblicando e condividendo un progetto così completo.
Twitter Bootstrap consente di scrivere codice e portare a termine un progetto senza quasi preoccuparsi di web design. Tipografia, colori, pulsanti, dropdown, tabs, slider e altro ancora possiedono un CSS definitivo con stili e convenzioni esteticamente accettate e condivise da milioni di persone…gli utenti di Twitter!
Continua a leggere Twitter Bootstrap 2.0, il toolkit da designer per lo sviluppo Web
Categoria: CSS, Web Design | Permalink | Commenti (9)
Manipolazione delle immagini con i filtri di WebKit
Mercoledì 4 Gennaio 2012 - 09:58
di Fabio Lelli
Dobbiamo abituarci, specialmente in quest’epoca dominata da HTML 5 e CSS3, all’introduzione continua di nuove tecnologie che ampliano l’orizzonte delle possibilità di programmazione ed interazione tramite il web. Da un paio di settimane è stata rilasciata Filter Effects una nuova specifica, ancora in fase di sviluppo, per la manipolazione avanzata delle immagini tramite dichiarazioni CSS.
Continua a leggere Manipolazione delle immagini con i filtri di WebKit
Categoria: CSS, Web Standards | Permalink | Commenti (3)
Griglie CSS fluide: consigli per l’uso
Martedì 27 Dicembre 2011 - 09:00
di Gabriele Romanato
Le griglie CSS non sono una novità. Fin dagli anni ‘90 con Netscape 4 e con la nascita di Gecko nel 1998, i browser hanno da sempre diviso la pagina in un fitto reticolato di zone rettangolari chiamate frame. Per questo motivo, le griglie CSS sono semplicemente la rappresentazione visuale di una struttura preesistente. Esistono varie implementazioni di griglie CSS (960Grid System, Blueprint eccetera), ma quando si tratta di lavorare su progetti particolari i framework esistenti possono non soddisfare i requisiti del progetto. In particolare, le sfide poste dal mercato del mobile riportano d’attualità il tema dei layout fluidi e della necessità di usare griglie fluide. Certo, le media queries CSS3 possono evitare il problema, ma siamo sicuri che la soluzione più complessa è anche la migliore?
Continua a leggere Griglie CSS fluide: consigli per l’uso
Categoria: CSS | Permalink | Commenti (2)
Usare CSS3 senza preoccuparsi dei vendor prefix
Venerdì 25 Novembre 2011 - 10:30
di Maico Orazio
Quando scriviamo codice CSS usare i vendor prefix, i prefissi specifici dei browser per utilizzare le proprietà CSS3 più recenti, rende il codice più lungo e difficile da mantenere, perché ogni volta che abbiamo bisogno di cambiare il valore di una proprietà dobbiamo cambiarli per tutti i rispettivi prefissi.
È difficile ricordarli tutti ed inoltre richiede tempo scriverli per ogni browser, per questo scopo possiamo utilizzare un validissimo tool online CSSPrefixer, che aggiunge i prefissi automaticamente alle proprietà CSS dello standard W3C generando le nuove proprietà specifiche dei browser.
Continua a leggere Usare CSS3 senza preoccuparsi dei vendor prefix
Categoria: CSS, Scripting | Permalink | Commenti (3)
Animazioni CSS facili con Animate.CSS
Giovedì 24 Novembre 2011 - 11:30
di Kiko
Come implementare le animazioni all’interno delle nostre pagine web? Una risposta plausibile potrebbe riguardare l’uso di jQuery o simili librerie e scrivere da noi il codice necessario all’effetto che vogliamo ottenere. Altrimenti possiamo andare più spediti, scaricare Animate.CSS e sfruttare le sue classi senza alcun bisogno di programmare alcuna riga di codice.