CSS  »  Articoli  »  Effetti con CSS 

A parte ciò, il codice Javascript è molto intuitivo:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dropshadow.js"></script>
<script type="text/javascript">
 window.onload = function()  
	{
	$(".wrapper").dropShadow({left: 5, top: 5, blur: 2, opacity: 0.9, color: "#333"});
	}
</script>

Come nel caso precedente, richiamiamo la libreria e il plugin e poi inizializziamo lo script. I valori applicati al div con classe wrapper (.wrapper) sono autoesplicativi e ricalcano quelli visti per i CSS con l'unica aggiunta di un valore per impostare l'opacità.

Anche in questo caso, volendo, poniamo, un'ombreggiatura a sinistra e in alto sarà sufficiente impostare valori negativi per i parametri left e top.

Layout multi-colonna

Uno dei nuovi moduli previsti nei CSS3 offre la possibilità di disporre il testo presente all'interno di un dato elemento su più colonne. Il risultato è quello di ottenere un layout che ricorda quello dei tradizionali quotidiani cartacei. Le colonne multiple sono supportate da Safari 3+, Google Chrome e Firefox 2/3.

Partendo dunque da questa situazione di partenza, è possibile arrivare facilmente a questo schema. Vediamo come.

Il div che ci interessa è quello con id content. Nella parte HTML utilizziamo regolarmente i paragrafi di testo, senza alcun accorgimento particolare. La formattazione su tre colonne è demandata a questa semplice dichiarazione CSS3:

div#content {
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;
column-count: 3;
column-gap: 1em;
column-rule: 1px solid black;
}

Anche in questo caso il tutto risulta un po' verboso perché è necessario specificare le proprietà precedute dai prefissi proprietari. L'aggiunta della parte senza prefissi è una buona norma da adottare in queste situazioni: quando la specifica sarà ufficiale e i prefissi non più necessari, ci ritroveremo la regola già bella e pronta.

Attraverso column-count stabiliamo su quante colonne desideriamo distribuire il testo (3); con column-gap definiamo la distanza tra le colonne (1em); grazie a column-rule possiamo impostare un bordo (la proprietà non è supportata da Firefox).

Il modulo presenta altre interessanti opzioni e modalità per definire le colonne, ma questo può bastare. Ora proveremo a replicare tutto ciò con il plugin per jQuery Columnizer. Ecco l'esempio.

Numerose sono le opzioni di configurazioni disponibili (vi rimando per esse alla documentazione ufficiale), ma per replicare quanto visto in precedenza è sufficiente questo codice minimale:

<script src="jquery.js" type="text/javascript"></script>
<script src="autocolumn.js" type="text/javascript"></script>
<script type='text/javascript'>
	$(function(){
		$('#content').columnize({columns : 3 });
	});
</script>

Una volta specificato il div che ci interessa (#content) basta impostare il valore desiderato per il parametro columns.

Volendo è anche possibile intervenire con ulteriori personalizzazioni via CSS. Il plugin, infatti, crea di fatto tanti div con classe column per quante sono le colonne. Aggiunge inoltre la classe first alla prima colonna e la classe last all'ultima. Creando delle regole specifiche nel nostro CSS saremo quindi in grado, per esempio, di aggiungere dei bordi come nell'esempio visto per i CSS3.

Conclusioni

Che Javascript possa in certi casi essere utile per estendere il supporto di specifiche parti dei CSS su tutti i browser è dunque certo. Altrettanto certo è che sta al buon senso dello sviluppatore valutare tutti gli scenari e i possibili problemi di implementazione.

Tutti gli esempi sono disponibili per il download.

Altri articoli

Altre guide

Altre newsletter