lunedì 28 Settembre 2020

Download in corso

Softwareone.it

07-01-2019

CSS Gestire Colori e Sfondi

Un testo può essere colorato come meglio ci piace, semplicemente utilizzando la proprietà color.

.colore {color: #036;}

Per la gestione degli sfondi utilizziamo la proprietà di base background che funziona come nell’esempio seguente:

.bg {background: #FFFF00;}

E’ importante dire che ogni sito deve avere sempre e comunque il colore di sfondo e del testo di default settato nel body, anche se intendiamo avere testo nero su sfondo bianco com’è normalmente di default, dato che un utente può avere una diversa impostazione del browser e visualizzare male le nostre pagine.

body {
           background: #FFFFFF; /* SFONDO BIANCO */
           color: #000000; /* TESTO NERO */
}

Approfitto per dire che in CSS i simboli /* */ rappresentano un commento, quindi il contenuto non verrà interpretato come codice. 

Da ricordare anche che ogni riga compresa all’interno delle parentesi graffe (ovvero il codice da attribuire ad un singolo elemento) termina con un punto e virgola che è obbligatorio utilizzare.

Vediamo adesso le principali proprietà legate allo sfondo di una pagina o di un elemento di una pagina Web

  • background-image – imposta un’immagine di sfondo;
  • background-repeat – gestisce la ripetizione dell’immagine di sfondo sulla pagina;
  • background-position – imposta la posizione dell’immagine di sfondo.

Esempio

.GRASSETTO { font-weight: bold; }

e/o la si può associare “anche” ad un altro elemento:

body {
          background: #FFFFFF;
          background-image: url(immagine.gif);
          color: #000000;
}

Il comando url specifica il nome ed il percorso dell’immagine da utilizzare come sfondo. 

Possiamo adesso gestire la ripetizione dell’immagine sulla pagina; omettendo l’apposito comando l’immagine si ripeterà per quanto spazio avrà a disposizione: si ipotizzi un’immagine di sfondo di 50×50 pixel che si ripete su un’area della pagina di 700 pixel. 

Abbiamo a disposizione i seguenti valori predefiniti per la proprietà

background-repeat

  • repeat-x – ripete l’immagine solo in orizzontale;
  • repeat-y – ripete l’immagine solo in verticale;
  • no-repeat – non ripete mai l’immagine
body {
            background: #FFFFFF;
            background-image: url(immagine.gif);
           background-repeat: no-repeat;
          color: #000000;
}

Background sfumato in css3

La sintassi standard è la seguente:

background-image: -webkit-linear-gradient(top right, #FFFFFF 0%, #DF15AA 50%, #AACFEF 100%);

Dal momento che sui browser i gradienti sono supportati a livello sperimentale, tutti usano per l’implementazione i prefissi proprietari. Inoltre, browser come Safari e Chrome (fino alla versione 10.0) usano una sintassi diversa. Ecco per completezza il codice usato negli esempi:

/* IE10 */
background-image: -ms-linear-gradient(top right, #036 0%, #DF15AA 50%, #AACFEF 100%);
 
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top right, #036 0%, #DF15AA 50%, #AACFEF 100%);
 
/* Opera */
background-image: -o-linear-gradient(top right, #036 0%, #DF15AA 50%, #AACFEF 100%);
 
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, #036), color-stop(0.5, #DF15AA), color-stop(1, #AACFEF));
 
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top right, #FFFFFF 0%, #DF15AA 50%, #AACFEF 100%);
 
/* Proposed W3C Markup */
background-image: linear-gradient(top right, #FFFFFF 0%, #DF15AA 50%, #AACFEF 100%);

Generare codici per sfondi in CSS

CSS3 Gradient Generator

Concludiamo con la gestione della posizione dell’immagine di sfondo; la proprietà background-position accetta la distanza dall’alto e dal margine sinistro della pagina. 

Esempio

body {
            background: #FFFFFF;
            background-image: url(immagine.gif);
            background-repeat: no-repeat;
           background-position: 10px 10px;
          color: #000000;
}

WebKit Un’alternativa A Javascript

I commenti sono chiusi.

Pubblicità