àˆ nata da poco Liquid Designs, una galleria di siti basati sui CSS e rigorosamente con layout liquidi (o fluidi che dir si voglia). Un'ottima fonte di ispirazione, insomma, anche perché realizzare un layout di questo tipo, con una buona gestione dello spazio, una grafica accattivante e soprattutto un'adattabilità  alle varie risoluzioni dello schermo non è sempre cosa semplice.Oltre che nella Guida ai layout con i CSS, ci sono diversi articoli sull'argomento nella sezione PRO. àˆ una buona occasione per ricordarli. Il primo della serie è quello sui layout liquidi a due colonne, a cui sono seguiti l'articolo sul layout a tre colonne, e il recente Layout con i margini negativi.Infine, credo che meriti uno studio attento l'esempio del layout progressivo a tre colonne (e in particolare la versione senza Javascript) presentato nel relativo articolo. Il layout, sebbene con colonne a larghezza percentuale, è basato sulla tecnica dei float opposti di cui si parla negli articoli Float: teoria e pratica - II e Layout tutto-float.

Continua a leggere Layout liquidi con i CSS

Categoria: CSS

I tutorial passo per passo sono uno dei modi più efficaci per imparare, in quanto affrontano insieme teoria, pratica e metodologia di sviluppo. Se si parla di tutorial e di CSS gli articoli da citare sarebbero davvero a migliaia, ma i tutorial che portano a realizzare un'intera pagina con i CSS si contano sulle dita di una mano.Ne segnalo alcuni veramente validi, con una raccomandazione: seguiteli attentamente e soprattutto dosateli con pazienza.Site in an hour di Andrew Krespanis è una presentazione che parte dal markup, attraversa i CSS fino ad aggiungere l'interazione con Javascript. Building a page template di Russ Weakley è un'eccellente presentazione che mostra la pagina prendere forma insieme alle regole CSS aggiunte man mano.Se insieme al CSS volete seguire anche lo sviluppo della grafica sono da non perdere la serie in otto parti Designing a CSS based Template di Veerle Piers e il mastodontico Get cooking with CSS and Photoshop su SitePoint.

Continua a leggere CSS: i tutorial imperdibili

Categoria: CSS

Tabelle e CSS

30 Sep

Non voglio riattizzare qui la discussione sull'uso delle tabelle nella costruzione dei layout, ché francamente mi sembra un argomento poco attuale. Voglio invece parlare delle tabelle usate per il loro scopo primario: racchiudere dati tabulari. La loro formattazione con i CSS può risultare a volte complicata e fonte di mal di testa può essere anche la solita inconsistenza nel supporto dei fogli di stile tra i vari browser. Vi propongo allora due risorse.La prima è più teorica. Styling Tables with CSS risale a due anni fa, ma mantiene ancora tutta la sua validità  come tutorial completo e analitico sull'argomento.La seconda è invece tutta rivolta alla pratica e può essere buona per i meno esperti. Si tratta di questo wizard utile alla generazione automatica del codice CSS necessario alla formattazione di una tabella. Ecco cosa ho ottenuto in pochi secondi cliccando su qualche pulsante dell'applicazione: Il wizard funziona alla perfezione con Firefox, mentre ha un po' di problemi con IE. Il funzionamento è molto intuitivo. Tramite i pulsanti e qualche campo di testo è possibile specificare le caratteristiche per bordi, padding e sfondi della tabella e degli elementi discendenti (th e td). Il risultato finale viene aggiornato automaticamente man mano che si settano le varie impostazioni. Una textarea accoglie il codice finale, pronto per essere copiato e incollato.Attenzione però. Come fa notare anche l'autore, il wizard consente di intervenire su proprietà  come border-spacing o -moz-border-radius non supportati da Explorer. Il test diretto con il browser di Microsoft è pertanto vivamente consigliato.

Continua a leggere Tabelle e CSS

Categoria: CSS

Tags:

Poco tempo fa D. Keith Robinson di Asterisk ha fatto un redesign del suo sito. Seguendo l'idea di Derek Powazek di cui ho parlato in questo post, ha spostato la navigazione a fondo pagina rivedendo il markup. Dopo una settimana Robinson riporta che il sito ha avuto un calo di visite del 70% (traduco dall'inglese):Ho il sospetto che potrebbe avere a che fare con il fatto che ho tolto la navigazione dalla cima della pagina. La navigazione conduceva agli archivi tra le altre cose. Ora, non sono un esperto di come Google indicizza le pagine, ma so che di solito ci mette circa tre giorni a indicizzare una nuova pagina. àˆ stato esattamente tre giorni dopo il mio redesign che ho notato il calo.Ho così preso spunto dalla cosa e mi sono chiesto: è possibile avere una navigazione che sia in cima al codice HTML ma si presenti visivamente a fondo pagina? (more...)

Continua a leggere Navigazione-footer con i CSS

Categoria: CSS

I filtri CSS

27 Sep
di

Quante volte ci è capitato di dovere combattere con la compatibilità  dei browser? Anche se gli hack e i filtri non sono l'unico sistema per risolvere un problema, a volte sono l'unica via d'uscita.Su questo sito ne troverete un'ampia collezione, divisa in comode tabelle. I filtri e gli hacks si dividono i quattro gruppi:CSS filtering using CSS only: Usati solo all'interno dei CSS, o parzialmente nel markup (X)HTMLCSS filtering using (X)HTML: Usati solo all'interno del markup (X)HTMLCSS filtering using Javascript: Filtri che utilizzano Javascript. Su questi ultimi, bisogna prestare molta attenzione poichè non tutti gli utenti hanno un browser con supporto Javascript, e a volte lo stesso è disabilitato.Non-validating Hacks: Hacks che non possono essere validati. Dubbio anche su questi ultimi, poichè non si conosce il comportamento futuro di browser totalmente compliantIn ogni caso, questo CSS Filters andrebbe aggiunto ai propri bookmark. In molti casi può rivelarsi come un vero salvavita, specie quando servono soluzioni rapide.

Continua a leggere I filtri CSS

Categoria: CSS

I CSS3 sono per ora un working draft. Dovremo aspettare non poco per poterli usare con sicurezza e soprattutto per avere risultati omogenei su tutti i browser. Offriranno molte più possibilità , ma saranno anche più complessi. Certi browser, comunque, stanno già  facendo piccoli passi avanti nell'implementazione di questa nuova versione. (more...)

Continua a leggere Piccoli passi verso i CSS3

Categoria: CSS

Uno dei miei primi articoli su PRO, che risale a circa due anni fa, è quello sul box model. Ho pensato di proporre su questo blog un post su una delle tecniche che non è presente in quell'articolo, una tecnica di facile applicazione, solida, robusta e a prova di futuro.Rivediamo brevemente il problema: se assegniamo una larghezza esplicita a un elemento, secondo le specifiche CSS questo valore indicherà l'area utile al contenuto, bordi e padding esclusi. Internet Explorer 5.0, 5.5 (e la versione 6 in quirk mode, ovvero senza un corretto doctype), interpreteranno tale valore come la larghezza totale dell'elemento, includendo erroneamente, quindi, bordi e padding. Per ottenere un dimensionamento consistente le possibili soluzioni sono due: Evitare di specificare la larghezza effettiva all'elemento e insieme bordi e/o padding Usare uno delle tante versioni del box model hack (more...)

Continua a leggere Box Model e workaround

Categoria: CSS

Stu Nicholls è uno degli ultimi pionieri dei CSS e le sue sperimentazioni, che si possono trovare sul suo sito CSSPlay, mi hanno sempre affascinato. Il suo più recente tutorial presentato su WebReference è incentrato su questo tema: come costruire una galleria fotografica interamente basata sui CSS. Il risultato è decisamente sorprendente. Non si può mettere in dubbio un uso davvero creativo dei CSS, ma non è solo sotto l'aspetto scenografico che bisogna valutare la bontà di una tecnica. Ci sono almeno quattro motivi per cui non la userei mai in un progetto reale. (more...)

Continua a leggere Una galleria fotografica con i CSS

Categoria: CSS

Un articolo piuttosto recente e divenuto ormai famoso tra gli appassionati di CSS è Creating a Star Rater using CSS, un tutorial in cui si spiega come ottenere un meccanismo di votazione con i CSS: il risultato è molto accattivante e decisamente intuitivo per l'utente. Due parole sull'implementazione: per la comprensione della tecnica ci sono alcuni elementi chiave: il fast CSS rollover, i posizionamenti assoluti, il cambio di dimensioni dei link in stato :hover e soprattutto l' uso sapiente dello z-index. Il CSS è semplice, anche se un po' lunghetto. Komomedia, il sito che ospita l'articolo mi era già noto per la sua menzione su uno dei miei siti preferiti: Devil's detail, che si occupa di evidenziare soluzioni e dettagli di interfacce e widget di siti web. In effetti, il menu laterale che combina tabs e scroller con CSS e Javascript è sorprendente. Ho un po' di dubbi sulla sua usabilità con Javascript disabilitato... Tornando ai menu con rollover, un altro articolo recente degno di nota è Running with Sprites (su un altro sito davvero spettacolare) in cui un menu con rollover viene assegnata anche un'immagine per lo stato attivo. Il risultato è davvero interessante, mi raccomando non perdetevi l'esempio con Gundam. Infine, per un ripasso sui menu con rollover via CSS ricordo la serie sui Menu grafici e semigrafici con i CSS nella sezione omonima di PRO. Ecco i link agli articoli: Parte I: menu semigrafici Parte II: fast CSS rollover Parte III: rollover su immagini Parte IV: fast CSS rollover rivisto Parte V: navigation matrix In particolare da non perdere l'ultimo della serie, il mio preferito.

Continua a leggere Rollover: nuove idee con i CSS

Categoria: CSS