01 din 04
Crearea gradienților liniari Cross-Browser cu CSS3
Gradienți liniari
Cel mai obișnuit tip de gradient pe care îl veți vedea este un gradient liniar de două culori. Aceasta înseamnă că gradientul se va deplasa într-o linie dreaptă schimbând treptat de la prima culoare la cea de-a doua de-a lungul acelei linii. Imaginea de pe această pagină prezintă un simplu gradient de la stânga la dreapta de # 999 (gri închis) la #fff (alb).
Gradienții liniari sunt cei mai ușor de definit și au cel mai mult sprijin în browsere. Gradienții liniari CSS3 sunt acceptate în Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ și Safari 4+. Internet Explorer poate adăuga gradienți utilizând un filtru și le acceptă înapoi la IE 5.5. Acesta nu este CSS3, dar este o opțiune pentru compatibilitatea cu browserul încrucișat.
Când definiți un gradient trebuie să definiți mai multe lucruri diferite:
- Ce tip de gradient este - liniar sau radial
- În cazul în care gradient ar trebui să înceapă
- În cazul în care gradient ar trebui să se oprească
- Ce culori sunt în gradient și unde ar trebui să înceapă și să se oprească
Pentru a defini gradientele liniare folosind CSS3, scrieți:
gradient linear ( unghi sau lateral sau colț , stop de culoare , stop de culoare )
- Mai întâi definiți tipul de gradient cu numele gradient linear .
- Apoi, definiți punctele de pornire și oprire ale gradientului în unul din două moduri: unghiul liniei în grade de la 0 la 359, cu grade de 0 grade îndreptate direct în sus. Sau cu funcția "lateral sau colț", cum ar fi stânga, dreapta, fundul și partea superioară. Acestea vor fi explicate în detaliu în pagina următoare. Dacă le lăsați în afară, gradientul va curge de la partea de sus spre partea inferioară a elementului.
- Apoi definiți stopurile de culoare. Definiți stopurile de culoare cu codul de culoare și cu un procent opțional. Procentajul indică browserului unde să înceapă sau să se termine cu acea culoare. Implicit este plasarea uniformă a culorilor de-a lungul liniei. Veți afla mai multe despre opririle de culoare de la pagina 3.
Deci, pentru a defini gradientul de mai sus cu CSS3, scrieți:
gradient linear (stânga, # 999999 0%, #ffffff 100%);
Și pentru ao stabili ca fundal al unui DIV scrieți:
div {
fundal-imagine: gradient linear (stânga, # 999999 0%, #ffffff 100%;
}
Extensii de browser pentru gradienți liniari CSS3
Pentru a obține gradientul dvs. pentru a lucra cu un browser încrucișat, trebuie să utilizați extensiile de browser pentru majoritatea browserelor și un filtru pentru Internet Explorer 9 și mai mic (de fapt 2 filtre). Toate acestea iau aceleași elemente pentru a defini gradientul dvs. (cu excepția faptului că puteți defini numai gradienți cu 2 culori în IE).
Filtrele Microsoft și extensia -Internet Explorer sunt cele mai dificile pentru a fi suportate, deoarece aveți nevoie de trei linii diferite pentru a sprijini diferitele versiuni ale browserului. Pentru a obține gradientul alb de mai sus, scrieți:
/ * IE 5,5-7 * /
filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-linear-gradient (stânga, # 999999 0%, #ffffff 100%);
Mozilla Extension -The -moz- extension funcționează ca proprietatea CSS3, doar cu extensia -moz-. Pentru a obține gradientul de mai sus pentru Firefox, scrieți:
-moz-linear-gradient (stânga, # 999999 0%, #ffffff 100%);
Extensia Opera-Extensia -o adaugă gradienti la Opera 11.1+. Pentru a obține gradientul de mai sus, scrieți:
-o-gradient linear (stânga, # 999999 0%, #ffffff 100%);
Extensia Webkit - extensia web-extensie funcționează mult ca proprietatea CSS3. Pentru a defini gradientul de mai sus pentru Safari 5.1+ sau Chrome 10+ scrieți:
-webkit-linear-gradient (stânga, # 999999 0%, #ffffff 100%);
Există, de asemenea, o versiune mai veche a extensiei Webkit care funcționează cu Chrome 2+ și Safari 4+. În acesta definiți tipul gradientului ca valoare, mai degrabă decât în numele proprietății. Pentru a obține gradientul gri-alb cu această extensie, scrieți:
-webkit-gradient (liniar, stânga sus, dreapta sus, stop color (0%, # 999999), stop color (100%, # ffffff));
Cod CSS Gradient Linear complet CSS
Pentru asistență completă în browser încrucișat, pentru a obține gradientul alb-negru de mai sus, ar trebui să includeți mai întâi o culoare solidă pentru browserele care nu acceptă gradienți și ultimul element ar trebui să fie stilul CSS3 pentru browserele care sunt pe deplin compatibile. Deci, scrieți:
fundal: # 999999;
fundal: -moz-linear-gradient (stânga, # 999999 0%, #ffffff 100%);
fundal: -webkit-gradient (liniar, stânga sus, dreapta sus, stop color (0%, # 999999), oprire color (100%, # ffffff));
fundal: -webkit-linear-gradient (stânga, # 999999 0%, #ffffff 100%);
fundal: -o-linear-gradient (stânga, # 999999 0%, #ffffff 100%);
fundal: -ms-linear-gradient (stânga, # 999999 0%, #ffffff 100%);
filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
fundal: gradient linear (stânga, # 999999 0%, #ffffff 100%);
Următoarele pagini din acest tutorial explică mai detaliat părțile unui gradient, iar ultima pagină vă îndreaptă spre un instrument care este o modalitate excelentă de a crea în mod automat gradienți CSS3.
Vedeți acest gradient liniar în acțiune folosind doar CSS.
02 din 04
Crearea gradientilor diagonali - unghiul gradientului
Punctele de pornire și de oprire determină unghiul gradientului. Cele mai multe gradienți liniare sunt de sus în jos sau de la stânga la dreapta. Dar este posibil să se construiască un gradient care se deplasează pe o linie diagonală. Imaginea de pe această pagină prezintă un gradient simplu care se mișcă într-un unghi de 45 de grade pe imagine de la dreapta la stânga.
Unghiuri pentru a defini linia de gradient
Unghiul este o linie pe un cerc imaginar din centrul elementului. 0 puncte puncte, până la 90 de puncte spre dreapta, 180 de puncte în jos și 270 de puncte spre stânga. Puteți defini orice unghi de la 0 la 359 de grade.
Trebuie să rețineți că într-un pătrat, un unghi de 45 de grade se mișcă din colțul din stânga sus spre cel din dreapta jos, dar într-un dreptunghi punctele de început și de sfârșit sunt puțin în afara formei, după cum puteți vedea în imagine.
Cea mai obișnuită modalitate de a defini un gradient diagonal este definirea unui colț, cum ar fi partea dreaptă sus, iar gradientul se va deplasa din colțul respectiv în colțul opus. Puteți defini poziția inițială cu următoarele cuvinte cheie:
- top
- dreapta
- fund
- stânga
- centru
Și ele pot fi combinate pentru a fi mai specifice, cum ar fi:
- sus în dreapta
- stânga sus
- centrul de top
- dreapta-jos
- stânga jos
- centrul de jos
- centru drept
- stânga centru
Aici este CSS pentru un gradient similar cu cel prezentat, roșu spre alb care se mișcă din colțul din dreapta sus în stânga jos:
fundal: ## 901A1C;
fundal-imagine: -moz-linear-gradient (dreapta sus, # 901A1C 0%, # FFFFFF 100%);
fundal-imagine: -webkit-gradient (linia dreaptă, partea de jos din stânga, stopul de culoare (0, # 901A1C), opțiunea de oprire a culorii (1, #FFFFFF);
fundal: -webkit-gradient liniar (top sus, # 901A1C 0%, #ffffff 100%);
fundal: -o-gradient linear (top sus, # 901A1C 0%, #ffffff 100%);
fundal: -ms-linear-gradient (top sus, # 901A1C 0%, #ffffff 100%);
fundal: gradient liniar (top sus, # 901A1C 0%, #ffffff 100%);
S-ar putea să fi observat că în acest exemplu nu există filtre IE. Aceasta deoarece IE permite numai două tipuri de filtre: de sus în jos (implicit) și de la stânga la dreapta (cu comutatorul GradientType = 1).
Vedeți acest gradient liniar diagonal în acțiune folosind doar CSS.
03 din 04
Culoarea se oprește
Cu gradienți liniari CSS3, puteți adăuga mai multe culori gradientului dvs. pentru a crea efecte mai fanionare. Pentru a adăuga aceste culori, adăugați culori suplimentare la sfârșitul proprietății, separate prin virgule. Ar trebui să includeți și în cazul în care pe linie culorile ar trebui să înceapă sau să se încheie, de asemenea.
Filtrele Internet Explorer acceptă numai două opriri de culoare, deci atunci când construiți acest gradient, ar trebui să includeți numai prima și a doua culori pe care doriți să le afișați.
Aici este CSS pentru gradientul de 3 culori de mai sus:
fundal: #ffffff;
fundal: -moz-linear-gradient (stânga, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
fundal: -webkit-gradient (liniar, stânga sus, dreapta sus, stop color (0%, # ffffff), oprire color (51%, # 901A1C), oprire color (100%, # ffffff);
fundal: -webkit-gradient linear (stânga, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
fundal: -o-gradient linear (stânga, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
fundal: -ms-linear-gradient (stânga, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
fundal: gradient linear (stânga, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Vedeți acest gradient liniar cu trei opriri de culoare în acțiune folosind doar CSS.
04 din 04
Faceți clădirile mai ușoare
Există două site-uri pe care le recomand pentru a vă ajuta să construiți pante, fiecare are avantaje și dezavantaje pentru ele, nu am găsit un constructor de gradient care face totul încă.
Ultimate generator de gradienți CSS
Acest generator de gradienți este foarte popular deoarece efectuează într-o manieră similară cu constructorii de gradient în programe cum ar fi Photoshop. Îmi place de asemenea, deoarece vă oferă toate extensiile CSS, nu doar Webkit și Mozilla. Problema cu acest generator este aceea că susține doar gradienții orizontali și verticali. Dacă doriți să faceți diagrame diagonale, trebuie să mergeți la celălalt generator pe care îl recomand.
Generator de gradienți CSS3
Acest generator mi-a luat un pic mai mult să înțeleg decât primul, dar sprijină schimbarea direcției către o diagonală.
Dacă știți despre un alt generator de gradienți CSS că vă place mai bine decât acestea, vă rugăm să ne anunțați .