Usare il pannello di CSS Designer per applicare e modificare gradienti allo sfondo della vostra pagina web.

Utilizzando il pannello CSS Designer, è possibile applicare sfumature allo sfondo dei siti Web. La proprietà gradient è disponibile nella categoria Sfondo.

Proprietà gradient
Proprietà gradient

Fate clic sul simbolo accanto alla proprietà gradient per aprire il pannello gradients. Utilizzando questo pannello, potete:

  • Scegliere i colori da vari metodi colore (RGBa, Esadecimale o HSLa). Quindi, salvare combinazioni di colore diverse come campioni di colore.
    • Per reimpostare il nuovo colore sul colore originale, fate clic sul colore originale (K).
    • Per modificare l'ordine dei campioni, trascinateli nella posizione desiderata.
    • Per eliminare un campione di colore, trascinatelo fuori del pannello.
  • Utilizzare le interruzioni di colore per creare sfumature complesse. Fate clic in un punto qualsiasi tra le interruzioni di colore predefinite per creare un'interruzione di colore. Per eliminare un'interruzione di colore, trascinatela fuori del pannello.
  • Specificare l'angolo per una sfumatura lineare.
  • Per ripetere il modello, modificate la proprietà background-repeat.
  • Salvare sfumature personalizzate come campioni.

Analizziamo il codice seguente:

background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00) 46.63%,rgba(255,0,0,1.00) 100%)
  • 57deg: indica l'angolo della sfumatura lineare
  • rgba (255, 255, 255, 1.00): colore della prima interruzione di colore
  • 0%: indica l'interruzione di colore

Nota:

solo i valori '%' sono supportati in Dreamweaver per le interruzioni di colore. Se utilizzate altri valori, ad esempio px o em, Dreamweaver li legge come 'nil'. Inoltre, Dreamweaver non supporta i colori CSS e se specificate questi colori nel codice, vengono letti anch'essi come 'nil'.

Rendering delle sfumature nei browser Web

Quando usate le sfumature come sfondo, potete configurare Dreamweaver per rendere correttamente le sfumature su browser Web differenti. Dreamweaver aggiunge i prefissi fornitore appropriati al codice in modo da garantire una visualizzazione corretta delle sfumature nei diversi browser Web.

Dreamweaver è in grado di scrivere i prefissi fornitore seguenti insieme al formato w3c:

  • Webkit
  • Firefox
  • Opera

Per impostazione predefinita, Dreamweaver inserisce i prefissi fornitore per Webkit e per la vista Dal vivo di Dreamweaver. Potete scegliere gli altri fornitori richiesti dalla finestra di dialogo Preferenze (Preferenze > Stili CSS).

Nota:

per Ombra casella, i prefissi Webkit e w3c vengono generati sempre, indipendentemente dal fatto che siano stati selezionati nelle Preferenze o meno.

Tutte le modifiche apportate alle sfumature vengono riprodotte anche nelle sintassi specifiche dei fornitori. Se aprite in Dreamweaver CC un file esistente che contiene sintassi specifiche per un fornitore particolare, ricordatevi di scegliere i prefissi fornitore richiesti nelle Preferenze. Questo perché, per impostazione predefinita, Dreamweaver aggiorna solo il codice relativo a Webkit e alla vista Dal vivo di Dreamweaver quando utilizzate o modificate le sfumature. Di conseguenza, altre sintassi di fornitori specifici presenti nel codice non vengono aggiornate.

Scambiare immagini di sfondo e sfumature

Potete cambiare l'ordine (di visualizzazione nel codice) delle immagini di sfondo e delle sfumature con un singolo clic.

Fate clic sulla freccia accanto alla proprietà url o gradient in CSS Designer.

Nota:

Dreamweaver CC contiene un'implementazione di base della funzione di scambio dello sfondo. Se sono presenti più valori o immagini, lo scambio potrebbe non funzionare correttamente. Inoltre, supponete di avere un'immagine, una seconda immagine e quindi una sfumatura applicata allo sfondo. Lo scambio della sfumatura produce il seguente ordine: sfumatura, seconda immagine, prima immagine.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online