01 of 04
It kreëarjen fan Cross-Browser Lineêre ôfstannen mei CSS3
Lineêre ôfstannen
De meast foarkommende soarte fan gradens dy't jo sjogge, is in lineêre gradens fan twa kleuren. Dit betsjut dat de gradens yn in rjochte line ferpleatse sil feroarsake fan 'e earste kleur nei' t twadde yn 'e line. De ôfbylding op dizze side lit in ienfâldige lofterkant fan # 999 (donkere griis) nei #fff (wyt) sjen.
Lineêre graden binne de maklikste om te definiearjen, en hawwe de meast draachflak yn browsers. CSS3-lineêre ôfstannen wurde stipe yn Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, en Safari 4+. Internet Explorer kin it gradients taheakje troch in filter en stipet se werom nei IE 5.5. Dit is net CSS3, mar it is in opsje foar cross-browser compatibiliteit.
As jo in gradient bepale, moatte jo ferskate dingen bepale:
- Wat soarte gradient is it linear of radial
- Wêr de ôfstân moat begjinne
- Wêr't it gradient stopje moat
- Hokker kleuren binne yn 'e steiger en wêr't se begjinne moatte en stopje
Om in lineêre gradienten te brûken mei CSS3 kinne jo skriuwe:
linear-gradient ( winkel of side of hoeke , kleurstop , kleurstop )
- Eerst definiearje it type fan gradens mei de namme linear -gradient.
- Dan definiearje jo de start en stoppunten fan it gradient op ien fan twa manieren: de winkel fan de line yn graden fan 0 oant 359, mei 0 graden nei rjochting. Of mei 'funksje' side of hoeke ', lykas lofts, rjochts, boaiem, en top. Dizze sille yn 'e folgjende side mear detaillearre wurde. As jo dizze útlitte, sil de gradens fan 'e top nei de boaiem fan it elemint flokje.
- Dan definiearje jo de kleuren fan kleuren. Jo definiearje de kleuren opnij mei de kleurskoade en in opsjonele persintaazje. It persintaazje fertelt de blêder wêr't op 'e rigel begjint of einiget mei dy kleur. De standert is om de kleuren gleichend oan 'e rigel te pleatsen. Jo sille mear witte oer kleuren op side 3.
Dus, om de boppeste gradient mei CSS3 te bepalen, skriuw jo:
linear-gradient (lofts, # 999999 0%, #ffffff 100%);
En om it as eftergrûn fan in DIV te setten jo skriuwe:
div {
background-image: linear-gradient (lofts, # 999999 0%, #ffffff 100%;
}
Browser Extensions foar CSS3 Linear Gradients
Om jo gradens te krijen om cross-browser te wurkjen, moatte jo blêderferbrûkers brûke foar de measte browsers en in filter foar Internet Explorer 9 en leger (eigentlik 2 filters). Allegear nammentlik deselde eleminten om jo gradens te bepalen (útsein dat jo allinich 2-kleurige gradients yn IE definiearje kinne).
Microsoft Filters en Extension - Internet Explorer is de meast útdaging om te stypjen, om't jo trije ferskillende rigels nedich hawwe om de ferskate browserferzjes te stypjen. Om de boppeste griis nei wyt gradens te krijen, soene jo skriuwe:
/ * 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 (lofts, # 999999 0%, #ffffff 100%);
Mozilla-útwreiding -De -moz-útwreiding wurket lykas de CSS3-eigenskip, krekt mei de -moz- útwreiding. Om de boppesteande ôfstân foar Firefox te krijen, kinne jo skriuwe:
-moz-linear-gradient (lofts, # 999999 0%, #ffffff 100%);
Opera Extension -The -o-tafoeging befettet kâns op Opera 11.1+. Om de boppeste gradens te krijen, skriuwe:
-o-linear-gradient (lofts, # 999999 0%, #ffffff 100%);
Webkit tafoeging -The -webkit- tafoeging wurket safolle as de CSS3-eigenskip. Om de boppeste gradens foar Safari 5.1+ of Chrome 10+ te bepalen, kinne jo skriuwe:
-webkit-linear-gradient (lofts, # 999999 0%, #ffffff 100%);
Der is ek in âldere ferzje fan de Webkit-útwreiding dy't wurket mei Chrome 2+ en Safari 4+. Dêryn beskiede jo it soarte fan gradens as wearde, ynstee fan yn de eigendom. Om de griis nei wyt gradens mei dizze útwreiding te krijen, skriuwe:
-webkit-gradient (linear, lofts boppe, rjochts boppe, kleurstop (0%, # 999999), kleurstop (100%, # ffffff));
Full CSS3 Linear Gradient CSS Code
Foar folsleine cross-browser support om de griis nei wyt gradens boppe te krijen moatte jo earst in folsleine kleur foar browsers tafoegje dy't gjin graden stypje, en de lêste item moat de CSS3-styl wêze foar browsers dy't folslein konform binne. Dus, skriuw jo:
eftergrûn: # 999999;
eftergrûn: -moz-linear-gradient (lofts, # 999999 0%, #ffffff 100%);
eftergrûn: -webkit-gradient (linear, lofts boppe, rjochts boppe, kleurstop (0%, # 999999), kleurstop (100%, # ffffff));
eftergrûn: -webkit-linear-gradient (lofts, # 999999 0%, #ffffff 100%);
eftergrûn: -o-linear-gradient (lofts, # 999999 0%, #ffffff 100%);
eftergrûn: -ms-linear-gradient (lofts, # 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);
eftergrûn: linear-gradient (lofts, # 999999 0%, #ffffff 100%);
De folgjende siden yn dit tutorial ferklearje de dielen fan in gradient yn mear detail, en de lêste side wiist jo oan in tool dat in goede manier is om CSS3-graden automatysk te meitsjen.
Sjoch dit lineêre gradens yn aksje mei allinne CSS.
02 of 04
De diagonaal herders meitsje - de hoek fan 'e gradens
De begjin- en stopspunten bepale de winkel fan 'e gradens. De measte lineêre graden binne fan boppe nei ûnderen of nei links. Mar it is mooglik om in gradient op te bouwen dy't bewegt op in diagonaal line. It byld op dizze side lit in ienfâldige ôfstân sjen dy't yn in 45 graden hoeke oer it byld fan rjochts nei links ferpleatse.
Wapen om de gradige line te bepalen
De hoeke is in line op in imaginêre sirkel yn it sintrum fan it elemint. 0deg pointed up, 90deg pointing to the right, 180deg point points down, and 270deg points to the left. Jo kinne in winkel definieare fan 0 oant 359 graden.
Jo moatte oanpasse dat yn in fjouwerkante, in 45-graden hoekje fan 'e boppe-lofte hoek nei de ûnderkant rûn, mar yn in rjochthoeke binne de begjin- en einpuntpunten in bytsje bûten de foarm, lykas jo sjogge yn it byld.
De meast foarkommende manier om in diagonaal gradient te definiearjen is om in hoekje te beskellen, lykas top rjochts en de gradens sille fan dy hoeke nei de tsjinoerstelde hoek wei ferpleatse. Jo kinne de starte post mei de folgjende kaaiwurden definiearje:
- top
- rjochts
- boaiem
- links
- sintrum
En se kinne kombineare wurde om spesifike te wurden, lykas:
- rjochts boppe
- loftsboppe
- topkant
- rjochtsûnder
- lofts ûnder
- bottom center
- rjochts sintrum
- loftsintrum
Hjir is it CSS foar in gradient dy't likernôch is as ien beskôgje, read nei wyt fanút de boppeste rjochte hoek nei de ûnderkant links:
eftergrûn: ## 901A1C;
background-image: -moz-linear-gradient (boppe top, # 901A1C 0%, # FFFFFF 100%);
eftergrûn -ôfbylding: -webkit-gradient (linear, rjochts boppe, lofterôf, kleurstop (0, # 901A1C), kleurstop (1, #FFFFFF));
eftergrûn: -webkit-linear-gradient (rjochts boppe, # 901A1C 0%, #ffffff 100%);
eftergrûn: -o-linear-gradient (rjochts boppe, # 901A1C 0%, #ffffff 100%);
eftergrûn: -ms-linear-gradient (rjochts boppe, # 901A1C 0%, #ffffff 100%);
eftergrûn: linear-gradient (rjochts boppe, # 901A1C 0%, #ffffff 100%);
Jo kinne faaks besjen dat dit IE-filter yn dit foarbyld binne. Dat is om't IE allinich twa types filters jout: top nei ûnderen (de standert) en lofts nei rjochts (mei de gradienttype = 1-skeakel).
Sjoch dit diagonale lineêre gradens yn aksje mei allinne CSS.
03 of 04
Kleuren stopje
Mei CSS3-lineêre graden kinne jo mear kleuren oan jo gradens taheakje om sels foarkar efkes te meitsjen. Om dizze kleuren te foegjen foegje jo ekstra kleuren oan oan it ein fan jo eigendom, skieden troch komma's. Jo moatte opnimme wêr't op 'e rigel de kleuren ek begjinne of ein wêze moatte.
Internet Explorer filters stipe allinich twa kleuren op, dus as jo dit gradient bouwe, moatte jo allinich de earste en twadde kleuren sjen dy't jo wolle sjen litte.
Hjir is de CSS foar de boppeste kleurferiening:
eftergrûn: #ffffff;
eftergrûn: -moz-linear-gradient (lofts, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
Eftergrûn: -webkit-gradient (linear, lofts boppe, rjochte boppe, kleurstop (0%, # ffffff), kleurstop (51%, # 901A1C), kleurstop (100%, # ffffff));
eftergrûn: -webkit-linear-gradient (lofts, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
eftergrûn: -o-linear-gradient (lofts, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
eftergrûn: -ms-linear-gradient (lofts, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
eftergrûn: linear-gradient (lofts, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Sjoch dit lineêre gradens mei trije kleuren yn aksje mei allinne CSS.
04 of 04
Meitsjen fan boustylgroeiers makliker
Der binne twa plakken dy't ik oanbefellje om jo te helpen oan struktuer oan te bouwen, se hawwe elk foardielen en neidielen oan har, ik haw gjin gradientenbouwer fûn dat alles noch makket.
Ultimate CSS Gradient Generator
Dizze gradient generator is populêr, om't hy op in ferlykbere manier mei gradientbuorkers yn programma's lykas Photoshop útfiert. Ik haw it ek graach om't jo jo alle CSS-útwreiding joegen, net allinne Webkit en Mozilla. It probleem mei dizze generator is dat it allinnich horizontale en fertikale gradientsen stipet. As jo diagonale ôfwikselingen dwaan wolle, moatte jo gean nei de oare generator dy't ik oanbean.
CSS3 Gradient Generator
Dizze generator naam my in bytsje langer te begripen as de earste, mar it stipet it stypjen fan de rjochting nei in diagonaal.
As jo fan in oare CSS Gradient Generator witte dat jo graach better binne dan kinne jo ús witte .