L’header

Carino l’effetto sul testo del titolo della testata. I caratteri slab-serif sono attraversati da uno “scheletro” tratteggiato di colore azzurro, con un leggero effetto neon.

Il menu

Il menu principale è originale e accattivante. Ognuna delle quattro voci di menu ha come sfondo un cerchio (forma raramente usata nel web design) di diverso colore, ciascuno con una sfumatura radiale. I cerchi sono intersecati tra di loro, e poichè non sono completamente opachi si creano nei punti di intersezione dei bei giochi di trasparenza. L’effetto si moltiplica al passaggio del mouse: al cerchio di sfondo se ne aggiunge un altro, leggermente più piccolo, anche questo non completamente opaco.

La sovrapposizione delle varie voci è ottenuta a livello di CSS grazie all’uso dei margini negativi.

L’uso delle immagini di sfondo

L’aspetto più originale e creativo di questo portfolio è l’uso delle immagini del blog. Per ogni post viene scelta un’immagine di presentazione accattivante, affiancata da un box con il titolo del post ed una breve descrizione. Questa stessa immagine è ripetuta sullo sfondo con un effetto pixellato che a me piace molto.

La stessa soluzione è adottata anche in altre sezioni del sito, ad esempio il portfolio.

E voi?

Vi piace questo sito? Cosa ne pensate delle immagini di sfondo pixellate? Fatevi sentire nei commenti!

Ci sono tanti siti eccezionali sotto ogni aspetto. Tanti, ma non tantissimi: la perfezione è difficile da raggiungere. Perciò capita di vedere anche molti siti carini ma appunto non eccezionali, che però ti colpiscono per qualche dettaglio, ad esempio una bella palette di colori o un form ben realizzato.

Da questa rfilessione nasce Micro ispirazioni, una rubrica che vi mostra bei dettagli di web design.

1. Punti luce del tema di Wordpress Arcade Wordpress

http://demo.obox-design.com/arcade/

Mi piacciono molto i punti luce sul tema di Wordpress Arcade. Sono ben realizzati e danno un senso metallico al design.

2. I titoli di Demonico the Day Dreamer

http://dthe3d.tumblr.com/

Simpatici e creativi i titoli di questo Tumblog.

3. La gif di sfondo di Carsonified

http://carsonified.com/team/mike/

Questa gif in realtà non fa da sfondo a tutto il sito ma solo alla pagina personale di uno dei membri dello staff di Carsonified. L’uso di gif come queste come sfondo di un sito non è sempre indicato, anzi generalmente non è una grande idea, ma in questo caso ci sta: stiamo parlando di una delle web agency più creative del mondo.

4. La tipografia di Carsonified

http://carsonified.com/

Ebbene si, ancora Carsonified. Sono un fan della tipografia perciò non potevo ignorare l’uso di grandi titoli con il font Cooper Black.

Vi consiglio vivamente di girarvi tutto il sito perchè dà molti spunti creativi. Per esempio fate caso alle icone che spuntano passando col cursore sulle voci del menu principale, all’uso delle illustrazioni che ricorre in tutto il sito, al fatto che ogni pagina ha un colore di sfondo diverso. Ispirazioni a pacchi.

5. La palette di Hope Unlimited

http://www.hopeunlimited.org/Hope Unlimited usa una palette di colori chiari e in stile grunge.

Potete trovare anche questa palette sul profilo COLOURlovers di Blogging CSS.

6. La texture di sfondo di 5pieces

http://5pieces.com/

Non mi piace molto questo sito, la texture di sfondo la trovo ben realizzata.

7. La testata di Mirasim

http://www.mirasim.com/

La testata di questo sito, coloratissima e vivace com’è, non può non conquistarvi.

8. La pagina dei contatti di Treforest

http://www.treforestdesign.com/contact.html

La pagina dei contatti di questo sito portfolio è abbastanza inusuale, a partire dal titolo What can we do for you today? (Cosa possiamo fare per voi oggi?) al layout “disordinato” delle informazioni di contatto.

9. Il layout del portfolio di James Chambers

http://www.jameschambers.co.uk/

In questo portfolio è evidente l’uso di una griglia di base, grazie a cui il designer è riuscito a realizzare un layout molto pulito e ordinato.

10. L’headline di Weightshift

http://weightshift.com/

Quest’immagine è un esempio di come un lavoro di graphic design può supportare un sito. Bellissima.

E voi?

Vi sono piaciute queste micro ispirazioni? Avete visto qualche altro buon dettaglio e volete suggerirmelo? Scrivetemi.

Compatibilità cross-browser di box-shadow

Vi dico subito quali browser supportano la proprietà box-shadow, così sapete se con il vostro browser potete divertirvi a fare qualche esperimento oppure no.

Box-shadow è supportata da Firefox (a partire dall’ultima versione, la 3.5), da Safari (a partire dalla versione 3.1) e da Chrome (sin dalla prima versione). Non è supportata da Internet Explorer (nemmeno dalla 8) e da Opera (che dovrebbe supportarla dalla versione 10).

Attenzione: per far funzionare la proprietà box-shadow nei browser che la supportano, è necessario anteporre al nome della proprietà un prefisso relativo al motore del rispettivo browser. Così per utilizzarla con Firefox il nome della proprietà sarà -moz-box-shadow, per utilizzarla con Safari e Chrome sarà invece -webkit-box-shadow.

I valori della proprietà box-shadow

Box-shadow può avere fino a quattro valori numerici:

• il primo valore corrisponde allo slittamento (offset) in pixel dell’ombreggiatura in senso orizzontale;
• il secondo valore corrisponde allo slittamento in pixel dell’ombreggiatura in senso verticale;
• il terzo valore corrisponde al grado di sfocatura dell’ombreggiatura;
• il quarto valore corrisponde al grado di diffusione dell’ombreggiatura;

Inoltre, box-shadow può assumere altri due valori non numerici:

• il colore dell’ombreggiatura, espresso con il valore esadecimale;
• la parola inset: se presente, l’ombreggiatura diventa interna invece che esterna.

Il box

Creiamo un box per sperimentare la proprietà box-shadow dei CSS3. Nell’HTML aggiungiamo semplicemente un div vuoto che sarà il nostro box:

<body>
<div id="box"></div>
</body>

Nel CSS scriviamo questo:

body { background-color:#EBEBDF; }

#box {
	width:300px; height:300px;
	margin:100px auto 0;
/*	-moz-box-shadow:inset 10px 10px 40px 20px #fff;
	-webkit-box-shadow:10px 10px #555;*/
	background-color:#6B86A6; }

Ed ecco il nostro box:

Lo slittamento dell’ombreggiatura

Aggiungiamo la proprietà box-shadow nel file CSS. Attenzione: per questo tutorial userò la dichiarazione necessaria al funzionamento in Firefox, quindi -moz-box-shadow. Ricordate che per utilizzarla in Safari o Chrome basta sostituire webkit a moz.

Per il momento dichiariamo solo il colore e i valori dello slittamento dell’ombreggiatura:

#box { -moz-box-shadow:10px 10px #aaa; }

Ed ecco il risultato:

Vediamo che per mezzo dei CSS abbiamo creato un’ombreggiatura di 10px sia in direzione orizzontale che in direzione verticale del colore corrispondente al valore esadecimale dichiarato.

Potremmo usare anche dei valori negativi: in questo caso, l’ombreggiatura slitta verso destra e verso l’alto invece che verso sinistra e verso il basso. Se per esempio dichiariamo la proprietà box-shadow in questo modo:

#box { -moz-box-shadow:-10px -10px #aaa; }

avremmo questo risultato:

L’ombreggiatura però è ancora solida in entrambi i casi. La sfumiamo nel passaggio successivo.

La sfocatura dell’ombreggiatura

Nella stessa proprietà box-shadow precedentemente aggiunta nei CSS, aggiungiamo un terzo valore, che corrisponde al grado di sfocatura dell’ombreggiatura:

#box { -moz-box-shadow:10px 10px 10px #aaa; }

Possiamo vedere che con l’aggiunta di questo valore l’ombreggiatura viene sfocata:

Ovviamente, maggiore è il valore maggiore è la sfocatura. In questo caso non sono ammessi valori negativi.

La diffusione dell’ombreggiatura

Per capire esattamente come funziona la diffusione dell’ombreggiatura, azzeriamo per il momento il valore della sfocatura, ed aggiungiamo un quarto valore corrispondente appunto alla diffusione:

#box { -moz-box-shadow:10px 10px 0 5px #aaa; }

Il risultato è questo:

L’ombreggiatura originale è aumentata (si è diffusa) di 5px su ogni lato. Per farvi capire meglio, nella figura seguente ho colorato di un grigio più scuro i pixel aggiunti dalla diffusione dell’ombreggiatura:

Quel bordo scuro di 5px su ogni lato dell’ombreggiatura è il risultato della diffusione ottenuta con il quarto valore della proprietà box-shadow. Ricordate però che il colore non sarà diverso: il risultato effettivo è quello della figura precedente.

La diffusione può essere espressa anche in valori negativi. In questo caso, l’ombreggiatura invece di espandersi si contrae:

A questo punto possiamo testare il valore della diffusione senza azzerare quello della sfocatura:

Trasformare l’ombreggiatura da esterna in interna

I CSS3 ci permettono di trasformare l’ombreggiatura esterna in un’ombreggiatura interna aggiungendo prima di tutti i valori della proprietà box-shadow la parola inset. Quindi nei CSS “aggiorniamo” la proprietà box-shadow in questo modo:

#box { -moz-box-shadow:inset 10px 10px 10px 5px #aaa; }

Ed ecco il risultato:

Ancora sulla compatibilità tra browser

Dopo aver spiegato tutte le possibilità offerte dalla proprietà box-shadow dei CSS3, vi posso dire ancora una cosa sulla compatibilità tra browser di box-shadow. Firefox è l’unico browser a supportare tutti i valori di questa proprietà; Safari e Chrome non supportano la possibilità di diffondere l’ombreggiatura e quella di trasformarla in un’ombreggiatura interna. Con questi due browser, quindi, potete utilizzare solo tre valori oltre al colore, ad esempio:

#box { -webkit-box-shadow:10px 10px 10px #aaa; }

Il segreto di una buona ombreggiatura

In questo tutorial ho creato un’ombreggiatura molto visibile per mostrarvi chiaramente il funzionamento della proprietà box-shadow dei CSS3. Ma il segreto di una buona ombreggiatura è la leggerezza: non deve essere troppo pesante, troppo evidente. Per il nostro esempio, una buona scelta avrebbe potuto essere questa:

#box { -moz-box-shadow:3px 3px 12px 0 #999; }

Giudicate voi:

Sperimentate

Divertitevi a provare la proprietà box-shadow in diversi modi. Ad esempio, se avete elementi di colore scuro potete usare un’ombreggiatura di colore chiaro per creare l’effetto di un bagliore invece che di un’ombreggiatura.

Inoltre, ricordate che in base al box model dei CSS ogni elemento HTML è incluso in un box, quindi la proprietà box-shadow può essere applicata a qualsiasi elemento: un’immagine, un blocco di testo, un link, ecc. Mi raccomando però: ricordate di applicare un’ombreggiatura quando l’uso è appropriato (non mettete ombreggiature ovunque perchè vi piacciono) e create ombreggiature leggere, niente pugni nell’occhio ;)

E voi?

Conoscevate già la proprietà box-shadow dei CSS3? L’avete già usata su qualche vostro sito? Fatevi sentire nei commenti!

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!

http://nataliejost.com/

Il layout

Il blog è composto da tre colonne, ed è caratterizzato da due aspetti poco comuni:

• i contenuti sono ospitati nella colonna centrale: generalmente si trovano nella colonna di sinistra o di destra, anche quando c’è una doppia sidebar;
• la colonna di sinistra funge da vetrina di alcuni prodotti in vendita nel negozio digitale della Jost: scelta sensata visto che il blog costituisce un traino fondamentale per le vendite.

La terza colonna, invece, è una tradizionale sidebar con pubblicità, blogroll ecc.

La grafica

Lo stile grafico del blog è all’insegna del minimalismo, che aiuta a far risaltare le immagini delle pattern e dei prodotti realizzati. I pochi dettagli grafici creano un’atmosfera delicata (si nota il tocco femminile) e sono coerenti gli uni con gli altri: un verde pastello, linee tratteggiate e font prevalentemente morbidi.

Una nota particolare per l’header: un grande rettangolo dove si alternano immagini di alta qualità delle pattern create dalla designer/blogger.

La ricerca per categorie

I post del blog sono catalogati in quattro categorie: faith, family, design, miscellaneous. Queste categorie tuttavia non sono elencate in una normale lista ma piuttosto un po’ come una tag cloud. Forse non è la più usabile delle soluzioni, ma è un’idea.

L’archivio

Un’altra scelta insolita di questo blog è la pagina Archives, una pagina che sostituisce i tradizionali widget della sidebar quali categorie e post recenti. Da qui infatti è possibile cercare negli archivi in base alla categoria, in base al mese, oppure cercare nell’elenco di tutti i post scritti, un fiume di titoli e date che si susseguono (e non proprio facilissimo da consultare).

Conclusioni

In definitiva si tratta di un blog ottimamente costruito intorno al lavoro della Jost e al quale quest’ultima, che l’ha realizzato (come si legge nel footer), ha saputo dare un’impronta molto personale.

E voi?

Vi piace questo blog? Lo comprereste uno dei prodotti di Natalie Jost? Fatevi sentire nei commenti!

http://www.ilovecolors.com.ar/

I love colors: nomen omen

Si vede che Elio Rivera ama i colori. Tutta la grafica del blog è attraversata da un’esplosione di colori vivaci ma in salsa grunge, a partire dal belissimo sfondo. Può essere apprezzato soprattutto da chi ha una risoluzione maggiore di 1024×768px (a quella risoluzione è un po’ tagliato ai lati).

Personalizzazione di tutti gli elementi

In questo blog niente è lasciato al caso. L’autore ha pensato a dare un tocco personale e creativo ad ogni elemento: l’icona del feed RSS, la data dei post, la categoria del post, il link Read More, l’icona dei commenti, il form dei commenti e il form dei contatti, lo sfondo della tag cloud, i colori degli annunci di Google Adsense, il campo di ricerca, perfino il divisore tra un post e l’altro. Sbalorditivo.

E voi?

Non c’è molto altro da dire. A parte l’eccezionale cura grafica, per il resto è un normale blog. A voi piace? Fatevi sentire nei commenti.

165 icone in 5 colori

Un bel set di 165 icone per il web design disponibile in 5 colori diversi: nero (lo vedete qui sopra), verde, blu, rosso e grigio. Il download comprende sia le .jpg che i file sorgenti in formati .ai e .svg nel caso vogliate modificarle a vostro piacimento.

165 icone in 5 colori…

100 set di icone dei prodotti Adobe

In questo post troverete una raccolta di un centinaio di set di icone dei prodotti Adobe. Non sono tutti eccezionali, ma alcuni sono molto interessanti. Che farsene? Qualcuno per esempio le usa sul portfolio nella lista dei software conosciuti.

100 set di icone dei prodotti Adobe…

40 icone dei social network

I social network sono diventati fondamentali per il mondo del web. Ed ecco un set di 40 icone dei principali social network. Le icone sono in formato .png e hanno dimensioni di 16×16 px e 32×32 px (quindi in realtà è come se fossero 80). L’uso di queste risorse richiede la menzione dell’autore.

40 icone dei social network…

Set di icone di Twitter

A proposito di social network, come sapete quello del momento è Twitter, sul quale potete seguire anche Blogging CSS. L’immagine qui sopra fa riferimento ad un simpatico set di icone di Twitter gratuite rilasciate da Smashing Magazine.

Set di icone di Twitter…

Sfondi per Twitter

L’ho detto che Twitter è il social network del momento, no? A questo link troverete una raccolta di sfondi gratuiti per la vostra pagina Twitter, con tanto di file Photoshop sorgente per modificarlo a vostro piacimento.

Sfondi per Twitter…

Temi gratuiti per Blogger

Il vostro blog è installato su piattaforma Blogger? Passate a Wordpress! Scherzo. Se usate Blogger e volete rinfrescare il look del vostro blog non potete perdervi questa raccolta di (veramente) bellissimi temi per Blogger.

Temi gratuiti per Blogger…

5 form gratuiti

Ecco una risorsa particolare e prettamente destinata ai web designer. Si tratta di 5 modelli di form con codice CSS già pronto. Li potete vedere in anteprima qui.

5 form gratuiti…

7 texture di pietra

7 texture di pietra…

5 texture floreali

Non so a voi, ma a me il link per il download non funziona. In tal caso, cliccate su ogni foto: verrete reindirizzati alle pagine Flickr delle texture. Scaricatele da lì.

5 texture floreali…

7 texture di carta con macchie di caffè

7 texture di carta con macchie di caffè…

20 pennelli spray

Questo set comprende 20 pennelli di spruzzi e macchie di vernice a spray. I pennelli sono ad alta risoluzione (oltre i 2000px).

20 pennelli spray…

Raccolta di pennelli a forma di curve luminose

In inglese si chiamano “light swirl brushes”. Mi rendo conto che “pennelli a forma di curve luminose” non rende proprio l’idea, però si tratta di quella specie di guizzi di luce, un po’ come quello in figura. Vabbè, nome a parte, sono fighi, e in questa raccolta ce ne sono veramente tantissimi. Cliccare per credere!

Raccolta di pennelli a forma di curve luminose…

12 pennelli a forma di carta

Belli e ad altissima risoluzione (oltre i 2000px) questi 12 pennelli per Photoshop a forma di carta (anche questa traduzione è il massimo, no?).

12 pennelli a forma di carta…

8 texture/pattern grunge con stelle

Queste texture secondo me possono dare soddisfazioni, giocando bene con i metodi di fusione di Photoshop. Sono disponibili anche come pattern, per usarle per esempio come sfondo di una pagina. Hanno dimensioni di 1024×1024 px.

8 texture/pattern grunge con stelle…

6 pattern per Photoshop

6 pattern per Photoshop

Advent

Advent…

30 set di ragazze in formato vettoriale

In questo post troverete una raccolta di set di vettori relativi al mondo femminile. Possono tornare utili per esempio per siti e-commerce che vendono prodotti per donne.

30 set di ragazze in formato vettoriale…

Set di abiti femminili in formato vettoriale

Ancora donne. Questo è un set di vettori di abiti e accessori femminili. Realizzato da Chris Spooner, una garanzia quando si tratta di illustrazioni.

Set di abiti femminili in formato vettoriale…

Quel tutorial era costruito sulla base di altri due tutorial, che vi consiglio di leggere anche per questo nuovo tutorial, a meno che ovviamente non li abbiate già letti o ne sappiate abbastanza. Si tratta di un tutorial sul box model dei CSS e di un altro sulla differenza tra elementi inline ed elementi di blocco.

Ok, possiamo cominciare.

Il posizionamento statico

Il posizionamento relativo e il posizionamento assoluto sono applicabili grazie alla proprietà position dei CSS. Questa proprietà può assumere uno dei seguenti quattro valori:

• static;
• relative;
• absolute;
• fixed (di questo valore mi occuperò in un prossimo tutorial).

Static è il valore di default: quando un elemento è posizionato staticamente, vuol dire che si trova nel normale flusso della pagina HTML (ho spiegato questo concetto in questo tutorial), e che quindi il suo posizionamento non è stato ancora modificato: è statico. Facile che non dovrete mai dichiarare la proprietà position: static, ma questo concetto ci aiuta a capire meglio il posizionamento relativo.

Il posizionamento relativo

Il posizionamento relativo è logicamente collegato al posizionamento statico: quando posizioniamo relativamente un elemento, lo facciamo in relazione alla sua posizione statica, cioè alla posizione che avrebbe nel normale flusso della pagina. Volete un esempio? Eccolo.

Consideriamo il seguente codice HTML: un semplice div che contiene un piccolo testo, all’interno del body.

<body>
<div id="container">Posizionamento relativo e assoluto</div>
</body>

Per quanto riguarda i CSS, azzeriamo margin e padding di default di tutti gli elementi, aggiungiamo un po’ di colore per vedere meglio questi elementi ed una larghezza a #container. Attenzione: per il momento non stiamo ancora alterando la posizione di nessun div.

body {
	background-color:#F0971C;
	font-family:Arial, Helvetica, sans-serif;
	font-size:40px; }

#container {
       width:600px;
       color:#fff;
       background-color:#CF3D14; }

A queste condizioni, il posizionamento normale del div #container nella pagina web è il seguente:

Immaginiamo di voler spostare questo div di 20 pixel sia dall’alto che da sinistra. Nel file CSS scriveremo:

#container {
     position: relative;
     top:20px;
     left:20px; }

Infatti:

Ma allora funziona come i float? E’ come se avessimo applicato un margine in alto e a sinistra di un elemento con proprietà float? La risposta è no, e vi spiego perchè.

Posizionamento relativo vs. float

A differenza di quanto succede utilizzando i float, lo spostatmento di un elemento riposizionato attraverso il posizionamento relativo non modifica la posizione degli elementi che lo circondano. Vale a dire che, se accanto al div #container ci fosse stato un altro div, #container si sarebbe sovrapposto a questo secondo div. Con i float, invece, il secondo div si sarebbe spostato anche lui di 20px.

Verifichiamo quest’ultimo concetto con un esempio pratico. Consideriamo questo codice HTML: lo stesso div #container ora è centrato nella pagina e contiene tre colonne.

<body>
	<div id="container">
		<div id="col-A">A</div>
		<div id="col-B">B</div>
		<div id="col-C">C</div>
      </div>
</body>

Al codice HTML colleghiamo questo codice CSS. Ho dato ad ogni colonna un bordo giallo per distinguerle meglio.

* { margin:0; padding:0; }

body {
	background-color:#F0971C;
	font-family:Arial, Helvetica, sans-serif;
	font-size:40px; }

#container {
	width:600px;
	height:200px;
	margin:0 auto;
	color:#fff;
	background-color:#CF3D14; }

#container div {
     width:100px;
     border:3px solid #ff0;
     float:left;
     color:#CF3D14;
     background-color:#fff; }

La situazione è la seguente:

Le tre colonne scorrono l’una accanto all’altra perchè nel CSS hanno la proprietà float. Distanziamole un po’ tra di loro e rispetto al div #container:

#container div { margin:20px 0 0 20px; }

Ecco il risultato:

Nei CSS abbiamo dato un margin di 20px sia in alto che a sinistra a ciascuna colonna. Cosa succede se aumentiamo il margine a sinistra solo della prima colonna? Proviamo.

Aggiungiamo una classe per la prima colonna nell’HTML:

<div id="col-A" class="prima">A</div>

E nel CSS scriviamo:

#container .prima { margin: 20px 0 0 70px; }

Ed ecco cosa ne viene fuori:

Vedete che il margine a sinistra della prima colonna è aumentato, ma questo margine ha spostato verso sinistra anche le altre due colonne. Cosa succede invece se spostiamo la prima colonna non aumentando il margine sinistro (e quindi il posizionamento con i float) ma attraverso il posizionamento relativo?

Per rispondere a questa domanda, sostituiamo l’ultima riga di CSS (quella dove abbiamo aumentato il margin della prima colonna) con questo codice:

#container .prima {
	position:relative;
	left:70px; }

Guardiamo il risultato:

La prima colonna si è spostata effettivamente di 70px dal bordo sinistro del contenitore, ma le altre due colonne sono rimaste ferme: di conseguenza, la prima colonna si è sovrapposta alla seconda. Questo aspetto è uno dei motivi fondamentali per cui è preferibile costruire un layout per mezzo dei float piuttosto che del posizionamento relativo.

Il posizionamento assoluto

Abbiamo detto che un elemento riposizionato con il posizionamento relativo si sposta relativamente alla sua posizione statica, quindi si sposta in relazione a se stesso. Questo vuol dire che l’elemento rimane comunque nel flusso normale della pagina HTML.

Un elemento riposizionato con il posizionamento assoluto, invece, viene estratto dal flusso della pagina: per spostarlo, perciò, c’è bisogno di un altro elemento in relazione al quale spostarlo.

Guardiamo questo esempio:

<body>
	<div id="container">
		<div>Q</div>
        </div>
</body>

C’è un div contenitore con al suo interno un quadrato bianco. Al momento, lo vedete nella sua posizione statica. Cambiamo il valore della proprietà position in relative:

#container div {
   position: relative;
   top:0;
   left:0; }

Il quadrato rimane dov’è, perchè anche se abbiamo dichiarato position: relative, i valori di top e left sono 0.

Posizioniamolo ora con il posizionamento assoluto:

#container div {
   position: absolute;
   top:0;
   left:0; }

Ecco cosa succede:

Il quadrato si va ad incastrare nell’angolo in alto a sinistra non del contenitore, ma della pagina. Perchè? Quando non si specifica un elemento di riferimento, il punto di riferimento di default rispetto al quale l’elemento riposizionato con il posizionamento assoluto è l’angolo in alto a sinistra dell’intera pagina web.

Come fare allora per spostare un elemento non rispetto alla pagina, ma ad un elemento da noi scelto? Basta aggiungere nel file CSS la proprietà position: relative all’elemento che abbiamo scelto. In questo caso, se vogliamo che il quadrato si incastri nell’angolo in alto a sinistra del div #container, dovremo scrivere nei CSS:

#container { position: relative; }

Il risultato sarà questo:

Ora, se vogliamo staccare un po’ il quadrato dall’angolo, possiamo scrivere nel file CSS:

#container div {
	 position:absolute;
	 top:50px;
	 left:100px; }

Ed avremo:

Posizionamento assoluto vs. float

Anche il posizionamento assoluto ha dei limiti rispetto all’uso dei float. Innanzitutto, per riposizionare un elemento con il posizionamento assoluto c’è sempre bisogno di dichiarare sia la larghezza che l’altezza dell’elemento. Cosa succede perciò se nel nostro quadrato non volessimo più solo una Q, ma volessimo inserire invece un testo?

Il testo “straripa” dal quadrato. Per contenerlo, bisognerebbe modificare larghezza e altezza del quadrato, ma è chiaro che è un metodo che non conviene, perchè bisognerebbe andare ad aggiustare i CSS ad ogni modifica del testo.

Utilizzando la proprietà float, invece, non è necessario dichiarare larghezza e altezza: il quadrato quindi si allargherebbe automaticamente all’aumentare del testo. Meglio, no?

Z-index

C’è una proprietà però che il posizionamento relativo e assoluto offrono in più rispetto ai float: lo z-index. Z-index è una proprietà dei CSS che permette di sovrapporre un elemento ad un altro, come i livelli di Photoshop.

Consideriamo questo codice HTML. E’ il solito contenitore centrato nella pagine che contiene tre colonne, ciascuna delle quali ha una classe.

Consideriamo ora il corrispondente codice CSS (riscrivo anche un po’ di righe già scritte in precedenza, giusto per non perdere il filo):

* { margin:0; padding:0; }

body {
	background-color:#F0971C;
	font-family:Arial, Helvetica, sans-serif;
	font-size:40px; }

#container {
	width:600px;
	height:200px;
	margin:0 auto;
	color:#fff;
	position:relative;
	background-color:#CF3D14; }

#container div {
     width:100px;
	 height:100px;
	 color:#F0971C;
	 border:3px solid #FF0;
     background-color:#fff;
	 position:absolute;
	 top:50px; }	 

#container .q1 {  left:100px; }

#container .q2 {  left:220px; }

#container .q3 {  left:340px; }

Visivamente, il risultato è questo:

Sono tre quadrati posizionati tutti e tre con il posizionamento assoluto. Come potete vedere nel codice CSS, ogni quadrato ha un valore diverso per la proprietà left, ed ecco perchè i quadrati sono distanziati l’uno dall’altro.

Per vedere come i tre quadrati si sovrappongono, riduciamo i valori delle loro proprietà left:

#container .q1 { left:100px; }

#container .q2 { left:160px; }

#container .q3 { left:220px; }

E voilà:

Il terzo quadrato si sovrappone sul secondo, che si sovrappone sul primo. Nella situazione di default (e cioè quando z-index ha valore 0) l’ultimo elemento nel codice HTML si sovrappone su quelli precedenti.

Come avrete intuito, per modificare l’ordine di sovrapposizione basta cambiare il valore di z-index, per esempio:

#container .q1 { left:100px; z-index:1; }

#container .q2 { left:160px; z-index:2; }

#container .q3 { left:220px; z-index:0;  }

Poichè la proprietà z-index del secondo quadrato ha il valore più alto, il secondo quadrato si sovrappone agli altri due:

Dall’immagine qui sopra non è ben visibile che per esempio il primo quadrato si sovrapporrebbe anche sul terzo. Incasiniamo un po’ i tre quadrati per rendercene conto:

Visto?

Conclusioni

Il mio parere è che per costruire un intero layout di una pagina web conviene utilizzare la tecnica dei float: se un sito finito rimanesse sempre lo stesso, probabilmente si potrebbe lavorare anche con il posizionamento assoluto e relativo, ma siccome c’è sempre da fare delle modifiche (soprattutto se si tratta di un sito che viene gestito attraverso un CMS da chi non fa il web desinger), è meglio puntare sulla flessibilità dei float.

Allora che ce ne facciamo di posizionamento assoluto e relativo? Queste altre due tecniche di posizionamento possono essere sfruttate per qualche dettaglio del sito, avvalendosi soprattutto della possibilità di sovrapposizione grazie a z-index, per esempio per creare un sottomenu a comparsa solo con i CSS, oppure per visualizzare del testo su un’immagine.

Insomma, non sono mica da buttare via.

E voi?

E’ tutto chiaro? Se non avete capito qualcosa, chiedete nei commenti.

1. Lo sfondo di Dotcase

http://www.dotcase.com.br/

Questo sfondo un po’ mi affascina e un po’ mi disturba, ed è proprio questo il bello. Fa un po’ X-Files e un po’ Six Feet Under. Ha però un problema: nella parte inferiore si passa di colpo dalla grafica ad una banda completamente nera. Sarebbe stato meglio usare una sfumatura verso il nero per evitare un passaggio così netto.

2. La lista di Saturized

http://www.saturized.com/

Bella questa lista nel footer di Saturized. Utilizza delle mini-icone come punti lista.

3. Le icone di Mocapoke

http://mocapoke.com/

Icone di quei grandi blocchi di fogli che si usano in occasioni di riunioni, corsi ecc. non ne avevo ancora viste. Queste sono particolarmente dettagliate.

4. L’header di Made By Sofa

http://www.madebysofa.com

Molto simpatico l’header di Made by Sofa (Sofa è ovviamente il divano).

5. La tipografia di Monty Lounge Industries

http://www.montylounge.com/

Ricca tipografia per questo sito: il designer ha utilizzato il bellissimo font Lubalin Graph in vari pesi, combinato con Georgia (anche questo utilizzato anche in grassetto e corsivo) per i testi. Lubalin Graph è un font realizzato da Herb Lubalin, un importante graphic designer responsabile anche di altri font storici come Avant Garde.

6. Il concept grafico di World Nude Day

http://www.worldnudeday.com/

Attenzione: su questo sito ci sono immagini di persone nude (niente porno, comunque). Perchè? Pare che ci sia una giornata mondiale del nudo, e che in quel giorno qualcuno se ne vada in giro come mamma l’ha fatto. Vabbè. Comunque, se la cosa per qualsiasi motivo dovesse disturbarvi, non cliccate.

Io lo segnalo per il concept della grafica. Si parla di nudità? E allora il grafico ha deciso di appendere nella testata e un po’ in giro per tutto il sito calzini e altri indumenti.

7. Il campo per l’iscrizione alla newsletter di Fray

http://www.fray.com/

Nonostante lo stile di questo form per la newsletter non sia granchè (anzi, fa un po’ manifesto funebre), non si può dire che non salti all’occhio, e credo non tanto per questo nero che è un pugno in un occhio, ma soprattutto perchè sta su una riga tutta sua, appena prima del footer. E’ un’idea che si può riprendere, con una grafica migliorata.

8. Il form di Best Tools for Schools

http://www.toolsforschools.ca/supplies_ottawa_school/schoolsupplies.php

Questo sito è molto carino e ben fatto dal punto di vista grafico. In particolare, il form “Find your list!” in home page è degno di nota. E’ composto da quattro select (il nome tecnico dei menu a tendina di un form) praticamente trasformate rispetto al look che avrebbero senza nessuno stile.

9. Il footer di Simple Flame

http://simpleflame.com/

Simple Flame è un altro sito dove la grafica si integra bene col contenuto (soprattutto nella sidebar a sinistra). Ma in questo caso vi voglio segnalare una sorta di menu in fondo alle pagine. E’ un gruppo di link ad alcuni dei servizi offerti. Ogni link si prende un bel rettangolone; i testi delle voci di menu sono supportati da icone semplici ma esplicative. Ottimo l’effetto hover, che sfrutta l’inversione dei colori.

10. La data dei post di Ilarialab

http://ilarialab.com/

Concludiamo con il dettaglio di un blog italiano, Ilarialab. Si tratta della data dei post: un quadrato stondato, con un bel gradiente verde e un bordino chiaro in alto per dare un senso di plasticità giocando con la luce. Il quadrato sembra spuntare da sotto il titolo del post, come se questo fosse una tasca. Molto carino.

E voi?

Volete suggerire il dettaglio di un sito che vi ha colpito? Scrivetemi.

http://365daysofastronomy.org/

Lo sfondo

Lo sfondo è bellissimo e inevitabilmente a tema “spaziale”, visto l’argomento del blog: un universo violaceo attraversato da guizzi di luce. Nello sfondo è incorporata l’ombreggiatura che fa spiccare il blog rispetto allo sfondo stesso.

Il layout

Il layout del blog è più stretto del solito, 840px totali, probabilmente per dare spazio ad uno sfondo così accattivante. La sidebar è a sinistra: c’è chi dice che dovrebbe stare a destra, perchè siccome leggiamo da sinistra a destra (almeno qui nella parte occidentale del mondo), la prima cosa che l’occhio deve incontrare dovrebbe essere il contenuto principale. Sarà.

In questo blog sono organizzati ottimamente gli spazi: ogni elemento è ben distanziato dagli altri e dalla grafica di sfondo, con spazi sempre equivalenti ed appropriati, in modo da dare un’impressione generale di ordine ed equilibrio.

Il logo

Il logo è graficamente eccezionale. Le proporzioni degli elementi e gli spazi che li dividono anche in questo caso sono precisissimi e danno un grande senso di equilibrio. Poi c’è l’effetto bucato, che lascia intravedere lo sfondo, combinato con l’effetto pressato, ottenuto grazie all’ombreggiatura interna degli elementi. Bella e perefttamente in tema infine l’idea di implementare un cannocchiale con il numero 6.

La tipografia

Il blog utilizza sIFR come tecnica di sostituzione dei font. Il font scelto è il bellissimo Avenir.

Il menu

Il menu è molto ben realizzato. E’ costruito come menu a schede, effetto ottenuto con un sapiente uso dell’ombreggiatura sulle voci non attive. Da notare il pulsante “Join in!”, distanziato dagli altri e di diverso colore (lo stesso utilizzato per nelle pagine del blog): è un pulsante che ha funzione di call-to-action (invita infatti a registrarsi), quindi deve distinguersi rispetto agli altri per catturare l’attenzione dell’occhio.

E voi?

Lo conoscevate questo blog? Bello, no? Fatevi sentire nei commenti!