Il lavoro del Web Designer non ha mai fine e forse è proprio questo che ci differenzia dalle altre figure professionali che lavorano nel multimedia. Quante volte ci capita di iniziare un nuovo progetto e dover rinunciare ad alcune particolarità grafiche perchè poi non potremmo crearle nella realtà? Davvero tante; ma se oggi volessimo comunque inserire in un progetto alcune nuove particolarità proprie del Web che verrà dovremmo per forza di cose iniziare ad utilizzare i fantastici CSS3.

Proprio di recente ho lanciato alcuni nuovi progetti come www.ikoart.it e la nuova versione del mio sito www.beatfly.com presentandoli con una veste grafica differente se si accede con Firefox, Safari e Opera oppure con Explorer. Nel mio caso questa discrepanza è stata voluta, anche se alcune differenze interessano solo la presentazione estetica e non la struttura che comunque rimane cross browser. L’utilizzo dei CSS3 è a mio avviso un grandissimo risparmio di tempo per quanto riguarda la realizzazione di alcuni estetismi puramente grafici ed inoltre riduce il peso del vostro sito in quanto farete a meno di elementi grafici ora realizzati solo via codice. Rimane il problema cross browser, ma se ci limitiamo ad utilizzare le nuove regole solo per alcune migliorie quali, ombra nei testi, ombra negli elementi e magari angoli arrotondati il risultato sarà diverso ma non influirà sulla resa della presentazione. Quello che vedremo oggi, con alcuni semplici Snippets copia e incolla, sono appunte queste tipologia di nuove regole che ci permetteranno di sfruttare sia le specifiche attuali che di creare una struttura CSS in grado di salvaguardare il nostro lavoro anche in futuro.

Angoli arrotondati con i CSS

1
2
3
4
5
6
.rounded-corners{
border:1px solid #111;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;}

Ombra su elementi con i CSS

1
2
3
4
5
.drop-shadow{
border:1px solid #333;
box-shadow:1px 1px 7px #999;
-moz-box-shadow:1px 1px 7px #999;
-webkit-box-shadow:1px 1px 7px #999;}

Ombra su elementi per Explorer con i CSS

1
2
3
4
5
.ie-drop-shadow{
-ms-filter: /* IE8+ */
"filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=7, OffY=7, Color=#555, Positive=true)";
filter: /* IE<8 */
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=7, OffY=7, Color=#555, Positive=true);}

Ombra sul testo con i CSS

1
2
.text-shadow{
text-shadow:1px 1px 3px #777;}

Righe alternate sulla tabella con i CSS; oltre a selezionare le righe pari e quelle dispare, possiamo selezionare la rga esatta che vogliamo colorare.

1
2
3
4
5
6
li:nth-child(even){
background:green;}
li:nth-child(odd) {
background:yellow;}
li:nth-child(3n) {
background:white;}

Opacità e trasparenza con i CSS

1
2
3
4
5
6
7
.opacity{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=70)";
filter: alpha(opacity=70); /* internet explorer */
-khtml-opacity: 0.7;      /* khtml, old safari */
-moz-opacity: 0.7;       /* mozilla, netscape */
opacity: 0.7;           /* fx, safari, opera */
}

Font personalizzati con i CSS

1
2
3
4
5
6
7
@font-face{
font-family:"Museo";
src:url("fonts/Museo.otf") format("opentype");
}
h1{
font-family:Museo, Georgia, serif;
}

RGBA con i CSS; possiamo definire il colore di un elemento sia testuale che un contenitore e gestire anche la sua trasparenza.

1
2
3
4
5
6
7
8
9
.transparent-background-color{
color:rgb(0, 0, 0);
background-color:rgb(77%, 77%, 77%);
background-color:rgba(255, 255, 255, 0.7);}

.transparent-text-color{
color:rgb(77%, 77%, 77%);
color:rgba(0, 0, 0, 0.7);
background-color:rgb(255, 255, 255);}

Transizioni con i CSS; possiamo creare una vera e propria transazione di colore per un elemento, ad esempio un link o un contenitore e settare il tempo della transazione.

1
2
3
4
5
6
7
8
9
a:link, a:visited{
-webkit-transition: all 1s ease;
transition: all 1s ease;
background: red;
color: white;}

a:hover, a:active{
background: white;
color: red;}

Buon divertimento.