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.
Fate clic sul simbolo 
accanto alla proprietà gradient per aprire il pannello gradients. Utilizzando questo pannello, potete:
- Scegliere i colori da vari modelli di colore (RGBa, Esadecimale o HSLa). Quindi, salva diverse combinazioni di colori come campioni.
- Per reimpostare il nuovo colore sul colore originale, fate clic sul colore originale (K).
- Per modificare l'ordine dei campioni, trascinate i campioni nella posizione desiderata.
- Per eliminare un campione di colore, trascina il campione fuori dal 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 arresta colore, trascina l'arresta colore fuori dal pannello.
- Specificare l'angolo per una sfumatura lineare.
- Per ripetere il motivo, modifica la proprietà background-repeat.
- Salvare gradienti personalizzati come campioni.
Studiamo 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 del gradiente lineare
- rgba (255, 255, 255, 1.00): colore della prima interruzione di colore
- 0%: indica l'interruzione di colore
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 dei gradienti 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 dei gradienti 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).
Per l'ombra Box, i prefissi Webkit e w3c vengono sempre generati indipendentemente dal fatto che li hai selezionati nelle Preferenze o meno.
Tutte le modifiche apportate alle sfumature vengono riprodotte anche nelle sintassi specifiche dei fornitori. Se apri un file esistente contenente sintassi specifiche del fornitore in Dreamweaver, assicurati di scegliere i prefissi del 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 gradienti
Potete cambiare l'ordine (di visualizzazione nel codice) delle immagini di sfondo e dei gradienti con un singolo clic.
Fai clic sulla freccia accanto alla proprietà URL o Sfumatura in CSS Designer.
Dreamweaver contiene un'implementazione di base della funzione di sostituzione 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.
Crea splendidi siti web con Dreamweaver
Progetta, codifica e gestisci siti web dinamici con un potente strumento completo.
