La proprietà box shadow nei CSS serve ad impostare delle ombreggiature agli elementi html ed è associata in particolare al tag div, ma può essere applicata anche ad altri elementi.
Le ombreggiature possono essere uguali su tutti i bordi (superiore, inferiore, destro e sinistro), oppure possono essere personalizzate secondo le proprie esigenze.
I valori ammissibili sono i pixel oppure em, rem e i meno comuni come pt, cm, ecc.
Inoltre si possono applicare più ombre separandole con le virgole.
Questa proprietà è stata introdotta con i CSS3 ed insieme a border radius è molto utilizzata per creare effetti di stile piacevoli e moderni.
Box shadow CSS – esempi
In questo esempio creiamo 3 semplici livelli e a ciascuno di essi assegniamo un’ombreggiatura personalizzata.
Al primo livello, di colore giallo, assegniamo una sfumatura di colore grigio. Invece al secondo assegniamo una sfumatura blu con un livello di trasparenza pari a 0.5 mentre al terzo assegniamo anche un border radius di 10 px.
Ecco quindi di seguito il codice CSS di esempio con differenti effetti box shadow:
Ed ecco la nostra pagina html con i box e i diversi effetti di ombreggiatura:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Esempi box-shadow</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Esempi box-shadow</h1>
<div class="ombreggiatura">
Livello con sfondo giallo e sfumatura grigia
</div>
<div class="omb_sfumata">
Livello con sfondo giallo e sfumatura blu con trasparenza
</div>
<div class="ombra">
Livello con sfondo giallo e sfumatura blu con trasparenza e bordi arrotondati
</div>
</body>
</html>
Ecco quindi l’immagine che mostra il risultato dell’esempio spiegato sopra.
Box shadow CSS inset
Inoltre è anche possibile applicare un effetto ombreggiatura interna. Utilizzando infatti la parola inset l’ombra non si vede all’esterno ma all’interno.
Inserite, dunque, il codice sotto all’interno dell’esempio precedente e create un nuovo livello a cui assocerete la classe ombra_interna. Noterete che l’ombra sarà interna anziché esterna.
-webkit-box-shadow: in genere si impostano gli stessi parametri di box-shadow. Serve ad estendere l’ombreggiatura anche a Safari e alle versioni precedenti di Chrome alla 10.0.
–moz-box-shadow: anche qui si impostano gli stessi parametri. Serve ad estendere l’ombreggiatura anche ad Opera, Internet Explorer e alle versioni precedenti di Firefox alla 4.0.
Per chi volesse consultare la guida su w3school allego il link: cssbox-shadow.
In questa lezione abbiamo studiato la proprietà box shadow dei CSS, nelle prossime lezioni svilupperemo altri esempi.
In questa lezione parleremo della proprietà border radius nei CSS, cioè della proprietà che consente di arrotondare i bordi degli elementi.
Come con le altre proprietà è possibile dare lo stesso arrotondamento per tutti gli angoli oppure personalizzare ciascuno di loro.
Border radius CSS esempi
Ecco dunque un semplice esempio di utilizzo della proprietà border radius applicata ad alcuni tag div.
Anche qui ho inserito il codice css come foglio di stile interno per semplicità.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Esempi d'uso di border CSS</title>
<style>
.arrotonda_20 {width:200px; margin:20px auto;border-style: dotted; border-color: #00ff00;border-radius: 20px;}
.arrotonda_50 {width:200px; margin:20px auto; border-style: solid; border-color: rgb(0,0,255);padding:15px; border-radius: 50px;}
.arrotonda_10 {width:200px; margin:20px auto; border-style: solid; border-color: rgba(0,0,255,0.5);padding:15px;border-radius: 10px;}
.misto {width:200px; margin:20px auto; border-style: solid; border-color: #00ff00 #0000ff;padding:15px; border-radius: 20px 5px;}
.misto2 {width:200px; margin:20px auto; border: 5px solid #00ff00;padding:15px;border-radius: 20px 10px 5px 1px;}
.misto3 {width:200px; margin:20px auto; border-style: solid; border-color: #00ff00;padding:15px;border-radius: 20px 20px 5px 5px}
</style>
</head>
<body>
<h1>Esempi CSS border</h1>
<div class="arrotonda_20">Bordo tratteggiato arrotondato di 20px</div>
<div class="arrotonda_50">Bordo solido arrotondato di 50px a cui ho aggiunto un padding di 15px</div>
<div class="arrotonda_10">Bordo solido arrotondato di 10px</div>
<div class="misto">Bordo solido con arrotondamenti personalizzati</div>
<div class="misto2">Bordo solido con arrotondamenti personalizzati</div>
<div class="misto3">Bordo solido con arrotondamenti personalizzati</div>
</body>
</html>
Come potete notare oltre a border-radius ho assegnato altre proprietà a ciascun livello, in particolare ad alcuni livelli ho assegnato il padding in modo da creare spazio tra il contenuto ed il bordo dell’elemento.
Inoltre ad alcuni elementi ho assegnato degli arrotondamenti diversi in modo da produrre effetti differenti.
Si può assegnare chiaramente tanto altro come un’altezza ed una larghezza, un colore di sfondo, un’immagine di sfondo. Insomma si possono personalizzare in base alle proprie esigenze grafiche.
Ecco dunque l’immagine che visualizza i livelli, utilizzando la proprietà border radius dei CSS.
In questi esempi ho espresso la misura in pixel, ma chiaramente si possono specificare altre unità di misura come ad esempio la più comune ormai em, rem o i meno diffusi pt, cm, ecc.
Inoltre, così come le altre che abbiamo affrontato questa proprietà è una scorciatoia alle 4 proprietà border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius.
Importante! La proprietà border radius non si applica agli elementi della tabella quando border-collapse è impostata a collapse.
Questa era solo una semplice applicazione con l’utilizzo della proprietà border-radius, nelle prossime lezioni vedremo come applicare altre semplici proprietà.
Dunque i valori possibili per la proprietà border-color sono:
esadecimale, come ad esempio #00ff00, che corrisponde al verde;
coordinate rgb, come ad esempio rgb(0,255,0) che corrisponde al verde;
coordinate rgbaper la trasparenza. Infatti in questo modo si specifica, oltre al colore RGB, anche il livello del canale alpha per la trasparenza. Come ad esempio rgba(0,255,0, 0.5) dove 0.5 indica il livello di trasparenza. In questo caso avremo un verde con una trasparenza al 50%.
Ricordiamo che i valori ammessi per il canale alpha vanno da 0.0 a 1.0. Il livello 0.0 indica il colore completamente trasparente mentre 1.0 indica il colore più opaco.
nome, come ad esempio green, chiaramente questo metodo non consente di specificare le varie tonalità dei colori come i precedenti metodi.
valore hsl, si usa molto più raramente, indicato ad esempio in questo modo hsl(10%, 90%, 60%);
Border color CSS esempi
Vediamo adesso degli esempi pratici sulla proprietà border-color al fine di apprendere meglio quanto spiegato.
Quindi creiamo tante classi, una per ogni tipo di bordo e poi le associamo ai vari livelli creati appositamente nella pagine web.
Ecco quindi di seguito il codice CSS creato per vedere le singole proprietà su ciascun elemento.
<body>
<h1>Esempi CSS border</h1>
<div class="verde">
Bordo tratteggiato verde usando il valore esadecimale #00ff00
</div>
<div class="blu">
Bordo solido di colore blu usando rgb(0,0,255)
</div>
<div class="trasparente">
Bordo solido di colore blu usando rgba(0,0,255,0.5) con una trasparenza del 50%
</div>
<div class="misto">
Bordo con alcuni colori diversi
</div>
<div class="misto2">
Bordo con colori diversi
</div>
<div class="groove">
Bordo con groove
</div>
<div class="ridge">
Bordo con ridge
</div>
<div class="inset">
Bordo con inset
</div>
<div class="outset">
Bordo con outset
</div>
</body>
Nell’immagine sotto possiamo osservare le differenze tra i singoli effetti, ho inserito anche gli effetti groove, ridge, inset e outset, che avevamo già analizzato nella lezione precedente, per vedere l’effetto con i colori.
Border color CSS esempi
Sintassi compatta
È inoltre possibile utilizzare una sintassi compatta, che si vede molto frequentemente nei vari esempi sui CSS. Chiaramente tutti e 4 i bordi in questo caso hanno le stesse proprietà.
border: 5px solid #ff0000;
In questa lezione abbiamo studiato la proprietà border color e abbiamo visto anche come compattare tutto utilizzando solo border. Nella prossima lezione vedremo come utilizzare border-radius.
In questa lezione applicheremo la proprietà border style dei CSS ai vari elementi html e ne vedremo gli effetti attraverso degli esempi pratici.
Nella lezione precedente abbiamo già utilizzato la proprietà border width per impostare una larghezza uguale per tutti e 4 i bordi oppure personalizzata per ciascun bordo.
CSS border consente di specificare lo stile, il colore e la larghezza del bordo di un elemento attraverso le proprietà border-width,border-style e border-color.
Queste proprietà possono riguardare l’intero bordo oppure solo il bordo superiore, inferiore a destra o a sinistra.
CSS border proprietà
Vediamo le proprietà in dettaglio.
Border-width
border-width: questa proprietà specifica la larghezza dei 4 bordi, cioè il bordo superiore, inferiore a destra e a sinistra. La larghezza può essere impostata in pixel o con altre unità di misura come em, rem, ecc. Inoltre, più raramente, si possono indicare anche i valori predefiniti thin, medium, or thick, cioè sottile, medio o spesso.
Facciamo dunque degli esempi:
border-width: 5px;
Sta ad indicare che tutti e 4 i bordi sono larghi 5 pixel.
border-width: 5px 10px;
Quando si specificano 2 valori, il primo parametro stabilisce i bordi superiore ed inferiore, mentre il secondo stabilisce i bordi a destra e a sinistra. Quindi in questo caso il bordo superiore e inferiore sarà largo 5 pixel, invece a destra e a sinistra si avrà un bordo di 10 pixel.
border-width: 5px 4px 3px 2px;
Se i valori specificati sono 4, allora vuol dire che ciascun bordo è personalizzato (anche se ovviamente i valori possono anche essere uguali). Nel nostro caso si ha un bordo superiore di 5 pixel, un bordo a destra di 4 pixel, inferiore di 3 e a sinistra di 2. Il senso seguito è dunque quello orario, facile da ricordare.
CSS border – esempi
Facciamo degli esempi applicando un bordo ad un livello di una pagina web. Impostiamo anche la proprietà border-style in modo da rendere visibile il bordo.
<style>
.unico {
width:200px;
border-style: solid;
border-width: 10px;
}
.diverso {
margin-top:20px;
width:200px;
border-style: solid;
border-width: 20px 10px 5px 2px;
}
</style>
<div class="unico">Testo di prova</div>
<div class="diverso">Testo di prova</div>
Come potete vedere dall’immagine sopra, nel primo esempio i bordi sono uguali per tutti i lati mentre nel secondo esempio sono tutti diversi.
Nella prossima lezione affronteremo altre proprietà dei CSS border, al fine di conoscere altri metodi per personalizzare i bordi degli elementi.
