Corso HTML e CSS (21^ lezione): CSS: Box model (4^parte)

Impariamo a costruire un sito Web

Lezione 21: CSS: Box model (4^parte).

 

Continuiamo con le proprietà che si possono usare per stilizzare un box.

a) Formattazione dei bordi di un box (cont.)


outline Imposta il contorno di un box. Il contorno è esterno al contorno. Di conseguenza outline non fa parte del box e le dimensioni width e heightdel box non comprendono lo spazio occupato da outline. Con questa dichiarazione si possono impostare tutte le proprietà del contorno in un’unica dichiarazione. Nell’ordine si possono impostare: outline-width, outline-style, outline-color

outline-width: Per i valori che può assumere questa proprietà Vedi sotto outline-width

outline-style: Per i valori che può assumere questa proprietà Vedi sotto outline-style

outline-color: Per i valori che può assumere questa proprietà Vedi sotto outline-color

Es d’uso:

border:1px solid black;

outline:5px dotted green;

In questo modo abbiamo detto che il contorno esterno al bordo sarà di 5 pixels, tratteggiato e di colore verde intorno ad un contorno di 1 pixel continuo e nero. Il risultato sarà:

contorno nero con contorno tratteggiato verde

outline-style Imposta lo stile del contorno di un box.I valori che la proprietà outline-style può assumere sono:

none Signiifica nessun contorno.
dotted Tratteggiato a puntini.Es.

outline-style: dotted;

Questo è un contorno dotted

dashed Tratteggiato con lineetteEs.

outline-style: dashed;

Questo è un contorno dashed

solid Specifica un contorno a linea continuaEs.

outline-style: solid;

Questo è un contorno solid

double Specifica un contorno con linea doppiaEs.

outline-style:double;

Questo è un contorno double

groove Specifica un contorno 3D incavato.Es.

outline-style: groove;

Questo è un contorno groove

ridge Specifica un contorno 3D rialzato.Es.

outline-style: ridge;

Questo è un contorno ridge

inset Il contorno farà risultare tutto il box incavato.Es.

outline-style: inset;

Questo è un contorno inset

outset Il contorno farà risultare tutto il box rialzato.Es.

outline-style: outset;

Questo è un contorno outset

inherit Specifica che lo stile del contorno può essere ereditato dall’elemento padre IE lo supporta solo dalla versione 9.
outline-color Imposta il colore del contorno di un box. Prima di assegnare un colore ad un contorno bisogna dichiarare un outline-style, perché non si può assegnare un colore se il contorno non è definito.Oltre al colore si possono attribuire a questa proprietà anche i valori:

✦ invert – Specifica che il contorno assume il colore inverso dello sfondo (per assicurare che sia sempre visibile). Questo è il default.

✦ inherit – Specifica che il colore del contorno è ereditato dal padre.

outline-width Imposta lo spessore del contorno di un box.I valori che la proprietà outline-width può assumere sono:

thin Specifica un contorno sottile
medium Specifica un contorno medio (default)
thick Specifica un contorno spesso
Lunghezza in px Può essere specificato lo spessore espresso in pixels
inherit Specifica che lo spessore del contorno può essere ereditato dall’elemento padre IE lo supporta solo dalla versione 9.

Es d’uso:

outline-width:thin;

outline-offset Stabilisce la distanza di un contorno dal bordo del box. Questa proprietà non è supportata da Internet Explorer.Es d’uso:

outline-offset:10px;

border-radius Arrotonda i bordi di un box. Riunisce in un’unica dichiarazione tutte le proprietà che possono essere assegnate con:border-top-left-radius:angolo alto a sinistra

border-top-right-radius:angolo alto a destra

border-bottom-right-radius:angolo basso a destra

border-bottom-left-radius:angolo basso a sinistra

Vedi le suddette proprietà per una descrizione più dettagliata dei possibili valori.

I valori che possono essere assegnati sono:

4: in questo caso si riferiscono ai 4 angoli nell’esatto ordine detto sopra, cioè a partire dall’angolo alto a sinistra in senso orario.

3: in questo caso si assume che i 3 valori si riferiscano ai primi 3 angoli e l’angolo bottom-left sia uguale al top-right.

2:
in questo caso si assume che i 2 valori si riferiscano ai primi 2 angoli e l’angolo bottom-left sia uguale al top-right, mentre l’angolo bottom-right sia uguale al top-left.

1: In questo caso il valore indicato si riferisce ai 4 angoli.

I valori possono essere espressi invalore assoluto o percentuale.

IE lo supporta solo dalla versione 9.

Es d’uso:

border-radius : 1em;

oppure:

border-radius : 10%;

Effetto:

Questo bordo è stato arrotondato col valore 1em

 

border-top-left-radius Definisce il raggio di curvatura dell’angolo in alto a sinistra.A questo vertice così come ovviamente agli altri, possono essere assegnati 2 valori in valore assoluto oppure in percentuale.

Il primo valore si riferisce alla parte orizzontale, mentre il secondo si riferisce alla parte verticale. Se il secondo valore è omesso si assume che il raggio sia uguale nelle due parti. Il valore 0 (default) rende la curvatura nulla (angolo di 90°).

I valori espressi in % sono relativi rispettivamente alla larghezza (il 1° dei 2 valori) ed all’altezza del box.

IE lo supporta solo dalla versione 9. Safari e Chrome supportano la variante -webkit-border-top-left-radius

Es d’uso:

border:2px solid;

padding:10px;

background:#ededed;

border-top-left-radius:30px 10px;

-webkit-border-top-left-radius:30px 10px;

Si otterrà:

Bordo alto sinistro irregolare
border-top-right-radius Definisce il raggio di curvatura dell’angolo in alto a destraAnche a questo vertice possono essere assegnati 2 valori in valore assoluto oppure in percentuale.

Il primo valore si riferisce alla parte orizzontale, mentre il secondo si riferisce alla parte verticale. Se il secondo valore è omesso si assume che il raggio sia uguale nelle due parti. Il valore 0 (default) rende la curvatura nulla (angolo di 90°).

I valori espressi in % sono relativi rispettivamente alla larghezza (il 1° dei 2 valori) ed all’altezza del box.

IE lo supporta solo dalla versione 9. Safari e Chrome supportano la variante -webkit-border-top-right-radius

Es d’uso:

border:2px solid;

padding:10px;

background:#ededed;

border-top-right-radius:10px 30px;

-webkit-border-top-right-radius:10px 30px;

Si otterrà:

Bordo alto destro irregolare
border-bottom-right-radius Definisce il raggio di curvatura dell’angolo in basso a destra.Vale esattamente quanto detto per border-top-right-radius sostituendo bottom a top e cioè riferendosi all’angolo in basso a destra anziché in alto a destra.
border-bottom-left-radius Definisce il raggio di curvatura dell’angolo in basso a sinistra.Vale esattamente quanto detto per border-top-left-radius sostituendo bottom a top e cioè riferendosi all’angolo in basso a sinistra anziché in alto a sinistra.
box-shadow Definisce un ombra per il box.I valori che si possono assegnare per definire l’ombra sono:

Posiz. Orizzontale Imposta lo spostamento dell’ombra in senso orizzontale. Un valore positivo pone l’ombra a destra, un valore negativo a sinistra.
Posiz.Verticale Imposta lo spostamento dell’ombra in senso verticale. Un valore positivo pone l’ombra in basso, un valore negativo in alto.
Sfocatura Questo valore definisce il livello di sfocatura dell’ombra; un valore più alto fa apparire l’ombra più sfocata. 0 rende l’l’ombra netta e senza sfocatura.
Diffusione Questo valore imposta il livello di diffusione dell’ombra. Più i valori sono alti, più l’ombra tenderà ad espandersi, in tutte le direzioni. Valori negativi invece, fanno contrarre l’l’ombra, fino a scomparire del tutto.
Colore Colore dell’ombra.
Inset Con Inset l’ombra sarà interna al box, per cui i primi due valori positivi, indicheranno lo spostamento dell’ombra verso l’interno del box.

Gli unici valori obbligatori sono i primi 2. Gli altri per default sono 0 ed inset ovviamente è off.

Internet Explorer supporta questa proprietà solo a partire dalla versione 9, mentre Safari supporta una versione equivalente richiamabile con -webkit-box-shadow .

Es. d’uso:

box-shadow: 5px 5px 10px 2px #333333;
-webkit-box-shadow: 5px 5px 10px 2px #333333;
Esempio di box con ombra spostata a destra e in basso di 5px con livello di sfocatura 10, estensione dell’ombra di 2px e colore grigio.

 

box-sizing Permette di definire come vanno calcolate le dimensioni del box. A questo proposito raccomandiamo di rivedere quanto detto alla lezione 18 sulle dimensioni dei box.Può assumere i valori:

content-box Le dimensioni che assegnamo al box verranno riferite al suo contenuto e non alle dimensioni esterne che varieranno per includere anche padding e bordi.
border-box Le dimensioni che assegnamo al box verranno non riferite al suo contenuto, ma alle alle dimensioni esterne del box. Le dimensioni del contenuto quindi varieranno a seconda dei valori di padding e bordi.
inherit Significa che il valore di questa proprietà deve essere ereditato dall’elemento padre.

Firefox e Safari non supportano questa proprietà, ma una loro variante; rispettivamente:

moz-box-sizing (per Firefox)

webkit-box-sizing (per Safari)

Es. d’uso:

width:200px;
height:100px;
padding:20px;
box-sizing:content-box;

In questo modo si dice al browser
che il box avrà dimensioni 240 x 140 perché il contenuto manterrà le dimensioni dichiarate di 200 x 100 a cui andranno aggiunti i 20px di padding per lato.

 

 

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.