2 il nuovo standard di stile css 3 0 by Corso Grafica e Web Design

CSS 3.0

Introduzione ai CSS 3.0

I CSS 3.0 rappresentano l’ultimo standard di riferimento del Web 3.0 per l’applicazione e l’utilizzo di nuovi stili all’interno delle pagine web. Il nuovo standard, ancora in fase si sviluppo, non andrà ovviamente a sostituire le regole di stile CSS 2.0 che già conosciamo, ma andrà semplicemente ad ampliarle, con l’aggiunta di nuove proprietà.

Pertanto in questa lezione andremo ad analizzare le novità di stile finora proposte, tenendo presente che molto spesso sarà necessario l’impiego allo stesso tempo di diverse sintassi specifiche, a seconda dei browser, per un corretto utilizzo delle nuove proprietà. In particolare sarà necessario aggiungere subito prima della proprietà di stile i seguenti elementi, diversi a seconda del browser di riferimento: -webkit- proprietà di stile /* per i browser Chrome e Safari */ -ms- proprietà di stile /* per il browser IE 9 */ -moz- proprietà di stile /* per il browser Firefox */ -o- proprietà di stile /* per il browser Opera */

Proprietà di Background

Per quanto riguarda lo stile specifico per lo sfondo (background) degli elementi, il nuovo standard di stile introduce due nuove proprietà: • background-origin • background-size

Entrambe le proprietà sono già supportate dalle attuali versioni dei browser.

La proprietà background-size serve a specificare le dimensioni esatte (in termini di larghezza e altezza) di un’immagine utilizzata come sfondo di un dato elemento. In questo modo vengono completamente rimpiazzati, in questo stesso ruolo, gli attributi height e width. In questo modo sarà possibile gestire le dimensioni di un’immagine di sfondo direttamente, senza doverle necessariamente elaborare, tramite un apposito software, prima dell’inserimento nella pagina HTML. Esempio dell’utilizzo della proprietà background-size

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Proprietà background-size</title> <style type="text/css"> body { background: url(sfondo.jpg); background-size: 300px 300px; /* la proprietà va a ridimensionare le dimensioni originali del file immagine “sfondo.jpg” */ background-repeat: no-repeat;

} </style> </head> <body> <p> Le nuove proprietĂ dei CSS3 </p> </body> </html>

Output

Lo stesso codice senza la proprietĂ background-size

La proprietà background-origin serve invece a specificare dove esattamete l’immagine di sfondo dovrà essere utilizzata. Abbiamo già analizzato la struttura del cosiddetto box-model e pertanto sappiamo come un dato elemento in una struttura HTML vada ad occupare di base un determinato spazio. Con la nuova proprietà background-origin è possibile posizionare un’immagine di sfondo non solo in relazione ad uno specifico elemento, ma anche nell’area relativa ai suoi bordi (border) o al suo padding.

Pertanto, a seconda del posizionamento specifico di un’immagine in relazione all’elemento scelto, i valori associabili alla proprietà saranno i seguenti: border-box, padding-box e content-box. Se si desidera posizionare l’immagine nell’area di “border” di un dato elemento (secondo quanto specificato dalla struttura chiamata box model) sceglieremo il valore border box; Se si desidera posizionare l’immagine nell’area di “padding” di un dato elemento sceglieremo il valore padding-box; se invece si desidera

posizionare l’immagine nell’area di “contenuto principale” di un dato elemento sceglieremo il valore content-box. Ovviamente affinchè questa proprietà possa funzionare, l’elemento a cui viene applicata questa proprietà dovrà avere un padding o un bordo adeguato alla visualizzazione desiderata dell’immagine di sfondo. <!DOCTYPE html> <html> <head> <style type="text/css">

div { border:2px solid gold; padding:50px; background-image:url('sfondo.jpg'); background-size: 150px; background-position:left; background-repeat:no-repeat; } #div1{ background-origin: border-box;

} #div2{ padding: 100px; background-origin: padding-box; } #div3{ background-origin: content-box; } </style> </head> <body>

<p>background-origin:border-box:</p> <div id="div1"> Primo Paragrafo </div> <p>background-origin:padding-box:</p> <div id="div2"> Secondo Paragrafo </div> <p>background-origin:content-box:</p> <div id="div3">

Terzo Paragrafo </div> </body> </html>

Output

Bordi e Nuove Proprietà

Le nuove proprietà di stile CSS 3.0 relative ai “bordi” degli elementi HTML sono le seguenti: • border-radius • box-shadow • border-image

La proprietà border-radius può essere utilizzata per creare dei bordi visibili, con angoli arrotondati. Per far questo basterà specificare un dato grado di piegatura degli angoli come valore della proprietà. Esempio base: border-radius: 15 px /* è possibile utilizzare anche altre unità di misura, pt, cm, em, ecc e valori in percentuale */.

Un unico valore impostato specifica il grado di curvatura per tutti e 4 gli angoli del bordo creato attorno ad un dato elemento. Struttura esempio <!DOCTYPE html> <html> <head><title>border-radius</title> <style type="text/css"> div { border:2px solid green;

padding:50px; background-size: 150px; background-position:left; background-repeat:no-repeat; } #div1{ border-radius:20px; } #div2{ border-radius: 50%; }

#div3{ border-radius: 10cm; } </style> </head> <body>

<p>border-radius:20px</p> <div id="div1"> Primo Paragrafo </div>

<p>border-radius: 50%</p> <div id="div2"> Secondo Paragrafo </div> <p>border-radius: 10cm </p> <div id="div3"> Terzo Paragrafo </div> </body> </html>

Output

La proprietà border-image serve a creare un bordo specifico, utilizzando un’immagine di base, specificata come valore della proprietà. Per visualizzare l’immagine scelta dovremmo ovviamente impostare una larghezza (width) del bordo sufficiente alla sua visualizzazione. Andiamo ora ad analizzare in dettaglio la sintassi di questa proprietà che è strutturata tramie l’utilizzo di tre valori: esempio base: border-image: url(immagine_sfondo.png) 50 round/stretch

• il primo valore della proprietà corrisponde all’URL dell’immagine e pertanto verrà indicato nel seguente modo url(nomefile.estensione). L’immagine indicata come valore verrà utilizzata per tutti e 4 i bordi di un elemento. • Il secondo valore di questa proprietà è composto da 1 (fino a quattro valori numerici ciascuno in relazione ad 1 bordo dell’elemento) valore numerico senza indicazione di un’unità di misura specifica. Questo valore (o 4 valori) corrisponde al valore impostato per la larghezza generale del bordo. Nella struttura d’esempio seguente

vedremo infatti che questo valore è pari a 50, lo stesso valore espresso in relazione alla proprietà border-width. Utilizzando un’immagine come bordo di un elemento, questa viene suddivisa in una griglia regolare, formata da nove sezioni. Quattro sezioni corrispondo agli angoli dell’immagine (1, 3, 7 e 9), quattro sezioni corrispondono ai lati dell’immagine (2, 4, 6 e 8) e una sezione centrale corrisponderà all’area centrale dell’immagine (5).

Pertanto il singolo valore numerico (oppure i 4 valori numerici) associato alla proprietà stabilirà quali parti dell’immagine indicata

dovranno essere utilizzate all’interno del box alle posizioni base 1, 3, 9, 7, vale a dire ai quattro angoli. Pertanto un unico valore indicherà l’utilizzo per tutti gli angoli di una data parte dell’immagine alta 50px. • La terza parte della dichiarazione comprende una parola chiave: round oppure stretch. Il termine round definisce il comportamento in orizzontale e verticale dell’immagine: quindi definisce la gestione delle restanti aree dell’immagine 2, 4, 5, 6 e 8. Il valore round indica la ripetizione della data parte dell’immagine.

Il valore stretch indica invece che la data parte dell’immagine non sarà ripetuta ma verrà “estesa” fino a riempire l’area. L’immagine di riferimento che utilizzeremo nell’esempio successivo per andare a creare il bordo è la seguente:

Struttura esempio <!DOCTYPE html> <html> <head><title>border_image</title>

#stretch { border-image:url(immagine_bordo.png) 50 stretch; } </style> </head> <body>

<p>NB: Explorer ancora non supporta la proprietĂ background-image</p> <div id="round">All'interno di questo div l'immagine per il bordo viene ripetuta fino a riempire l'intera area dell'elemento.

</div> <div id="stretch">Qui l'immagine non viene ripetuta ma con il valore "stretch" viene semplicemente allungata per andare a riempire l'area</div> </body> </html>

Output

La proprietĂ box-shadow puĂ˛ essere utilizzata per conferire un effetto di ombreggiatura al contenitore indicato come selettore di regola. Struttura esempio <!DOCTYPE html> <html> <head><title>border_image</title> <style type="text/css"> div { width: 200px;

height:200px; padding: 20px; color: white; background-color: #8242FF; box-shadow: 20px 20px 10px #A160FF; } </style> </head> <body>

<div>Contenitore con Effetto di Ombreggiatura

</div> </body> </html>

Output

Caratteri ed Effetti di Testo Con il nuovo standard di stile dovrebbe essere ancora più semplice l’utilizzo di font specifici, diversi dai cosiddetti safe-font, considerati effettivamente sicuri per le pagine web. La proprietà da utilizzare in questo caso è @font-face, di cui è stata semplicemente regolarizzata la sintassi, nel modo seguente: Struttura Esempio <!DOCTYPE html> <html>

<head><title>import font</title> <style type="text/css"> @font-face { font-family: SpecialFont; src: url('Snickles.ttf'), url('Snickles.eot'); /* IE9 */ } div { width: 200px;

height:200px; padding: 20px; color: white; font-size: 20pt; background-color: #8242FF; box-shadow: 20px 20px 10px #A160FF; font-family:SpecialFont; }

</style> <div>Contenitore con caratteri SpecialFont

</div> </body> </html>

Output

Per quanto riguarda invece gli effetti di testo troviamo due nuove proprietà di stile: text-shadow e word-wrap. La proprietà text-shadow funziona in maniera simile alla proprietà box-shadow: l’effetto di ombreggiatura finale è lo stesso ma la regola viene applicata ai caratteri di testo presenti all’interno di un dato elemento. Struttura esempio <!DOCTYPE html> <html> <head><title>text-shadow</title>

text-align: center; font-style: italic; } </style> <div>Testo con Effetto di Ombreggiatura </div> </body> </html>

Output

La proprietà word-wrap (con valore break-word) serve invece ad evitare che delle parti di testo, che dovrebbero apparire sempre racchiuse all’interno di un dato elemento, fuoriescano dall’area specifica. Struttura esempio <!DOCTYPE html> <html> <head><title>word break </title> <style type="text/css"> p{

width: 150px; border:2px solid blue; } #secondop { word-wrap: break-word; } </style> </head> <body> <p id="primop"> In questo paragrafo viene utilizzata una parola troppo lunga per rientrare nei limiti imposti:

supercalifragilistichespiralidoso</p> <p id="secondop"> In questo paragrafo viene utilizzata una parola troppo lunga per rientrare nei limiti imposti ... tuttavia la proprietĂ word-wrap farĂ rientrare anche questa parola sempre all'interno dell'area specifica: supercalifragilistichespiralidoso</p> </body> </html>

Output

Proprietà di trasformazione Con il nuovo standard vengono introdotte delle nuove proprietà specifiche per la “trasformazione” degli elementi. Le proprietà principale è la proprietà transform a cui possono essere associati i seguenti metodi: • translate() • rotate() • scale() • skew()

N.B. La proprietà in questione è ancora in fase di implementazione. Pertanto affinchè possa essere correttamente utilizzata per il momento è necessario adottare una sintassi specifica a seconda del browser di riferimento.

Nella struttura seguente vediamo in che modo tali metodi possono essere impiegati in relazione agli elementi dell’HTML.

Struttura Esempio <!DOCTYPE html> <html> <head><title>proprietĂ transform</title> <style type="text/css"> div { width:100px; height:50px; background-color: #FFEFCE; }

#first{

-webkit-transform: rotate(-30deg); /* Safari e Chrome */ // Il metodo rotate specifica in gradi un angolo di rotazione in senso orario dellâ&#x20AC;&#x2122;elemento -ms-transform: rotate(-30deg); /* IE 9 */ -o-transform: rotate(-30deg); /* Opera */ -moz-transform: rotate(-30deg); /* Firefox */ position: absolute; top: 50px; }

#second{ -webkit-transform: translate(200px,200px); /* Safari e Chrome */ // Il metodo translate specifica, secondo una data unità di misura, un movimento dell’elemento lungo l’asse X (orizzontale) e Y (verticale). -ms-transform: translate(200px,200px); /* IE 9 */ -o-transform: translate(200px,200px); /* Opera */ -moz-transform: translate(200px,200px); /* Firefox */ position: absolute; top: 150px; }

#third{ -webkit-transform: scale(2,4); /* Safari e Chrome */ // Il metodo scale specifica dei valori di riduzione o ingrandimento in orizzontale (asse x) e/o in verticale (asse y) per un dato elemento. In questo caso l’elemento div raddoppierà la sua larghezza originaria e quadruplicherà la sua altezza di partenza. -ms-transform: scale (2,4); /* IE 9 */ -o-transform: scale (2,4); /* Opera */ -moz-transform: scale (2,4); /* Firefox */ position: absolute; top: 250px; left: 500px; }

#fourth{ -webkit-transform: skew(30deg,20deg); /* Safari e Chrome */ // Il metodo skew determina ancora il grado di rotazione di un dato elemento ma stavolta rispetto agli assi x e y. -ms-transform: skew(30deg,20deg); /* IE 9 */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: translate(200px,200px); /* Firefox */ position: absolute; top: 350px; left: 50px; }

</style> </head> <body> <div id="first">Primo</div> <div id="second">Secondo</div> <div id="third">Terzo</div> <div id="fourth">Quarto</div> </body> </html>

Output

Proprietà di Transizione Una delle nuove proprietà dei CSS 3.0 permette di alternare alcuni stili, secondo una data temporizzazione. La proprietà in questione è transition e per funzionare correttamente necessita di due valori specifici: • L’indicazione della proprietà a cui si vuole applicare l’effetto di transizione (ad es border, width, ecc.) • La durata della transizione (espressa in secondi, s)

N.B. La proprietà transition attualmente non è supportata IE 9.

Struttura esempio <!DOCTYPE html> <html> <head><title>ProprietĂ Transition</title> <style type="text/css"> div { text-align: center; width:200px; height:100px; background: gold;

transition: width 5s; -webkit-transition: width 5s; /* Sintassi specifica per Safari e Chrome */ -o-transition: width 5s; /* Sintassi specifica per Opera */ } div:hover { width: 650px; border: 2pt solid green; } </style> </head>

<body> <div>Fai passare il mouse qui!</div> <p>Per vedere il funzionamento della proprietà è necessario spostare il cursore del mouse soprà all'elemento div!</p> </body> </html>

Output iniziale

Output in transizione

ProprietĂ di Animazione La regola @keyframes viene utilizzata per specificare uno stile di partenza che poi cambierĂ dinamicamente, secondo quando indicato. Es. @keyframes primaprova {from {background: purple;} to {background: pink;} }

Una volta che una data animazione viene creata con la regola @keyframe sarà necessario indicare un selettore, a cui la regola verrà applicata. A questo scopo viene utilizzata la proprietà animation che andrà a specificare il nome dell’animazione e la durata dell’animazione, secondo la seguente sintassi di base: … Prima si specifica la regola Keyframe @keyframes primaprova {from {background: purple;}

to {background: pink;} }

â&#x20AC;Ś Poi si specifica la proprietĂ di animazione con la durata div { animation: primaprova 5s; }

Struttura esempio <!DOCTYPE html> <html> <head><title>regola keyframe e proprietĂ animation - parte 1</title> <style type="text/css"> div { width:300px; height:100px; background:#FFEFCE; position: absolute;

left: 35%; top: 20%; padding: 2%; text-align: center; animation: prova 10s; -webkit-animation:prova 10s; /* Sintassi specifica per Safari e Chrome */ -moz-animation:prova 10s; /* Sintassi specifica per Firefox */ -o-animation:prova 10s; /* Sintassi specifica per Opera */ animation-iteration-count: infinite; /* l'animazione verrĂ ripetuta all'infinito con questa specifica proprietĂ : animation-iteration-count. Il valore di default sarebbe 1 */ -webkit-animation-iteration-count: infinite; /* Sintassi specifica per Safari e Chrome */

-moz-animation-iteration-count: infinite; /* Sintassi specifica per Firefox */ -o-animation-iteration-count: infinite; /* Sintassi specifica per Opera */ } @keyframes prova { from {background: #009F82;} to {background: gold;} } @-webkit-keyframes prova /* Sintassi per Safari e Chrome */ { from {background:#009F82;}

to {background:gold;} } @-moz-keyframes prova /* Sintassi per Firefox */ { from {background:#009F82;} to {background:gold;} } @-o-keyframes prova /* Sintassi per Opera */ { from {background:#009F82;} to {background:gold;}

} </style> </head> <body> <div>Regola @keyframes e ProprietĂ Animation</div> </body> </html>

Output

Esistono inoltre delle funzionalità aggiuntive applicabili alla nuova proprietà di animazione. In particolare, utilizzando dei valori percentuale è possibile specificare i tempi di passaggio tra i vari stili, gestendo quindi la durata delle singole fasi di animazione. Struttura esempio <!DOCTYPE html> <html> <head><title>regola keyframe e proprietà animation - parte 2</title> <style type="text/css"> div

{ width:300px; height:100px; background:#FFEFCE; position: absolute; left: 35%; top: 20%; padding: 2%; text-align: center; animation: prova 8s; -webkit-animation:prova 8s; /* Sintassi specifica per Safari e Chrome */

-moz-animation:prova 8s; /* Sintassi specifica per Firefox */ -o-animation:prova 8s; /* Sintassi specifica per Opera */ animation-iteration-count: infinite; /* l’animazione verrà ripetuto un numeto infinito di volte */ -webkit-animation-iteration-count: infinite; /* Sintassi specifica per Safari e Chrome */ -moz-animation-iteration-count: infinite; /* Sintassi specifica per Firefox */ -o-animation-iteration-count: infinite; /* Sintassi specifica per Opera */ } @keyframes prova { 0% {background:#009F82;} // Lo 0% indica il punto d’inizio dell’animazione mentre il valore 100% indicherà il punto d’arrivo dell’animazione.

25% {background:#00C196;} 50% {background:gold;} 100% {background:#FFE118;} } @-webkit-keyframes prova /* Sintassi per Safari e Chrome */ { 0% {background:#009F82;} 25% {background:#00C196;} 50% {background:gold;} 100% {background:#FFE118;} }

@-moz-keyframes prova /* Sintassi per Firefox */ { 0% {background:#009F82;} 25% {background:#00C196;} 50% {background:gold;} 100% {background:#FFE118;} } @-o-keyframes prova /* Sintassi per Opera */ { 0% {background:#009F82;} 25% {background:#00C196;}

50% {background:gold;} 100% {background:#FFE118;} } </style> </head> <body> <div>Regola @keyframes e ProprietĂ Animation</div> </body> </html>

CSS 3 e Layout Con le nuove proprietà dei CSS 3.0 è possibile suddividere una pagina web in più colonne, proprio come nei layout di un normale quotidiano. La proprietà di base per creare tale specifica suddivisione è columncount, al momento ancora non accettata da IE 9 e supportata dagli altri browser solo con una sintassi specifica. Questa proprietà serve, in associazione ad un dato elemento della struttura HTML (come ad esempio, un paragrafo, contenente del testo), a creare delle suddivisioni all’interno di esso.

La proprietà di suddivisione base column-count viene utilizzata a fianco di altre due proprietà: column-gap – che determina la spaziatura tra le colonne create nel layout; column-rule – che determina la larghezza e lo stile delle line di divisione presenti tra le varie colonne;

Vediamo un esempio base dell’utilizzo di queste nuove proprietà.

Struttura esempio <!DOCTYPE html> <html> <head><title>Colonne CSS 3</title> <style type="text/css">

.magazine { column-count: 3; /* La proprietĂ va a dividere l'elemento div specificato in 3 colonne */ -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */

column-gap: 60px; -moz-column-gap:60px; /* Firefox */ -webkit-column-gap:60px; /* Safari and Chrome */

column-rule:2px dotted #e01f25; /* prima la dimensione della linea, lo stile (i valori sono gli stessi utilizzati per lo stile dei bordi) e infine il colore */ -moz-column-rule:2px dotted #e01f25; /* Firefox */ -webkit-column-rule:2px dotted #e01f25; /* Safari and Chrome */

background-color: #ffffd0;

text-align: justify; padding: 10px;

} </style> </head> <body> <div class="magazine"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu enim eget odio adipiscing viverra. /* testo di riempimento – viene usato nella realizzazione di pagine di prova, quando il testo finale non è ancora pronto. Esistono in rete diversi generatori di questa tipologia di testo “riempitivo”, specifico per la progettazione di pagine web, uno fra

questi Ă¨ accessibile e utilizzabile in maniera del tutto gratuita al seguente link: http://lipsum.com/ */ Vivamus ultricies, tellus consectetur cursus feugiat, mi purus placerat lorem, in vehicula odio nunc in libero. In condimentum faucibus sapien in aliquam. Aliquam erat volutpat. Nulla ac ante ut ante elementum sollicitudin. Suspendisse eget diam id ante auctor porta. Suspendisse consectetur tellus mauris, ut gravida tortor. Ut pharetra metus eget elit eleifend faucibus. Quisque sem est, sagittis ac facilisis quis, fermentum sit amet turpis. Morbi ullamcorper tempor sapien ac accumsan. Vivamus massa nisl, tincidunt at lacinia at, pulvinar at metus.

Nulla ultricies tellus eget risus condimentum vitae accumsan diam interdum. Nam ut lectus orci, sit amet feugiat est. Aenean eu neque eget nisl pretium rhoncus. Phasellus sit amet ornare lorem. Sed eget est leo. Nulla facilisi. Praesent egestas nisi sit amet neque suscipit rutrum. Maecenas eu turpis at metus pulvinar sagittis. Mauris condimentum tellus nec lorem faucibus aliquam. In consectetur dapibus nunc. Nulla nibh ante, elementum ac fermentum eget, dictum ac lacus. Maecenas euismod eros quis turpis scelerisque vel porta lacus placerat. Nunc non nisi est. Mauris quis libero id purus tempus pretium ac et turpis. Mauris posuere congue pharetra. Mauris a ullamcorper nunc.

Pellentesque sed urna arcu, id ornare neque. Vestibulum malesuada risus ut ante volutpat ornare. Proin aliquet imperdiet purus, vel gravida ante viverra ut. Integer lorem augue, elementum sed sagittis dignissim, fermentum nec eros. Phasellus vestibulum mattis quam sed egestas. Nullam imperdiet hendrerit purus eu cursus. Sed tincidunt, arcu sit amet eleifend dictum, mi orci mattis odio, vitae luctus leo dui sit amet elit. Phasellus at feugiat leo. Integer sem risus, volutpat et convallis non, vulputate ut massa. </div> </body> </html>

Output

Gestione dell’Interfaccia

Alcune proprietà del nuovo standard CSS prevedono un meccanismo di interazione diretta tra l’utente e le pagine visualizzate. In particolare la proprietà resize permette all’utente di ridimensionare in maniera del tutto autonoma un dato elemento presente in pagina, a cui è stata associata tale caratteristica di stile.

La proprietĂ box-sizing permette di definire in che modo gli elementi specificati dovranno occupare una data area.

Infine la proprietĂ outline-offset permette di tracciare delle linee di contorno intorno ai bordi che racchiudono interamente, secondo il box model, i vari elementi di una pagina HTML. Queste linee (outlines) sono differenti dai bordi dal momento che non occupano un dato spazio nella pagina e soprattutto non devono essere necessariamente di forma rettangolare.

La proprietà resize è attualmente supportata da tutti i browser. Al contrario le proprietà box-sizing e non sono supportate da Internet Explorer e devono comunque adottare una sintassi specifica correttamente “leggibile” dagli altri user agent. Struttura esempio <!DOCTYPE html> <html> <head> <title>resize & co </title> <style type="text/css">

div { text-align: center; }

#first { border:2px solid; padding:10px 40px; width:300px;

resize: both; /* con il valore “both” l’utente potrà ridimensionare l’elemento sia in altezza che in larghezza; altri valori, horizontal e vertical, determinano invece un ridimensionamento singolo, nella dimensione specificata */ overflow: auto; /* la proprietà overflow, con valore auto, serve alla visualizzazione dell’elemento necessario alla “manipolazione” da parte dell’utente */ background-color: #E0F1FF; } #second { position: absolute; top: 40%; background-color: #E0F1FF;

margin:20px; width: 200px; padding:30px; height:100px; border:2px dotted #BFBFFF; outline:2px solid #C1FFFF; outline-offset:20px; /* la proprietĂ outline-offset specifica la distanza dell'outline dal bordo esterno dell'elemento */ } div.box {

box-sizing: border-box; -moz-box-sizing: border-box; /* Firefox */ -webkit-box-sizing: border-box; /* Safari */ width:50%; border:4px solid #C0E1FF; float:left; background-color: #E0F1FF; } #example { position: absolute;

left: 25%; top: 40%; } </style> </head> <body> <div id="first">Questo elemento associato alla proprietĂ resize Ă¨ gestibile direttamente dall'utente </div> <div id="second">Questo div Ă¨ dotato di un bordo a punti interno e di un outline esterno, lontano di 20 px dal bordo del contenitore, come evidenziato dall'immagine a fianco ...</div>

<br /> <div id="example"> <img src="outline.png" /> </div> <br /> <div id="third_container"> <div class="box">Questo div occupa la parte sinistra!</div> <div class="box">Questo div occupa la parte destra!</div> </div> </body> </html>

Output

Particolare della proprietĂ resize

FINE LEZIONE