Sfondi e bordi

Aggiungere immagini di sfondo, gradienti, angoli arrotondati...

Background-color

Definisce il colore di sfondo di qualsiasi elemento in CSS

Background-image

Mostra un'immagine come sfondo di un elemento:

Background-repeat

E' possibile controllare la ripetizione dell'immagine di sfondo con la proprietà background-repeat, che ha quattro possibili valori:

no-repeat
repeat-x
repeat-y
repeat

Background-size

Con background-size si può impostare la dimensione dell'immagine di sfondo, inserendo un valore (anche in percentuale) o le parole chiave cover (il browser allarga l'immagine finché copre completamente l'area del box, sacrificando parti dell'immagine se necessario) o contain (il browser fa in modo che l'immagine stia completamente dentro al box).

Background-position

Serve a posizionare l'immagine di sfondo, in un sistema di coordinate la cui origine (0,0) è sull'angolo in alto a sinistra. E' possibile usare delle parole chiave come le seguenti:

oppure delle lunghezze o percentuali:

Usando una sintassi con 4 valori è possibile posizionare l'immagine specificando la distanza dai bordi:

Gradienti

Gli esempi seguenti mostrano come creare uno sfondo sfumato:

Background-attachment

Specifica se lo sfondo deve muoversi insieme al contenuto:

scroll: scorre insieme alla pagina, ma rimane fisso se si fa scorrere il contenuto (ad esempio un testo)
fixed: rimane sempre nella stessa posizione
local: scorre insieme al contenuto

Bordi

Per impostare un bordo su tutti e quattro i lati del box:

Per avere solo un bordo superiore:

Per impostare le proprietà individualmente:

Per specificare lo stile del bordo:

Angoli arrotondati

Per arrotondare tutti gli angoli di un box:

Per un singolo angolo:

Esercizio: Pittori

Crea una pagina:

pittori.html

Collega la pagina a un foglio di stile:

styles.css

Crea una cartella images nella quale inserire le foto, assegnando nomi opportuni.

Crea 7 elementi div all'interno dei quali inserirai:

La foto di un pittore, di dimensioni 300 x 600 (usa Photoshop per fare il ritaglio)
Il nome del pittore in maiuscolo e grassetto
Luogo e anno di nascita e di morte
Alcune righe di descrizione

Fai in modo che ogni div abbia:

una larghezza di 800 pixel
un quadro famoso del pittore come sfondo
un bordo di un colore che stia bene col quadro (di solito è utile scegliere il colore tra quelli presenti nell'immagine), di spessore 5 pixel e con gli angoli arrotondati (raggio di curvatura a piacere)
il nome del pittore dello stesso colore del bordo
gli altri testi di colore nero
i luoghi e gli anni in grassetto e corsivo, creando uno stile apposito
un padding di 10 pixel
un margin di 15 pixel