Share
Questo tutorial descriverà come creare sfondi complessi che, in passato, potevano essere raggiunti solo tagliando un disegno creato in Photoshop o un altro editor grafico. Vedremo come utilizzare le sfumature sfumate e come combinarle con sfondi di immagini multiple per creare effetti radicali. Siete pronti?
Questo è il primo in quella che sarà una serie di molti esempi. Ognuno utilizzerà i CSS3 per ottenere effetti visivi che tradizionalmente si basano sulla creazione di immagini in Photoshop prima di affettarli e portarli su un web design. Questo processo incrociato ha creato un divario tra programmatori e progettisti e affettare un progetto a volte può essere un compito molto difficile. Le limitazioni dei CSS hanno reso impossibile creare qualcosa di semplice come una sfumatura angolata o obliqua. Ma ora, grazie a CSS3, la nostra immaginazione è l'unico limite.
Oggi utilizzeremo la funzione di sfondi multipli di CSS3 per creare un paesaggio bello e tranquillo da un singolo div.
Nota: Tutti gli esempi sono stati testati su Mozilla Firefox, Safari e Chrome, se vuoi ottenere qualcosa di simile in IE o in qualsiasi altro browser lascia un commento e saremo lieti di aiutarti.
In passato c'era solo un modo per creare uno sfondo sfumato: usando Photoshop (o qualsiasi altro software di editing grafico). Seguiremmo questo processo, ad esempio, per uno sfondo a pagina intera: crea un livello di riempimento sfumato (o applica un effetto Sovrapposizione sfumatura a una finestra) e imposta almeno due colori di pittura come colori di interruzione. Quindi, usa lo strumento Ritaglia o affetta, ritaglia un'immagine di 1px e ripeti usando CSS a seconda del caso, orizzontalmente o verticalmente. Un processo abbastanza ragionevole, abbastanza veloce e quasi meccanico per i web designer esperti. Questo processo, tuttavia, ha un paio di limitazioni:
In Photoshop hai avuto qualcosa di simile. È possibile selezionare un colore di interruzione da un selettore di colori visivi o scrivere valori sia RGB che HEX. Questo è praticamente lo stesso di CSS3; puoi utilizzare i colori esadecimali o RGB per le sfumature. Nei prossimi consigli ti mostrerò come utilizzare i colori RGBA per aggiungere una percentuale di trasparenza (trasparenza).
Con CSS3, la creazione di uno sfondo lineare classico richiede un paio di righe di codice in più rispetto all'utilizzo di un'immagine di sfondo, ma ne vale la pena. Questa è la sintassi corretta per creare un gradiente con css:
LINEAR: -moz-linear-gradient ([
-webkit-gradiente (lineare,
Una cosa importante da sottolineare è che il gradiente è considerato una "immagine di sfondo". In questo esempio assegniamo una classe al corpo del nostro documento:
Il CSS quindi prende di mira quella classe:
/ * Sfondo lineare a tutta pagina * / body.linear height: 100%; / * Per aggiungere una sfumatura CSS3 a tutto il corpo della pagina è necessario impostare questa altezza su 100% * / background-repeat: no-repeat; background-image: -moz-linear-gradient (in alto, # 0096f5, # 00416a); background-image: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (# 0096f5), a (# 00416a), color-stop (1, # FFF)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # 0096f5, endColorstr = # 00416a); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # 0096f5, endColorstr = # 00416a)"; / * Per evitare di avere una striscia vuota nella parte inferiore, ci sono un paio di correzioni * / / * background-attachment: fixed; * / / * Funziona ok tranne su IE * / background-color: # 00416a; / * Lo sfondo apparirà piacevole se c'è lo scroll, aggiungendo il colore di fondo su tutta la pagina * /
Nel software grafico è possibile impostare diverse varianti di forme sfumate modificando il numero di colori, angoli e stile di stop (lineare / radiale).
Nei CSS3 possiamo ottenere gli stessi risultati.
LINEAR: -moz-linear-gradient ([
RADIAL: -moz-radial-gradient ([
-webkit-gradiente (
/ * Gradients * / .linear_gradient background-image: -moz-linear-gradient (in alto, # 6f828b, # 122938); background-image: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (# 6f828b), a (# 122938), color-stop (1, # FFF)); .angle_gradient background: -moz-linear-gradient (right top 260deg, # ffe930, # ed9700); background: -webkit-gradient (lineare, in alto a destra, in basso a sinistra, da (# ffe930), a (# ffa200)); .radial_gradient background: -moz-radial-gradient (50% 50%, cerchio nell'angolo più lontano, # ff0000, # a00000); background: -webkit-gradient (radiale, 50% 50%, 0, 50% 50%, 100, da (# ff0000), a (# a00000)); .stops_gradients background: -moz-linear-gradient (in alto, # 676767 0%, # 262626 50%, # 1D1D1D 50%, # 000000 100%); background: -webkit-gradient (lineare, sinistra in alto, in basso a sinistra, da (# 676767), color-stop (0.5, # 262626), color-stop (0.5, # 1D1D1D), a (# 000000));
Visualizza la demo
Ovviamente, non avremo sempre bisogno solo sfumature come sfondi, con immagini elaborate è ancora qualcosa su cui ci appoggiamo. CSS3 ci consente di aggiungere diverse immagini allo sfondo, quindi cambia anche le dimensioni e le posizioni.
Per un'immagine di sfondo multipla è necessario definire due attributi: "background" e "background-size". Il primo imposta tutte le immagini, gli URL, le sue posizioni e lo stile di ripetizione - il secondo imposta le rispettive dimensioni ("auto" per impostazione predefinita).
sfondo:
[
[
[
?
[colore]
;
background-size:
[
Accentsconagua