CSS Tip #9 – Css di Natale!
Scritto da Salvo il 8 dicembre 2009 con 1 commento
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:
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 2010 e ricordatevi di ripassare tutti i giorni fino a venerdi per altre risorse natalizie!
Articoli correlati:
- CSS Tip #16 – Flussi e overflussi Il problema è: un elemento (div o quello che volete) che ha un’altezza fissa e il contenuto al suo interno che supera il valore di questa altezza. Normalmente succede che [...]...
- 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 [...]...
- CSS Tip #8 – “Vedo e non vedo”, ovvero: la trasparenza Le trasparenze sono un’effetto molto gradevole se ben utilizzato, tuttavia per creare simulazioni di trasparenza spesso si usa Photoshop e successivamente si esporta il tutto come immagine normale. Da qualche [...]...
Riguardo Salvo...
Web designer/developer (aka Interactive Designer) dal 2006, ho lavorato in varie aziende che operano dall'e-commerce alla comunicazione multimediale, sono stato speaker a conferenze come Better Software, Codemotion e due WordCamp. Dal 2010 insegno linguaggi web alla scuola Mohole di Milano.
Se ti e' sembrato utile perche' non mi offri un caffe'?
Tutto quello che trovi su MoebiusMania.net puo' essere utilizzato liberamente e gratuitamente, se magari hai trovato qualcosa di particolarmente utile puoi mostrare il tuo apprezzamento con una minuscola donazione con Paypal o cliccando sui banner!
Ciao
scusa sarà la stanchezza che ho addosso (si alle 12e30 dell’8 Dicembre! O_o ) ma mi sfugge il motivo per cui vai a creare quel selettore quando usando direttamente l’id avresti lo stesso risultato (e con meno “lavoro” da parte del browser, in caso il numero di elementi sia cospicuo, come aveva dimostarto qualche guru in un test)
Fra l’altro un ID è già la cosa più precisa che esista visto che puoi assegnarlo una ed una sola volta…
ciao