Tag Archives: css

na3.it

E’ stata lunga ma dopo qualche mese di lavoro (freelance, a partire dalle ore 20 p.m, quindi se fossero continuativi sarebbero una quindicina di giorni) sono felice di postare il link al nuovo sito na3 Studio di Architettura.

Come già accennato in qualche post precedente, per l’interaction design ho utilizzato jQuery; in particolare, per questo progetto ho usato i plugins Cycle, SafeMail, Reflect, e ho scritto neanche duecento righe di codice.
Il sito si presenta estremamente semplice nel design, chiaro, pulito, leggero e snello nel markup, potente e conciso nel codice JS.

na3
na3 studio di architettura

Da segnalare la homepage, la pagina studio e la pagina indice dei progetti; quest’ultima in particolare si basa sul menu accordion già visto su questo mio sito, ma in più può far scrollare – con effetto easing – gli elementi figli di una categoria (projects>design), se questi sono più di cinque. Abbiamo realizzato (customizzandolo nello style e in qualche elemento di markup) anche un corporate blog per na3, powered WP 2.5.

Very clean and concise markup, degrades wonderfully. Truly the type of work one would look for and appreciate.
— Kris, from the jQuery discussion group

— Kris, from the jQuery discussion group

Il lato backend è stato curato dal mio esimio collega freak Heracleum (di cui non abbiamo una foto), in PHP.
Enjoy the new na3 website!

drop shadows con jQuery

Avvertenza: le porzioni di codice riportate in questo post non corrispondono più alla reale implementazione iniziale nel blog. Ragioni di manutenibilità, compatibilità o mera obsolescenza ne hanno reso necessaria la rimozione.

Esigenza:

Applicare un’ombra ad un’immagine qualsiasi, di qualunque dimensione, con i CSS e senza introdurre elementi extra di markup… o perlomeno che così sembri!

color_imageL’effetto è esattamente quello che vedete qui a fianco. L’ombra è un classico. Prima degli standards, che da un certo punto di vista hanno anche stimolato l’esigenza di creare stili parametrici, per così dire, coè validi per una o l’altra cosa, le immagini se avevano l’ombra era perchè dal photoshop gliela mettevi. Sin dal maggio 2004 si parla di ‘ombre’ intorno alle immagini e fatte coi CSS.

Prima di tutto bisogna dire che dal punto di vista del nostro codice (X)HTML, l’ esempio originale – introduce nel markup ben 4 div (che però non hanno valore semantico o struttuale) che “avvolgono” l’immagine, e per ognuna di esse dispone un background tagliato in un certo modo e posizionato di conseguenza. Notare che non c’è altro modo con l’(x)html ed i css per fare un’ombra!

E tutto questo, nel caso sia necessario avere un markup strutturato e semantico, probabilmente non è il metodo migliore per avere l’ombra. Se la sintassi è il vero problema, questa tecnica non è quella giusta, perchè introduce extra-markup.

Ma no, noi vogliamo l’ombra, e non vogliamo farla col photoshop su ogni immagine. E vogliamo pure mantenere il codice pulito…. cioè non vogliamo aggiungere a mano div su div intorno ad ogni immagine.

Ecco, questo è il codice (x)html che “avvolge” la nostra immagine.

1
2
3
4
5
6
7
8
<div class="wrap0">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<img alt="La mia immagine con intorno l'ombra" src="immagine.gif" /></div>
</div>
</div>
</div>

mmmh… i puristi non sembrano soddisfatti.
Non sarebbe meglio avere solo questa riga di codice?

1
<img class="dropshadow" alt="La mia immagine con intorno l'ombra" src="immagine.gif" />

Soluzione:
Ecco come jQuery risolve il problema, introducendo a runtime (al caricamento del documento) il codice extra di cui sopra:

1
2
3
$(document).ready(function(){
$("img.dropshadow").wrap("<div class='wrap0'><div class='wrap1'><div class='wrap2'>" + "<div class='wrap3'></div></div></div></div>");
});

Questo snippet usa il metodo

1
.wrap()

per creare le 4 div. Il fatto che le div siano aggiunte a runtime ci semplifica notevolmente la manutenzione del sito, l’aggiornamento, e la migrazione verso una nuova ipotetica grafica mantenendo inalterato il nostro markup.
Ogni div ha un background posizionato di conseguenza nei CSS, vediamo come:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* jquery dropshadow classes */
.wrap0 {
float:left;
background: transparent url(images/shadow.gif) right bottom no-repeat;
margin: 1em 0.5em 0 -4px;
}
.wrap1 {
background:transparent url(images/shadow180.gif) no-repeat;
}
.wrap2 {
background:transparent url(images/corner_bl.gif) -16px 100% no-repeat;
}
.wrap3 {
padding: 10px 12px 12px 10px;
background:transparent url(images/corner_tr.gif) 100% -16px no-repeat;
}
div[class="wrap0"]{ /* for modern browsers */
margin: 0 1em 0 -8px;
}

Ecco.
Quindi quale è il vantaggio dell’usare jQuery per fare i drop shadow?
Che tutto si riduce al solo tag immagine

1
<img class="dropshadow" alt="La mia immagine con intorno l'ombra" src="immagine.gif" />

a cui aggiungo solo la classe “dropshadow”.
Et voilà, drop shadows con jQuery.