01 vun 04
Quer-Browser Linear Gradienten mat CSS3 kreéiere
Linearstinn
Déi allgemeng Zort Gradienten déi Dir sicht gesinn ass e linear Steifung vun zwee Faarwen. Dëst bedeit datt de Steigerungsgrad an enger gerichter Linn lues a lues vun der éischter Faarf op déi zweet entgéint komm ass. D'Bild op dëser Säit weist e einfacher lénks a riicht Gradient vun # 999 (dunkelgrau) bis #fff (wäiss).
Linearfäegkeeten sinn am einfachsten ze definéieren an hunn déi gréissten Ënnerstëtzung an Browseren. CSS3 Linearfäegkeeten ginn an Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ an Safari 4+ ënnerstëtzt. Internet Explorer kann u Gradienten benotzt mat engem Filter an ënnerstëtzt se op IE 5.5. Dëst ass net CSS3, awer et ass eng Optioun fir d'Cross-Browser Kompatibilitéit.
Wann Dir e Gradient bezeechent, musst Dir verschidde verschidde Saache definéieren:
- Wat fir en Gradient ass et linear oder radial
- Wou de Gradient soll starten
- Wou de Gradient soll ophalen
- Wat sinn d'Faarwen am Gradient an a wou se sollen ufänken a stoppen
Fir linear Gradienten mat CSS3 ze definéieren, schreift Dir:
Linear-Gradient ( Wénkel oder Säit oder Eck , Faarfstop , Faarfstop )
- Zuer Zäit definéiert Dir den Typ vu Steigerung mat dem Numm Linear- Gradient.
- Dann definéieren de Start an d'Punkte vum Gradient an enger vun zwee Weeër: de Wénkel vun der Linn an de Graden vun 0 bis 359, mat 0 Grad no riets. Oder mat der "Säit oder Ecke" -Funktion, wéi zum Beispill lénks, riets, ënnen an uewen. Dës ginn méi detailléiert op der nächster Säit erkläert. Wann Dir dës Auslaascht verlaangt, fällt de Gradient vun der Spëtzt op de Bound vum Element.
- Duerno definéiert Dir d'Faarf. Dir definéiert d'Faarfnësser mat der Faarfkonn an e fakultativ Prozent. De Prozentsaz erzielt de Browser, wou op der Linn fir dës Faarf ze beginnen oder ze fänken. De Standard gëtt et d'Faarwen gleichméi an der Linn. Dir wëllt méi iwwer d'Faarf bleiwen op Säit 3.
Also, fir den uewegen Gradient mat CSS3 ze definéieren, schreift Dir:
linear-gradient (lénks, # 999999 0%, #ffffff 100%);
A fir et als den Hintergrund vun engem DIV ze schreiwen, schreift Dir:
div {
Hannergrond-Bild: Linear-Gradient (lénks, # 999999 0%, #ffffff 100%;
}}
Browser Extensioune fir CSS3 Linearstabilitéiten
Fir Ären Gradient fir de Cross-Browser ze schaffen, brauch Dir Browser-Extensiounen fir déi meescht Browser an e Filter fir Internet Explorer 9 a méi niddereg (eigentlech 2 Filter) ze benotzen. All dës huelen déi selwecht Elementer fir Äert Gradient ze definéieren (ausser datt Dir nëmmen 2-farbstechste Steigerungen an IE definéiert).
Microsoft Filters an Extension - Internet Explorer ass déi Erausfuerderung fir ze ënnerstëtzen, well Dir dräi verschidde Linnen brauch fir déi verschidde Browser-Versionen ze ënnerstëtzen. Fir den uewe Grey a Wäissgrad ze kréien, da géift Dir schreiwen:
/ * IE 5.5-7 * /
Filter: 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 (lénks, # 999999 0%, #ffffff 100%);
Mozilla Extension De -mozialer Extensioun funktionnéiert wéi d'CSS3-Eigenschaft, just mat der -mozialer Extension. Fir den uewege Gradient fir Firefox ze kréien, schreift:
-moz-linear-Gradient (lénks, # 999999 0%, #ffffff 100%);
Opera Extension -The -o- Extensioun fiert d'Opschrëft un Opera 11.1+. Fir den uewegen Gradient ze kréien, schreift:
-o-linear-Gradient (lénks, # 999999 0%, #ffffff 100%);
Webkit Extension - D'Webkit- Extensioun funktionnell wéi d'CSS3 Eegeschafte. Fir dat uewe Gradient fir Safari 5.1+ oder Chrome 10+ ze definéieren, schreift Dir:
-webkit-linear-gradient (lénks, # 999999 0%, #ffffff 100%);
Et gëtt och eng al Versioun vun der Webkit Extension déi mat Chrome 2+ a Safari 4+ funktionnéiert. An Dir definéiert d'Art vu Gradient wéi e Wäert, an net an de Besëtz. Fir de groen a wäiss Gradient mat dëser Verlängerung ze schreiwen, schreift:
-webkit-gradient (linear, lénks up, rechts top, color stop (0%, # 999999), color stop (100%, # ffffff));
Ganz CSS3 Linear Gradient CSS Code
Fir ganz Cross-Browser-Supervisioun ze kréien fir de groen a wäisse Gradient iwwer d'Zilsetzung ze botzen, sollt Dir zënter e Fallblad solidarescht Blend fir Browser benotzen, déi keng Gradienten ënnerstëtzen, an de leschte Element soll de CSS3-Stil fir Browser sinn, déi voll kompatibel sinn. Also, Dir schreift:
Hannergrond: # 999999;
Hannergrond: -moz-linear-gradient (lénks, # 999999 0%, #ffffff 100%);
Hannergrond: -webkit-gradient (linear, lénks up, rechts top, color stop (0%, # 999999), color stop (100%, # ffffff));
Hannergrond: -webkit-linear-gradient (lénks, # 999999 0%, #ffffff 100%);
Hannergrond: -o-linear-gradient (lénks, # 999999 0%, #ffffff 100%);
Hannergrond: -ms-linear-gradient (lénks, # 999999 0%, #ffffff 100%);
Filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
Hannergrond: linear-gradient (lénks, # 999999 0%, #ffffff 100%);
Déi nächste Säiten an dësem Tutorial erläoden d'Deeler vun engem Gradient méi detailléiert, an déi lescht Säit weist Iech op e Tool dat e exzellente Wee ass fir CSS3 Gradienten automatesch ze kreéieren.
Kuck dës linearste Steigerung an Handlung nëmme CSS.
02 vun 04
Schablounen Diagonal Gradienten - De Wénkel vum Gradient
Déi Start- a Stopppunkte bestëmmen de Wénkel vum Gradient. Déi meescht linear Gradiate si vu top bis ënnen oder lénks op riets. Mee et ass méiglech e Gradient ze bauen deen op enger diagonaler Linn geet. D'Bild op dëser Säit weist e einfachen Gradienten aus, deen an engem 45 ° Winkel duerch d'Bild vu riets op de lénken bewegt.
Anglen fir d'Gradient Linn ze definéieren
De Wénkel ass eng Linn op engem imaginären Krees am Zentrum vum Element. 0deg weist op, 90 Réck Punkten op de richtegen, iwwer 180 Réckpunkten a 270deg Punkte lénks. Dir kënnt e Wénkel vu 0 bis 359 Grad definéieren.
Dir sollt dorunner wëssen, datt an engem Quadrat een 45 Grad Winkel vun der lénkser lénkser Ecke riets ënnen rechts geréckelt, awer an engem Rechtepter sinn d'Start- an Endpunkte liicht dobaussen der Form, wéi Dir am Bild gesitt.
Déi méi allgemeng Wee fir eng Diagonalstäerkt ze definéieren ass eng Eckplaz, wéi zum Beispill rop an de Gradienten, aus der Adse bis zur gegentecht Eck. Dir kënnt de Startplang mat de folgende Schlësselwieder definéieren:
- erop
- riets
- ënnen
- lénks
- Zentrum
A si kënne kombinéiert ginn fir méi spezifësch ze sinn, wéi:
- rechts rechts
- der lénks Säit
- Spëtzt
- ënnen rechts
- ënnen lénks
- ënneschten Zentrum
- richtege Zentrum
- lénksen Zentrum
Hei ass de CSS fir e Gradient wéi dem engen, roude bis wäiss Beweegung vun der rechter rechter Eck bis ënnen lénks:
Hannergrond: ## 901A1C;
Hannergrond-image: -moz-linear-gradient (riets uewen, # 901A1C 0%, # FFFFFF 100%);
Background-Image: -webkit-Gradient (Linear, riets uewen, lénks ënnen, Faarfstop (0, # 901A1C), Faarfstop (1, #FFFFFF));
Hannergrond: -webkit-linear-gradient (riets uewen, # 901A1C 0%, #ffffff 100%);
Hannergrond: -o-linear-Gradient (riets uewen, # 901A1C 0%, #ffffff 100%);
Hannergrond: -Meet-linear-Gradient (riets uewen, # 901A1C 0%, #ffffff 100%);
Hannergrond: Linear-Gradient (riets uewen, # 901A1C 0%, #ffffff 100%);
Dir hutt gemierkt datt mer an dësem Beispill keng IE Filters sinn. Dat ass, wëll IE erlaabt nëmme zwee Typen vu Filter: bis op de ënneschte Fall (default) a lénks erof (mam GradientType = 1 Schalter).
Kuckt dës diagonal lineare Gradient an der Handlung nëmme CSS.
03 vun 04
Faarwe stoppt
Mat CSS3 linear Gradienten kënnt Dir méi Faar si fir Äre Gradient ze addéiere fir och e Fonkel Effekter z'ënnerstëtzen. Fir dës Faarwe addéieren, addéiere mer weider Faarwen bis zum Enn vun Ärer Immobilie, duerch Komma getrennt. Dir sollt ugebuede sinn, wou op der Linn déi Faarwe sollen ufänken oder ofzeschléissen.
Internet Explorer Filteren nëmmen ënnerstëtzen zwee Faarfstopen, also wann Dir dëse Gradienten opbaut, sollt Dir nëmmen déi éischt an déi zweet Faarwen déi Dir sicht.
Hei ass de CSS fir den uewegen 3-färtege Gradient:
Hannergrond: #ffffff;
Hannergrond: -moz-linear-gradient (lénks, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
Hannergrond: -webkit-Gradient (Linear, lénks Uewen, riets uewen, Faarfstop (0%, # ffffff), Faarfstop (51%, # 901A1C), Faarfstop (100%, # ffffff));
Hannergrond: -webkit-linear-gradient (lénks, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Hannergrond: -o-linear-Gradient (lénks, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Hannergrond: -ms-linear-gradient (lénks, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Filter: Progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
Hannergrond: Linear-Gradient (lénks, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Kuck dës linear Steigerung mat dräi Faarfstopen an Handlung nëmme CSS.
04 vun 04
Maacht Bauen Gradienten méi einfach
Et gi zwou Siten déi ech recommandéieren fir Iech ze hëllefe fir Gradienten ze bauen, si hunn all Virdeeler an Nofolger ze hunn, ech hunn kee Gradient Builder fonnt deen alles erlaabt.
Ultimate CSS Gradient Generator
Dëse Gradient generator ass ganz populär, well et eng ähnlech Manéier wéi Gradient Builder an Programmer wéi Photoshop ausféiert. Ech och gär, well et Iech all d'CSS Extensiounen, net nëmmen Webkit a Mozilla. De Problem mam Generator ass datt nëmmen horizontal a vertikal Gradienten ënnerstëtzen. Wann Dir Diagonalstudien maache wëlls, musst Dir de sougenannte Generator gëeegen.
CSS3 Gradient Generator
Dëse Generator huet mech e bësse méi lues ze verstoen wéi deen éischten, awer et ënnerstëtzt d'Gestioun vun der Richtung zu enger Diagonal.
Wann Dir en aneren CSS Gradient Generator kennt datt Dir besser wéi dës sidd, da soot eis weg.