Come è possibile tutto questo?

Per il box model css, il bordo è la parte più esterna di un elemento. E’ il suo perimetro. Cosi quando un elemento ha una larghezza dei contenuti (width) e un’altezza dei contenuti (height) pari a zero pixel la sua larghezza e la sua altezza sono determinate direttamente dai suoi bordi. Quest’ultimi si incontrano a 45 gradi negli angoli.

Il primo passo da fare è creare un elemento, in questo caso un div vuoto, a cui deve essere associata una classe (o un #ID se non deve essere ripetuto) che abbia altezza e larghezza pari a zero e bordi di X pixel.

Il codice html

<div class="triangolo"></div>

Il codice css

.triangolo{
            widht:0;
            height:0;
            border-width: 100px 100px 100px 100px;
            /* per il bordo o tinta unica o colorato.
            io lo faccio di due colori */
            border-color: #000 #f00 #000 #f00;
}

Rivediamo il significato di questo codice:

• abbiamo creato il div vuoto da stilizzare con classe associata “triangolo”
• abbiamo definito la classe “triangolo” nel nostro foglio di stile nella quale abbiamo definito 4 regole: larghezza e altezza a zero, lo spessore del bordo a 100pixel e i colori del bordo (che ho colorato di rosso e di nero perchè sono milanista )

Il risultato dell’elemento con i soli bordi

Clicca sull’immagine per vedere il codice live!

Viene semplice comprendere che facendo sparire 3 bordi ne rimarrà un triangolo. Per fare sparire i 3 bordi non dobbiamo azzerare la grandezza dei bordi superflui ma semplicemente definire il loro colore come trasparente utilizzando transparent anzichè il codice colore. Vediamo subito l’esempio

Il codice CSS

.triangolo {
border-color: transparent transparent #C90 transparent;
border-style: solid;
border-width: 0px 200px 150px 200px;
height: 0px;
width: 0px;
}

Il codice HTML

<div class="triangolo"></div>

Il risultato

Nel prossimo ti mostrerò altre applicazioni di questa tecnica che mostra risultati assai creativi e divertenti!

Abbiamo già visto con i tutorial precedenti come utilizzare le regole dei css3 per migliorare l’aspetto degli oggetti all’interno della nostra pagina. Abbiamo visto come creare angoli arrotondati con i css, come creare ‘singoli’ angoli arrotondati, ombre ai testi ed agli oggetti, insomma c’è n’è da divertirsi.

Oggi però voglio mostrarvi come disegnare con i CSS3!

Disegnare con i Css – La vera storia

Da piccolo giocando a Super Mario Bros mi sono innamorato di quei disegni, a tal punto da mettere in pausa prendere carta e penna e disegnare Mario, Luigi, la principessa ma soprattutto uno TOAD! Il funghetto, mio partner fedele per altro a Super Mario Kart!

Rivedendo per strada le magliette con il TOAD 1UP che stanno praticamente spopolando, almeno da noi a Bari (ne ho viste anche a sharm…), mi son ricordato dei disegni. Adesso però i miei disegni non sono piu con la penna…

Cosi ho pensato: ci pensi a farlo con i css? Detto Fatto! Mentre rientravo da Sharm el Sheik avevo già le idee chiare! Disegnare con i css3 toad sarà una nuova sfida!

Regole da utilizzare

Essendo principamente tondeggiante sono poche le regole da utilizzare, infatti, la border-radius farà da padrona per questo tuorial.

Analizziamo il disegno

Il disegno è composto da:

• La faccia con gli occhi neri
• la testa
• le macchie

La problematica maggiore è quella di disegnare le macchie all’interno della testa che arrotonderemo con alcune regole css.

Il codice HTML

<div id="toad">
    <div id="testa">
         <div class="macchia" id="m1"></div>
         <div class="macchiapiccola" id="m2"></div>
         <div class="macchiapiccola" id="m3"></div>
    </div>

    <div id="faccia">
            	<div class="occhio sx"></div>
                <div class="occhio dx"></div>
    </div>
</div>

Abbiamo due sezioni distinte racchiuse da un unico DIV.

Il codice CSS

#toad{ width:400px;
		height:400px;
		margin:0 auto;
		margin-top:50px;
		position:relative;
}

#testa{
		width:350px;
		height:235px;
		border:10px solid #000;
		margin:0 auto;
		overflow:hidden;
		position:relative;
		z-index:1;
		background-color:#87e236;

		/* trasformazione*/
		-moz-border-radius-topleft:160px;
		-webkit-border-radius-topleft:160px;
		-moz-border-radius-topright:160px;
		-webkit-border-radius-topright:160px;
		-moz-border-radius-bottomleft:65px;
		-webkit-border-radius-bottomleft:65px;
		-moz-border-radius-bottomright:65px;
		-webkit-border-radius-bottomright:65px;
}

.macchia{
		width:120px;
		height:120px;
		border:7px solid #000;
		-moz-border-radius:70px;
		-webkit-border-radius:70px;
		background-color:#FFF;
}

.macchiapiccola{
		width:100px;
		height:100px;
		border:7px solid #000;
		-moz-border-radius:70px;
		-webkit-border-radius:70px;
		background-color:#FFF;
}

#m1{
		position:relative;
		z-index:1;
		background-color:#ffF;
		margin:0 auto;
		margin:130px 20px 0 100px;

}

#m2{	

		position:relative;
		z-index:0;
		margin:-220px 0 0 20px;
		background-color:#Fff;

}

#m3{
		background-color:#FFf;
		position:relative;
		z-index:1;
		margin:-100px 0px 0 220px;
}

#faccia{
		width:200px;
		height:120px;
		background-color:#fefefe;
		border:10px solid #000;
		position:relative;
		z-index:2;
		margin:0 auto;
		margin-top:-40px;

		-moz-border-radius-topleft:5px;
		-webkit-border-radius-topleft:5px;
		-moz-border-radius-topright:5px;
		-webkit-border-radius-topright:5px;

		-moz-border-radius-bottomleft:65px;
		-webkit-border-radius-bottomleft:65px;
		-moz-border-radius-bottomright:65px;
		-webkit-border-radius-bottomright:65px;
}

.occhio{
		width:15px;
		height:45px;
		background-color:#000;
		-moz-border-radius:10px;
}

.sx{ float:left;
	 margin:10px 0 0 70px;
}

.dx{ float:left;
	 margin:10px 0 0 30px;
}

Ecco il risultato senza Internet Explorer

Ecco il risultato con Internet Explorer

Per vedere tutto il codice in azione allora clicca qui: Disegnare con i css

Un consiglio? Se utilizzi Internet Explorer per navigare non ti godi tutto il web! Passa a Firefox!

I fogli di stile possono essere:

• incorporato nella pagina
• esteno
• importati all’interno di un foglio di stile.

Vediamoli singolarmente nel dettaglio.

Fogli di stile incorporati

E’ possibile incorporare lo stile css della pagina scrivendolo nel codice html grazie al tag di apertura <style> e </style>. Quest’ultimo deve essere inserito fra il tag <head> e </head>. Vediamo subito un esempio:

<head>
<style type="text/css">
/*<![CDATA[*/
[..VARIE REGOLE...]
/*]]>*/
</style>
</head>

Come potete vedere abbiamo inserito il codice all’interno di <head> e </head>. Le stringhe di apertura
/*<![CDATA[*/ e di chiusura /*]]>*/ vengono utilizzate nei documenti XHTML per far si che rispettino le regole dell’XML evitando cosi problemi con la sintassi dei css.

I fogli di style incorporati, come facilmente deducibile, avranno effetto solo nel documento in cui sono stato scritti. L’utilizzo di fogli di stile incorporati  è indicato in quei casi in cui per una determinata pagina abbiamo bisogno di un determinato effetto.

Fogli di stile esterni

I fogli di stile esterni non sono altro che dei veri file esterni alla pagine con estensione .css che regolano, dall’esterno, l’aspetto della pagina a cui è stato associato.

Un esempio veloce di foglio di stile associato lo trovato nel codice sorgente di questo blog. Durante la realizzazione, infatti, ho utilizzato un foglio di stile esterno che regola l’intero design del sito. Vediamo direttamente l’esempio di questo blog:

<head>
<!-- definizione fogli di style -->
<link type="text/css" href="http://.bla bla bla../style.css" />
<!-- definizione fogli di style -->
</head>

Utilizzando il tag <link> che non prevede tag di chiusura ho associato il foglio si style con l’attributo href proprio come si fà per i link testuali. Utilizzando questo metodo si possono associare molti fogli di style.

Ricordo inoltre che chiamandosi Cascading Style Sheet ovvero fogli di stile a cascata abbiate cura di scrivere le vostre associazioni uno sotto l’altra in base alla priorità delle regole inserite. Interpretando dall’alto verso il basso il codice sorgente della pagina, il browser tenderà a sovrascrivere le regole css precedenti con le ultime.

Fogli di stile importati

I fogli di stile importati sono sempre dei singoli file con estensione .css come avveniva per quelli esterno ma che possono essere inclusi all’interno di un foglio di stile incorporato alla pagina oppure ad un foglio di stile esterno.

Vediamo come importare fogli di stile prima nello stile incorporato alla pagina e successivamente nel foglio di stile esterno.

Ecco come importare un foglio di stile nel foglio di stile incorporato alla pagina:

<head>
<style type="text/css">
/*<![CDATA[*/
@import "file_importato.css";

[..VARIE REGOLE SE CI SONO...]
/*]]>*/
</style>
</head>

Vediamo adesso come fare all’interno di un foglio di style esterno:

@import "file_importato.css";

Se sono presenti, le regole @import devono essere inserite sempre prima delle normali regole css. Ovviamente in questo esempio il file importato è nella stessa posizione del file xhtml. Potete inserire il file importato in una qualsiasi cartella e cambiare il percorso all’interno dei doppi apici.

• Larghezza dei contenuti (width)
• Altezza dei contenuti (height)
• Spazio fra i contenuti e i bordi o spaziatura interna (padding)
• Bordo del box (border) – Ogni bordo si incontra a 45° con quello adiacente.
• Spazio fra il bordo e gli altri oggetti della pagina (margin)

Vediamo graficamente come raffigurare questo elenco.

E’ facile notare da questa figura come sia l’altezza che la larghezza totale del box, sono la somma della larghezza dei contenuti (width), della spaziatura interna (padding) e dello spessore dei bordi (border).

Questo box model viene utilizzato ed interpretato molto bene da moltissimi browser. Indovinate quale browser deve dare fastidio? Si proprio lui…il solito Internet Explorer (dipende dalle versioni).

Anche se fra un pò uscirà la versione 9 di Internet Explorer, mio malgrado, ma anche di tutti i colleghi webdesigner, ho contatato che sono ancora troppi gli utenti che utilizzano Internet Explorer 6 nonostante ci siano Internet Explorer 7 e 8 già da un pò in giro. Cosi andiamo a conoscere qualcosa in più del box model di Internet Explorer per Windows.

Il box Model di IE per Windows

Il problema principale del box model di Internet Explorer per Windows sta nel fatto che la proprietà width anzichè determinare la larghezza dei contenuti viene interpretato come larghezza totale del box.
Cosi facendo per sapere quanto è la larghezza dei contenuti dobbiamo sottrarre a questo valore la larghezza del bordo e del padding. Stessa cosa per l’altezza.

Bisogna cosi prestare attenzione a questo problema per scrivere del codice css di fix, attraverso i commenti condizionali, che si adatti a qualsiasi programma utente. Questo problema non si verifica sulle versioni 6 e 7 se non operano in modalità quirks mode.

Risolvere questo problema tuttavia non è poi cosi difficile. Ci sono due metodi veloci per bypassare questo problema:

• Evitare di impostare contemporaneamente la larghezza (o l’altezza) e i bordi o il padding
• Si imposta solo per IE pee Windows 5.x una larghezza (o altezza) pari alla larghezza (o altezza) dei contenuti più lo spessore del padding e dei bordi.( Internet Explorer 5.5 è ormai superato)

Il problema del box model è stato riparato nella versione 8 di Internet Explorer.

I commenti condizionali per Internet Explorer

Come già accennato prima, l’utilizzo dei commenti condizionali ci pemetterà di visualizzare all’interno del codice (x)html della nostra pagina delle regole css che ci serviranno a fixare i bug del box model di internet Explorer e non solo. Tramite questi commenti infatti si possono visualizzare delle vere e proprie aree del sito se l’utente utilizza un determinato browser o un altro.

Vediamo un veloce esempio di utilizzo:

<link rel="stylesheet" href="stylecomune.css" type="text/css" />

<!--[if IE 6]>
<link rel="stylesheet" href="style_ie6.css" type="text/css" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" href="style_ie7.css" type="text/css" />
<![endif]-->

<!--[if IE 8]>
<link rel="stylesheet" href="style_ie8.css" type="text/css" />
<![endif]-->

Analisi del codice

Nel codice sopra è strutturato il questo modo: il browser legge ed applica il file stylecomune.css che andrebbe bene per tutti i browser. Se il browser che sta utilizzando l’utente è internet explorer 6 allora il browser carica il foglio di style style_ie6.css con alcune regole che sovrascriveranno quelle scritte nel file stylecomune.css e che permetteranno la corretta visualizzazione del nostro sito web.

Stessa cosa vale per IE 7 e 8. Il tutto racchiudendo la chiamata al foglio di style o lo style stesso fra i commenti condizionali  interpretati solo da Internet Explorer:

<!--[if IE X]>      <![endif]>

Tutto questo letteralmente si traduce in se (if) utilizza Internet Explorer  X allora carica questo file.

Con questa procedura si possono prevedere delle zone in cui far visualizzare un messaggio che invogli l’utente ad aggiornare il proprio browser giocando con la regola display:none.

Con questo articolo annuncio una serie di articoli di approfondimento e ripetizione dei css che ho chiamato appunto CSS Zoom. Troverete questi Zoom nella categoria CSS blog

Lo scopo di questo tutorial sarà quello di realizzare una cornicetta bianca con un bordino che ne idenfichi il perimetro e uno sfondo bianco che ci darà l’effetto cornice.

Il codice CSS per creare la cornice

.cornice{

padding:10px;
         border:1px solid #999;
         background-color:#FFF;
}

Ho realizzato la classe .cornice che dall’alto verso il basso definisce:

• 10px di padding su tutti e 4 i lati
• 1px di bordo di tipo solido di colore grigio
• sfondo bianco

A questo già completo effetto gli si può aggiungere un altro effetto sfrtuttando i CSS3 e la regola box-shadow, già vista in un precedente articolo, e trasformando la classe cosi:

.cornice{
          padding:10px;
          border:1px solid #999;
          background-color:#FFF;
          -moz-box-shadow:0 0 7px #333;
          -webkit-box-shadow:0 0 7px #333;
}

Assegnate la classe a tute le vostre immagini per avere l’effetto! Ecco la differenza:

Foto senza alcun effetto

Foto con codice CSS ma senza CSS3

Foto con aggiunta di CSS3 non visibile su IE

Questo articolo è dedicato ad un mio corsista online di nome Fernando F. di Priverno (LT).