CSS Tip #9 – Css di Natale!

8 dicembre, 2009 - Tags: css tip, webdesign

In quest’edizione “speciale” dei Css tips, dedico qualche minuto a spiegare come ho scritto i Css per il “Christmas Pack 2009″. Come vedrete, molte delle proprietà che uso per inserire questi elementi nella pagina le abbiamo già incontrate in precedenti tips, quello che voglio spiegarvi qui è come organizzare gli stili per ottenere il miglior risultato scrivendo il minor numero di righe di codice possibili.

Sapendo che alcune proprietà sono comuni per tutti gli elementi mentre altre sono specifiche per ogni elemento, ho raggruppato quelle comuni come posizionamento fisso, display in blocco e text-indent in una classe generica:

.cpack {
	position:fixed;
	display: block;
	text-indent: -999%;
	border: 0;
}

A questo punto posso sfruttare le prossime regole Css che scriverò in combinazione con questa classe, in modo tale da non ripetere le proprietà comuni ogni volta ma definendo solo quelle specifiche per ogni elemento, come url dell’immagine da usare di sfondo, dimensioni del
div e coordinate del posizionamento:

#albero.cpack  {
	right: -130px;
	bottom: -15px;
	width: 342px;
	height: 538px;
	background: url(cpack09/albero.png) top left;
	z-index: 11;
}

Qui riporto solo un’elemento come esempio ma la cosa si ripete per tutti gli elementi. Partiamo dal selettore: scrivendo il nome del div seguito senza spazio dalla classe creò una selezione che dice al browser “prendi tutti gli elementi con id albero che hanno come proprietà class cpack”, questo selettore ha il vantaggio di essere molto preciso. Per le proprietà le uniche note “particolari” sono che sfrutto dei margini negativi per far rientrare leggermente le immagini in modo da farle sembrare nascoste fuori dallo schermo, e infine z-index per decidere (in caso di sovrapposizione) quale elemento deve stare sopra, se non vi ricordate come funziona potete rivedere il Css Tip #2.

Come ultima cosa creo dei div in Html ai quali mi basta assegnare la classe generica e l’id specifico pe trasformali negli elementi grafici che volevo:

Albero di Natale

In questo modo ho un codice Html leggerissimo e un Css otimizzato e sopratutto riutilizzabile anche nel caso di nuovi elementi simili, ricordatevi sempre per una semantica corretta: Id solo una volta e con un nome unico per ogni elemento, mentre le classi possono essere utilizzate su più elementi!

Potete trovare il file .css completo nel Christmas Pack 2009  e ricordatevi di ripassare tutti i giorni fino a venerdi per altre risorse natalizie!

Articoli correlati:

• CSS tip #3 – Quelle 5 cose da sapere… Continuo la mia piccola serie sui consigli (tips) per Css, restando ancora su argomenti di base in quanto sto avendo un buon feedback sul tema e sul livello trattato. Ricordo che cliccando “css tips” nella tag cloud qui a destra...