Il redesign di Blogging CSS, largo uso dei CSS3

Lo ammetto. Quando ho pubblicato questo blog l’ho fatto in fretta, preso un po’ dalla frenesia. M’era venuta quest’idea di recensire siti web. Certo, già pensavo “poi pubblicherò qualche tutorial, qualche articolo sul mondo del web, ecc.”, ma era tutto un po’ campato per aria.

A un mese e mezzo di distanza, Blogging CSS ha trovato (mi pare) una sua identità. Così ho deciso di rinnovare il design, prima che sia troppo tardi. In questo post vi racconto le caratteristiche della nuova versione, proprio come faccio di solito con i siti web che scelgo. Insomma, recensisco il mio stesso blog. Altro che pubblicità occulta ;) E mi raccomando: ditemi cosa ne pensate nei commenti. Siate cattivi, se vi pare.

Attenzione: se state leggendo questo post dal vostro aggregatore di feed RSS, non state vedendo la nuova versione. Venite a farvi un giro, ditemi cosa ne pensate.

Una doverosa premessa

Col nuovo stile i vecchi post sono un po’ sballati qua e là. Sistemerò tutto nei prossimi giorni.

I colori

La palette di colori è uno dei motivi principali per cui ho deciso di rinnovare Blogging CSS. Quelli della versione precedente erano troppo scuri, in particolare mi sembrava che il testo dei post fosse poco leggibile, e che nemmeno le immagini spiccassero poi tanto sullo sfondo (quasi) nero.

Sono andato su Siteinspire, un’ottima galleria di siti CSS che seleziona soprattutto design minimalistici, e ho messo insieme un po’ di colori scelto da un po’ di siti. Ne è venuta fuori questa palette:

Mi sono reso conto solo in un secondo momento che i colori sono molto simili a quelli del blog di Stephen Caver, un blog che ho recensito un po’ di tempo fa e che mi piace molto. Caver però usa l’arancione come colore primario, io il blu, poi le tonalità non sono proprio le stesse, qualche differenza c’è. A voi questi colori piacciono?

Lo sfondo

All’inizio avevo pensato di utilizzare uno sfondo completamente vuoto, ad eccezione di un lungo rettangolo colorato uniformemente di questo verdino come sfondo della sidebar. In un secondo momento ho aggiunto due fasce azzurre sotto la colonna dei post: mi sono piaciute al punto che da lì al risultato finale il passo è stato breve. Mi pare che diano un bel senso di movimento senza finire nel disordine. Che dite voi?

Il logo

Per quanto il vecchio logo mi piacesse parecchio, il font che utilizzavo (che si chiama Exus Pilot) era poco leggibile. Questa volta sono andato sul sicuro. Per chi fosse curioso, la parola Blogging è scritta con il font Geo Sans Light, la parola CSS con il font Coolvetica.

Il menu

Avevo già in mente di rinnovare Blogging CSS quando ho scoperto questo set di icone (pensato per l’iPhone) realizzato da Glyphish. Non appena le ho viste ho deciso: “Le voglio sul mio blog”. Credo molto nell’usabilità delle icone: un segno grafico può essere molto più evocativo di una parola. Poi queste le trovo bellissime: per le voci di menu ho utilizzato dei semplici link testuali senza sfondo proprio per farle risaltare.

La tipografia

Io vado pazzo per Cufòn, il sistema di sostituzione dei font sul quale ho scritto un tutorial qualche tempo fa. E’ estremamente semplice da usare ed è capace di cambiare la faccia ad un sito web. Nella nuova versione lo uso con il font Geo Sans Light per sostituire i titoli dei post in home page, i titoli dei widget nella sidebar e i link ai social network al termine di ogni post.

CSS3 a go go

Quando ho cominciato a pensare al redesign di Blogging CSS mi sono detto: un blog sui CSS dev’essere all’avanguardia in fatto di CSS. Ecco cos’ho utilizzato:

Opacity

Ho utilizzato la proprietà opacity (che era già presente nella specifica CSS2, ma per esempio non è supportata da Internet Explorer) per lo sfondo blu dei titoli in home page.

Text-shadow

Ho applicato una leggerissima ombreggiatura alle voci di menu e ai link della sidebar. In realtà è un’ombreggiatura solida, non sfumata, ma è comunque ottenuta utilizzando la proprietà text-shadow dei CSS3.

Box-shadow

L’effetto più evidente è l’ombreggiatura applicata alle immagini, ottenuto con la proprietà box-shadow dei CSS3: con questo “trucco” sembra davvero che le immagini saltino fuori dalla pagina web, soprattutto quelle più chiare.

Attenzione: se utilizzate una qualsiasi versione di Internet Explorer, una versione di Firefox precedente alla 3.5 o una versione di Safari precedente alla 3.1 non vedrete nulla di tutto ciò. Ovviamente i contenuti sono gli stessi e il blog funziona perfettamente, vi perdete giusto un po’ di effetti speciali ;)

E non finisce qui…

C’è ancora parecchio da fare (migliorare il footer, aggiungere qualche widget, ecc.), ma non posso “spegnere” il blog troppo a lungo, perciò il resto lo farò gradualmente. Magari ci butto dentro qualche altra proprietà dei CSS3 :D

Compatibilità cross-browser

Su Safari, Chrome e Internet Explorer 8 la nuova versione ha solo qualche difetto, in particolare con i CSS3: a parte IE8 che non li supporta, mentre non mi piace come Chrome rende l’ombreggiatura del testo. Su Internet Explorer 7 ho qualche problema con Cufòn, per qualche motivo non riesco a sostituire il testo dei titoli e dei link ai social network a fondo post. Indagherò.

Il punto è che se state navigando utilizzando uno di questi browser, mi scuso per questi problemi: verranno risolti nei prossimi giorni.

Discorso a parte per chi usa Internet Explorer 6. La nuova versione non è stata nemmeno testata su IE6, perchè non ho intenzione di supportare questo browser, almeno per progetti personali. Sorry.

Blogging CSS International

Blogging CSS parte alla conquista del mondo. Tra pochissimo (probabilmente domani, al massimo dopodomani) lancerò la versione inglese del blog. Fatemi gli auguri!

E voi?

Che ne pensate della nuova versione? Mi interessa davvero molto saperlo. Forza, fatevi sentire!

Pubblicato in Showcase, Siti css.
Tag: blog, blogging css, box-shadow, CSS3, opacity, Siti css, text-shadow