01 van 04
Die skep van kruisblaaier lineêre gradiënte met CSS3
Lineêre gradiënte
Die mees algemene soort gradiënt wat u sal sien is 'n lineêre gradiënt van twee kleure. Dit beteken dat die gradiënt in 'n reguit lyn beweeg, wat geleidelik van die eerste kleur na die tweede langs die lyn verander. Die prent op hierdie bladsy toon 'n eenvoudige links-regs gradiënt van # 999 (donkergrys) na #fff (wit).
Lineêre gradiënte is die maklikste om te definieer, en die meeste ondersteuning in blaaiers. CSS3 lineêre gradiënte word ondersteun in Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ en Safari 4+. Internet Explorer kan gradiënte byvoeg met behulp van 'n filter en ondersteun hulle terug na IE 5.5. Dit is nie CSS3 nie, maar dit is 'n opsie vir kruisblaaier-verenigbaarheid.
Wanneer u 'n gradiënt definieer, moet u verskeie verskillende dinge definieer:
- Watter tipe gradiënt is dit-lineêr of radiaal
- Waar die gradiënt moet begin
- Waar die gradiënt moet stop
- Watter kleure is in die helling en waar hulle moet begin en stop
Om lineêre gradiënte te definieer met behulp van CSS3, skryf jy:
lineêre gradiënt ( hoek of kant of hoek , kleur stop , kleur stop )
- Eerstens definieer jy die tipe gradiënt met die naam lineêre gradiënt.
- Dan definieer jy die begin en stop punte van die gradiënt op een van twee maniere: die hoek van die lyn in grade van 0 tot 359, met 0 grade wat reguit wys. Of met die "kant of hoek" funksie, soos links, regs, onderkant en boonste. Hierdie sal in meer besonderhede op die volgende bladsy verduidelik word. As u hierdie uitlaat, sal die gradiënt van bo na onder van die element vloei.
- Dan definieer jy die kleur stop. U definieer die kleurstop met die kleurkode en 'n opsionele persentasie. Die persentasie vertel die blaaier waar op die lyn begin of eindig met daardie kleur. Die verstek is om die kleure eweredig langs die lyn te plaas. U sal meer leer oor kleurstoppies op bladsy 3.
Dus, om die bogenoemde gradiënt met CSS3 te definieer, skryf jy:
lineêre gradiënt (links, # 999999 0%, #ffffff 100%);
En om dit as agtergrond van 'n DIV te stel, skryf jy:
div {
agtergrond-beeld: lineêre gradiënt (links, # 999999 0%, #ffffff 100%;
}
Browser Uitbreidings vir CSS3 Lineêre Gradients
Om die kruisblaaier vir u verloop te kry, moet u webblaaieruitbreidings vir die meeste blaaiers en 'n filter vir Internet Explorer 9 en laer gebruik (eintlik 2 filters). Al hierdie elemente neem dieselfde elemente om u gradiënt te definieer (behalwe dat u slegs 2-kleur gradiënte in IE kan definieer).
Microsoft-filters en uitbreiding -Internet Explorer is die uitdaging om te ondersteun, want jy benodig drie verskillende lyne om die verskillende blaaier weergawes te ondersteun. Om die bogenoemde grys tot wit gradiënt te kry, sal jy skryf:
/ * 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-lineêre-gradiënt (links, # 999999 0%, #ffffff 100%);
Mozilla Extension- Die -moz-uitbreiding werk soos die CSS3-eiendom, net met die -moz-uitbreiding. Om die bogenoemde gradiënt vir Firefox te kry, skryf:
-moz-lineêre-gradiënt (links, # 999999 0%, #ffffff 100%);
Opera Extension -The -o- uitbreiding voeg gradiënte by tot Opera 11.1+. Om die bogenoemde gradiënt te kry, skryf:
-O-lineêre-gradiënt (links, # 999999 0%, #ffffff 100%);
Webkit Uitbreiding- Die -webkit-uitbreiding werk baie soos die CSS3-eiendom. Om die bogenoemde gradiënt vir Safari 5.1+ of Chrome 10+ te definieer, skryf jy:
-webkit-lineêre-gradiënt (links, # 999999 0%, #ffffff 100%);
Daar is ook 'n ouer weergawe van die Webkit-uitbreiding wat met Chrome 2+ en Safari 4+ werk. Daarin definieer jy die tipe gradiënt as 'n waarde, eerder as in die eiendomsnaam. Om die grys tot wit gradiënt met hierdie uitbreiding te kry, skryf:
-webkit-gradiënt (lineêr, links bo, regterkant bo, kleur stop (0%, # 999999), kleur stop (100%, # ffffff));
Volledige CSS3 Lineêre Gradient CSS Kode
Vir volledige kruisblaaierondersteuning om die grys tot wit gradiënt hierbo te kry, moet u eers 'n vaste terugslag vir blaaiers insluit wat nie gradiënte ondersteun nie, en die laaste item moet die CSS3-styl wees vir blaaiers wat ten volle voldoen. So skryf jy:
agtergrond: # 999999;
agtergrond: -moz-lineêre-gradiënt (links, # 999999 0%, #ffffff 100%);
agtergrond: -webkit-gradiënt (lineêr, links bo, regs bo, kleur stop (0%, # 999999), kleur stop (100%, # ffffff));
agtergrond: -webkit-lineêre-gradiënt (links, # 999999 0%, #ffffff 100%);
agtergrond: -O-lineêre-gradiënt (links, # 999999 0%, #ffffff 100%);
agtergrond: -ms-lineêre-gradiënt (links, # 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);
agtergrond: lineêre gradiënt (links, # 999999 0%, #ffffff 100%);
Die volgende bladsye in hierdie handleiding verduidelik die dele van 'n gradiënt in meer detail, en die laaste bladsy wys jou na 'n instrument wat 'n uitstekende manier is om CSS3 gradiënte outomaties te skep.
Sien hierdie lineêre gradiënt in aksie met net CSS.
02 van 04
Die skep van diagonale gradiënte-die hoek van die gradiënt
Die begin- en stoppunte bepaal die hoek van die gradiënt. Die meeste lineêre gradiënte is van bo na onder of van links na regs. Maar dit is moontlik om 'n helling wat op 'n diagonale lyn beweeg, te bou. Die prent op hierdie bladsy toon 'n eenvoudige gradiënt wat van regs na links in 'n 45 ° hoek oor die prent beweeg.
Hoeke om die verlooplyn te definieer
Die hoek is 'n lyn op 'n denkbeeldige sirkel in die middel van die element. 0deg punte op, 90deg punte na regs, 180deg punte af, en 270deg punte na links. U kan enige hoek van 0 tot 359 grade definieer.
U moet daarop let dat in 'n vierkant 'n hoek van 45 grade van die boonste linkerhoek na onder regs beweeg, maar in 'n reghoek is die begin- en eindpunte effens buite die vorm, soos u in die prentjie kan sien.
Die meer algemene manier om 'n diagonale gradiënt te definieer, is om 'n hoek te definieer, soos bo regs en die gradiënt sal van daardie hoek na die teenoorgestelde hoek beweeg. U kan die beginposisie met die volgende sleutelwoorde definieer:
- Top
- reg
- onderkant
- links
- sentrum
En hulle kan gekombineer word om meer spesifiek te wees, soos:
- regs bo
- Links bo
- top sentrum
- onder regs
- Links onder
- onderste sentrum
- regter sentrum
- linker sentrum
Hier is die CSS vir 'n gradiënt soortgelyk aan die een wat afgebeeld is, rooi na wit beweeg vanaf die boonste regterkantste hoek na onder:
agtergrond: # # 901A1C;
agtergrond-beeld: -moz-lineêre-gradiënt (regter bo, # 901A1C 0%, # FFFFFF 100%);
agtergrond-beeld: -webkit-gradiënt (lineêr, regter bo, links onder, kleur stop (0, # 901A1C), kleur stop (1, #FFFFFF));
agtergrond: -webkit-lineêre-gradiënt (regter bo, # 901A1C 0%, #ffffff 100%);
agtergrond: -O-lineêre-gradiënt (regter bo, # 901A1C 0%, #ffffff 100%);
agtergrond: -ms-lineêre-gradiënt (regter bo, # 901A1C 0%, #ffffff 100%);
agtergrond: lineêre gradiënt (regter bo, # 901A1C 0%, #ffffff 100%);
U het dalk opgemerk dat daar geen IE-filters in hierdie voorbeeld is nie. Dit is omdat IE slegs twee soorte filters toelaat: bo na onder (die verstek) en links na regs (met die GradientType = 1 skakelaar).
Sien hierdie diagonale lineêre gradiënt in aksie met net CSS.
03 van 04
Kleur stop
Met CSS3 lineêre gradiënte kan jy verskeie kleure by jou gradiënt voeg om selfs meer gevorderde effekte te skep. Om hierdie kleure by te voeg, voeg u bykomende kleure aan aan die einde van u eiendom, geskei deur kommas. Jy moet insluit waar ook die kleure moet begin of eindig.
Internet Explorer-filters ondersteun slegs twee kleurstopte, dus as jy hierdie gradiënt bou, moet jy eers die eerste en tweede kleure wat jy wil vertoon, insluit.
Hier is die CSS vir die bogenoemde 3-kleurgradiënt:
agtergrond: #ffffff;
agtergrond: -moz-lineêre-gradiënt (links, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
agtergrond: -webkit-gradiënt (lineêr, linker bo, regter bo, kleurstop (0%, # ffffff), kleurstop (51%, # 901A1C), kleurstop (100%, # ffffff));
agtergrond: -webkit-lineêre-gradiënt (links, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
agtergrond: -O-lineêre-gradiënt (links, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
agtergrond: -ms-lineêre-gradiënt (links, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
agtergrond: lineêre gradiënt (links, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Sien hierdie lineêre gradiënt met drie kleurstoppies in aksie met net CSS.
04 van 04
Maak bou gradiënte makliker
Daar is twee plekke wat ek aanbeveel om jou te help om gradiënte te bou, hulle het elk voordele en nadele. Ek het nie 'n verloopbouer gevind wat alles nog doen nie.
Ultieme CSS Gradient Generator
Hierdie gradiëntgenerator is baie gewild omdat dit op soortgelyke wyse aan gradientbouers in programme soos Photoshop optree. Ek hou ook daarvan, want dit gee jou al die CSS uitbreidings, nie net Webkit en Mozilla nie. Die probleem met hierdie kragopwekker is dat dit net horisontale en vertikale gradiënte ondersteun. As jy diagonale gradiënte wil doen, moet jy na die ander kragopwekker wat ek aanbeveel, gaan.
CSS3 Gradient Generator
Hierdie kragopwekker het my 'n bietjie langer geneem om te verstaan as die eerste een, maar dit ondersteun die rigting van 'n diagonaal.
As jy weet van 'n ander CSS Gradient Generator wat jy graag beter as hierdie, laat weet ons asseblief .