Share
Acest tutorial va schița modul de creare a unor fundaluri complexe care, în trecut, ar putea fi realizate numai prin tăierea unui design creat în Photoshop sau într-un alt editor grafic. Vom vedea cum să folosim nuanțe de gradient și cum să le combinăm cu mai multe fundaluri de imagine pentru a crea efecte radicale. Sunteți gata?
Acesta este primul din ceea ce va fi o serie de numeroase exemple. Fiecare dintre ele va folosi CSS3 pentru a obține efecte vizuale care se bazează, în mod tradițional, pe crearea de imagini în Photoshop înainte de a le decupa și de a porni la un design web. Acest proces încrucișat a creat un decalaj între programatori și designeri și împărțirea unui design poate fi uneori o sarcină foarte ciudată. Limitele CSS au făcut imposibilă crearea unui lucru la fel de simplu ca un gradient înclinat sau oblic. Dar acum, datorită CSS3, imaginația noastră este singura limită.
Astăzi vom folosi funcția de fundal multiplu de CSS3 pentru a crea un peisaj frumos, calm de la o singură div.
Notă: Toate exemplele au fost testate pe Mozilla Firefox, Safari și Chrome, dacă doriți să obțineți ceva similar în IE sau în orice alt browser, lăsați un comentariu și vă voi ajuta cu plăcere.
În trecut, a existat o singură cale de a crea un fundal gradient: folosind Photoshop (sau orice alt software de editare grafică). Vom urmări acest proces, de exemplu, pentru un fundal complet al paginii: Creați un strat de gradient de umplere (sau aplicați un efect de acoperire cu gradient într-o cutie) și setați cel puțin două vale de vopsea ca culori oprite. Apoi, folosind instrumentul Crop or Slice, tăiați o imagine cu lățimea de 1px și repetați-o folosind CSS în funcție de caz, orizontal sau vertical. Un proces destul de rezonabil, destul de rapid și aproape mecanic pentru designeri web experimentați. Acest proces, totuși, are câteva limitări:
În Photoshop aveai ceva de genul asta. Puteți selecta opțiunea Stop Color dintr-un selector vizual de culoare sau puteți scrie atât valorile RGB, cât și cele HEX. Acest lucru este aproape la fel ca CSS3; puteți utiliza culori Hex sau RGB pentru gradiente. În sfaturile viitoare vă voi arăta cum să utilizați culorile RGBA pentru a adăuga un procentaj Alpha (transparență).
Cu CSS3, crearea unui fundal liniar clasic are nevoie de încă câteva linii de cod decât o imagine de fundal, dar rezultatul merită. Aceasta este sintaxa potrivita pentru a crea un gradient cu css:
LINEAR: -moz-linear-gradient ([
-webkit gradient (liniar,
Un lucru important este să subliniem că gradientul este considerat o "imagine de fundal". În acest exemplu, atribuim o clasă corpului documentului nostru:
CSS urmărește apoi acea clasă:
/ * Pentru a adăuga un gradient CSS3 al întregii pagini, trebuie să setați această înălțime la 100% * / background-repeat: no-repeat; fundal-imagine: -moz-linear-gradient (top, # 0096f5, # 00416a); fundal-imagine: -webkit-gradient (liniar, 0% 0%, 0% 100%, de la (# 0096f5) la (# 00416a), stop color (1, # FFF)); filtru: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # 0096f5, endColorstr = # 00416a); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # 0096f5, endColorstr = # 00416a)"; / * Pentru a evita o bara mica in partea de jos, exista cateva fixe * / / * background-attachment: fix; * / / * Functioneaza ok, cu exceptia IE * / background-color: # 00416a; / * Fundalul va arăta frumos dacă există o parcurgere, adăugând culoarea de jos pe toată pagina * /
În software-ul grafic puteți seta mai multe variante de forme de gradient prin schimbarea numărului de culori, unghiuri și stil stop (liniar / radial).
În CSS3 putem obține aceleași rezultate.
LINEAR: -moz-linear-gradient ([
RADIAL: -moz-radial-gradient ([
-webkit gradient (
/ * Gradienți * / .linear_gradient fundal-imagine: -moz-linear-gradient (sus, # 6f828b, # 122938); fundal-imagine: -webkit-gradient (liniar, 0% 0%, 0% 100%, de la (# 6f828b), până la (# 122938), stop color (1, # FFF)); .angle_gradient background: -moz-linear-gradient (top top 260deg, # ffe930, # ed9700); fundal: -webkit-gradient (liniar, dreapta sus, partea stângă jos, de la (# ffe930), la (# ffa200)); .radial_gradient fundal: -moz-radial-gradient (50% 50%, cerc cel mai îndepărtat colț, # ff0000, # a00000); fundal: -webkit-gradient (radial, 50% 50%, 0, 50% 50%, 100, de la (# ff0000), la (# a00000)); .stops_gradients background: -moz-linear-gradient (top, # 676767 0%, # 262626 50%, # 1D1D1D 50%, # 000000 100%); fundal: -webkit-gradient (linia, stânga sus, fundul din stânga, de la (# 676767), stop color (0,5, # 262626), oprire color (0,5, # 1D1D1D), la (# 000000);
Vizualizați demonstrația
Evident, nu vom avea nevoie întotdeauna numai gradienti ca fundaluri, cu imagini elaborate este încă ceva pe care ne vom baza. CSS3 ne permite să adăugăm câteva imagini în fundal, apoi să modificăm dimensiunile și pozițiile etc..
Pentru o imagine de fundal multiplă, trebuie să definiți două atribute: "background" și "background-size". Prima dintre ele stabilește toate imaginile, urlurile, pozițiile și stilul repetat - al doilea stabilește dimensiunile respective ("auto" implicit).
fundal:
[
[
[
?
[culoare]
;
background-size:
[
Accentsconagua