Guide per aspiranti programmatori

Abbiamo detto che il linguaggio CSS vanta numerose proprietà. Una delle più utilizzate, è sicuramente la proprietà generica “background”, che, come suggerisce il nome, è relativa agli sfondi degli elementi della tua pagina web.
Ora, questa proprietà generica si declina in più modalità, vale a dire che possiamo occuparci dello sfondo di un elemento in diversi modi.

Andiamo, dunque, ad analizzare le proprietà di background.

• background-color:  il valore di questa proprietà va assegnato esattamente in una qualsiasi delle modalità di valore del colore viste nella guida precedente.
• background-image:  serve ad impostare un’immagine di sfondo al tuo elemento; accetterà come valore la scritta “url” seguita dal link all’immagine o dal percorso dell’immagine nel tuo computer. È best-practice utilizzare un path interno al tuo pc e non un link ad un sito internet, poiché quella risorsa potrebbe non essere permanente su quel link.esempio

.elemento1 {
   background-image: url(https://aulab.it/storage/831/conversions/I-migliori-shortcuts-per-sviluppatori-web-cover.jpg)
}

• background-repeat: questa proprietà ti permetterà di ripetere o meno l’immagine di sfondo del tuo elemento; il valore andrà assegnato con una keyword a scelta tra ‘repeat x’ (per ripeterla orizzontalmente), ‘repeat y’ (per ripeterla verticalmente) e ‘no repeat’ (per non ripeterla affatto).
• background-position: determina la posizione del tuo sfondo nell’elemento; accetta come valori le keywords ‘bottom’, ‘left’, ‘right’ e ‘top’ oppure una dimensione in pixel partendo da in alto a sinistra. 

nb. inserendo due soli valori ci riferiremo all’asse x e all’asse y

esempio

.elemento1 {
   background-position: 50px 50px;
}

• background-size: le keywords accettate come valori sono ‘auto’ (che fa rimanere l’immagine esattamente così com è), ‘contain’ (che ingrandisce l’immagine il più possibile senza stretcharla o tagliarla) e ‘cover’ (che da l’immagine a tutta pagina)
• background-attachment: questa proprietà regola il comportamento dell’immagine rispetto allo scroll della pagina; i valori accettati, sempre espressi in keywords, sono ‘scroll’ (valore di default grazie a cui l’immagine resta nella sua posizione, quindi non sarà più visibile quando scrollerai la pagina) e ‘fixed’(grazie a cui otteniamo il cosiddetto “effetto parallasse”: l’immagine rimane fissa e non sparisce allo scrollare della pagina)

Il linear gradient

La proprietà background può accettare anche un ulteriore valore. Stiamo parlando del linear-gradient.
Il grande vantaggio del web rispetto alla carta stampata, è che ha un’ottima resa delle sfumature di colore, che in molti casi se dosate e utilizzate nella giusta misura e modalità, possono rendere molto più accattivante i nostri siti web.
Ma come funziona il linear-gradient?

header {
   background: linear-gradient(angolo espresso in deg, colore1, colore2);
}

Nell’ esempio soprastante abbiamo utilizzato il linear-gradient come valore della proprietà background.
Come puoi vedere, immediatamente adiacenti ad esso abbiamo inserito alcune istruzioni, vale a dire l’angolo della sfumatura, espresso ovviamente in gradi (quindi, ad esempio, 120deg), il colore da cui dovrà partire la sfumatura e il colore dove dovrà arrivare, separati da una virgola.
Questa è la sintassi per utilizzare il linear gradient.
I colori inseriti come valori del linear-gradient possono essere espressi in tutte le modalità che abbiamo visto quando abbiamo parlato della proprietà inerente al colore.
Ma non è tutto! Il linguaggio CSS ci permette, infatti, letteralmente di sbizzarrirci ed esprimere il nostro estro creativo come più vogliamo.
Possiamo aggiungere alle nostre sfumature anche delle trasparenze.

Per aggiungere la trasparenza al nostro linear-gradient, si utilizza la funzione rgba() per definire gli arresti di colore. L’ultimo parametro della funzione rgba() può essere un valore da 0 a 1 e definisce la trasparenza del colore: come già detto, 0 indica la piena trasparenza, 1 indica il colore pieno.

L’esempio seguente mostra un gradiente che è totalmente trasparente all’inizio e vira al colore nero pieno: 

header {
background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)), url(https://aulab.it/storage/828/conversions/inserire-css-in-html-cover.jpg);
}

Questo escamotage può essere particolarmente utile quando vuoi applicare una sottospecie di overlay all’immagine del tuo header, magari per rendere più leggibili gli elementi testuali al suo interno. Come puoi notare, infatti, il linear-gradient, qui, è stato applicato alla proprietà ‘background-image’ e a lui è seguito l’url dell’immagine da utilizzare.

nb. I colori della nostra sfumatura non devono essere necessariamente due. Potresti, volendo, creare persino una sfumatura arcobaleno: il solo limite, quando sperimenti queste possibilità, è il buon senso!