10 tecniche css

Nel precedente articolo abbiamo visto a grandi linee (grandissime a dirla tutta) cos’è il CSS3 e perchè presto scalzerà l’attuale standard CSS 2.1. Come promesso in quella sede, è il momento di vedere più da vicino questo linguaggio e saggiare vedere in pratica qualche pillola delle sue potenzialità.

Qui vedremo degli esempi di codice che ci renderanno palese come 11 delle più diffuse ed “alla moda” tecniche CSS siano state recepite e semplificate in CSS3, rendendone di fatto meno artificiosa e più immediata l’applicazione.

Queste soluzioni sono in gran parte utilizzabili, essendo già compatibili con i browser più recenti (non Internet Explorer, ma quello si sa non ama stare al passo con i tempi).

Bordi arrotondati

Uno dei problemi più banali (anche se a volte controversi) del moderno web design. I bordi arrotondati sembrano un elemento ormai scontato nelle pagine web. Ma non è così. Per ottenere un box dagli angoli smussati al momento è necessario utilizzare una (o più) immagini appositamente posizionate, oppure ricorrere a JavaScript.

Mettiamo a confronto una delle attuali metodologie per ottenere questo risultato e quella con CSS3.

Metodo con Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript">
$(function(){
 $('.box').corners('10px');
});
</script>

<div>
 <!--CONTENUTO-->
</div>

CSS3

<style type="text/css">
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>

<div>
<!--CONTENUTO-->
</div>

Com’è evidente, con CSS3 basta inserire 3 proprietà nel foglio di stile ed il gioco è fatto. Sono 3 poichè ogni browser possiede la propria, ma ci aspettiamo che diventi soltanto una quando CSS3 sarà terminato.

Ombreggiatura dei box

Questo è un altro tema “caldo” del web design. E’ frequente l’esigenza di dare un effetto ombreggiatura agli elementi ed è frequente, anche in questo caso, ricorrere ad immagini o javascript per ottenerla.

CSS3 avrà questa funzionalità già integrata, e basta un po’ di codice per creare l’ombreggiatura di un elemento. Vediamo il confronto:

Metodo con JavaScript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropShadow.js"></script>
<script type="text/javascript">
$(function(){
 $('.box').dropShadow({
 left: 5,
 top: 5,
 opacity: 1.0,
 color: 'black'
 });
});
</script>

<div>
 <!--CONTENUTO-->
</div>

CSS3

<style type="text/css">
 .box {
 box-shadow: 5px 5px 2px black;
 -moz-box-shadow: 5px 5px 2px black;
 -webkit-box-shadow: 5px 5px 2px black;
 }
 </style>

 <div>
 <!--CONTENT-->
 </div>

Utilizzando CSS3 quindi, si potrà ottenere questo gradevole effetto e si eviterà il rischio che qualche utente possa perderselo ad esempio perchè ha javascript disabilitato sul proprio browser.

Ombreggiatura dei testi

Così come per i box, anche i testi possono essere resi con una gradevole ombreggiatura, completamente personalizzabile e gestibile da foglio di stile. Ed anche in questo caso senza ricorrere ad immagini, javascript o (come nell’esempio seguente) alla sovrapposizione di due testi identici ma dicolore diverso.

Metodo classico (sovrapposizione testi)

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.fonts {
position: relative;
}
.fonts .font {
position: absolute;
z-index: 200;
}
.fonts .secondario {
top: 1px;
color: #000;
z-index: 100;
}
</style>

<div>
 <span>Lorem ipsum dolor sit amet.</span>
 <span>Lorem ipsum dolor sit amet.</span>
</div>

Css3

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.font {
text-shadow: 0 1px 0 #000;
}
</style>

<span>The quick brown fox jumps over the lazy dog.</span>

Come potete vedere il metodo CSS3 è molto più coinciso e meno artificioso del precedente. Assolutamente un passo avanti in termini di comodità e velocità di implementazione.

Utilizzo di fonts non convenzionali

Un altro cruccio dei webdesigner è quello dell’utilizzo di font che non appartengono alla categoria dei cosiddetti safe fonts o web fonts, e cioè font non presenti in tutti i sistemi operativi e che quindi non verrebbero riprodotti in un sistema nel quale non sono installati (con tutti i problemi estetici e di formattazione che ne derivano). I metodi utilizzati attualmente sono quelli di replacement che fanno uso di javascript o di flash per sostituire dinamicamente il testo inserito con corrispondenti elementi grafici (flash o immagini) che fanno uso di un font specifico.

Grazie a CSS3 sarà possibile implementare direttamente il font desiderato e chiedere al browser che legge il foglio di stile di utilizzarlo.

Metodo javascript (utilizzando cufon)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/loyal.js"></script>
<script type="text/javascript">
$(function(){
 Cufon.replace('.classic .font');
});
</script>
<style type="text/css">
.font {
font-size: 20px;
}
</style>

<span>Lorem Ipsum Dolor Sit Amet.</span>

CSS3

<style type="text/css">
@font-face {
font-family: 'Loyal';
src: url('loyal.ttf');
}
.font {
font-family: Loyal;
font-size: 20px;
}
</style>

<span>Lorem Ipsum Dolor Sit Amet.</span>

Questa funzione non è ancora correttamente implementata dai browser, ed è anche problematico scegliere il formato di font da utilizzare in quanto alcuni browser se ne supportano un tipo non ne supportano un altro e così via. Speriamo che questi limiti vengano superati al più presto, perchè non vediamo l’ora di integrare un nuovo font semplicemente caricandolo sullo spazio web e dichiarandolo da css.

Opacità

Altro cruccio: come rendere un’immagine (o un elemento e quant’altro) semitrasparente? E’ chiaro che è possibile fare ricorso ad immagini png create già semitrasparenti, incorrendo però in qualche dispiacere su Internet Explorer (che delle immagini png non è proprio innamorato). Ma cosa ne direste invece di dire semplicemente al browser, tramite CSS, che quella data immagine/elemento deve avere un certo grado di opacità?
CSS pensa anche a questo e questa funzione è già largamente presente, se non fosse sempre per il solito Internet Explorer che preferisce utilizzare una proprietà tutta sua anzicchè quella standard. Anzi, a dirla tutta ha una proprietà diversa rispetto alla sua verrsione (se 5-7 oppure 8). Odioso, ma fin quando avrà una consistente percentuale di utenti dovremo averci a che fare.

CSS3 quindi ha l’obiettivo di cancellare la differenza di proprietà causata da Internet Explorer ed imporre (com’è giusto che sia) una unica proprietà.

Attuale CSS

<style type="text/css">
.box {
opacity: .6; // all modern browsers (this is CSS3)
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE 8
filter: alpha(opacity=60); // IE 5-7
}
</style>

<div>
 <!--CONTENUTO-->
</div>

CSS3

<style type="text/css">
.box {
opacity: .6;
}
</style>

<div>
 <!--CONTENUTO-->
</div>

RGBA

La proprietà RGBA si impone come una delle più unteressanti che stanno per essere introdotte. Si tratta della possibilità di controllare il colore di un lemento sia nella sua tonalità RGB (la miscelazione dei colori base rosso, verde, blu) che nel suo canale Alpha, e cioè nella sua opacità. Da qui appunto RGBA.

Metodo attuale

Salvare un file con il nome rgba.php contenente il seguente codice piazzarlo nella stessa cartella del foglio di stile.

<?php
$image = imagecreatetruecolor(1, 1);
$r = (int)$_GET['r'];
$g = (int)$_GET['g'];
$b = (int)$_GET['b'];
$a = (float)$_GET['a'];
$white = imagecolorallocate($image, 255, 255, 255);
$color = imagecolorallocatealpha($image, $r, $g, $b, 127*(1-$a));
imagefill($image, 0, 0, $white);
imagefilledrectangle($image, 0, 0, 1, 1, $color);
header('Content-type: image/png');
imagepng($image);
?>

richiamare la proprietà rgba così:

<style type="text/css">
.box {
background: url(rgba.php?r=239&g=182&b=29&a=.25);
}
</style>
<div>
 <!--CONTENUTO-->
</div>

CSS3

<style type="text/css">
.box {
background: rgba(239, 182, 29, .25);
}
</style>
<div>
 <!--CONTENUTO-->
</div>

Sfondi multipli

Finalmente non sarà più necessario creare diversi div per avere diversi sfondi. Basterà sfruttare la potenza di CSS3.

Metodo attuale

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/bg.png) repeat-x;
}
 .box2 {
 width: 100%;
 height: 100%;
 background: url(images/text.png) center center no-repeat;
 }
</style>

<div>
 <div>
 <!--CONTENUTO-->
 </div>
</div>

CSS3

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;
}
</style>

<div>
 <!--CONTENUTO-->
</div>

Colonne

Un modo facile per dividere il testo in colonne senza ricorrere a macchinose strutture dei div o javascript.

Metodo Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.columnize.js"></script>
<script type="text/javascript">
$(function(){
 $('.columns').columnize({
 columns: 2
 });
});
</script>
<style type="text/css">
.column {
padding-right: 10px;
}
.column.last {
padding: 0;
}
</style>

<div>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

CSS3

<style type="text/css">
.columns {
-moz-column-count: 2;
-webkit-column-count: 2;
}
</style>

<div>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

Immagini come bordo

Per vari motivi si può avere l’esigenza di sostituire i bordi di un box con delle immagini. Anche in questo caso se fin ora avremmo avuto bisogno di ricorrere a javascript, grazie a CSS3 possiamo ottenere in pochi passaggi lo stesso risultato mantenendo la compatibilità anche con i browser con jacascript disabilitato.

Metodo Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.borderImage.js"></script>
<script type="text/javascript">
$(function(){
 $('.classic .box').borderImage('url(images/border.png) 27 27 27 27 round round');
});
</script>
<style type="text/css">
.box {
border-width: 20px;
}
</style>

<div>
 <!--CONTENUTO-->
</div>

CSS3

<style type="text/css">
.box {
border-width: 20px;
-webkit-border-image: url(images/border.png) 27 round;
-moz-border-image: url(images/border.png) 27 round;
border-image: url(images/border.png) 27 round;
}
</style>

<div>
<!--CONTENUTO-->
</div>

Animazioni

Le animazioni sono un’ottima soluzione per migliorare la grafica complessiva del sito e renderla più dinamica. Al momento gli unici browser che supportano questa funzionalità sono quelli basati su Webkit. L’unico altro modo di ottenere questo risultato è il solito javascript.

Metodo Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 $('.box').hover(function(){
 $(this).stop().animate({
 top: '20px'
 }, 300);
 }, function(){
 $(this).stop().animate({
 top: '0'
 }, 300);
 });
});
</script>
<style type="text/css">
.box {
position: relative;
}
</style>

<div>
 <!--CONTENUTO-->
</div>

CSS3

<style type="text/css">
.box {
position: relative;
-webkit-transition: top 300ms linear;
}
.box:hover {
top: 20px;
}
</style>

<div>
 <!--CONTENUTO-->
</div>

Conclusione