04. 01. zenbakia
Cross-Browser lineal gradientsuak sortuz CSS3rekin
Gradiente linealak
Ikusiko duzun gradientearen ohikoena bi koloretako gradiente lineal bat da. Horrek esan nahi du gradientea lerro zuzenean mugituko dela pixkanaka bigarren lerroan bigarren lerroan. Orri honetako irudiak # 999 (gris iluna) eta #fff (zuriak) ezkerra-eskuineko gradientea erakusten du.
Gradiente linealak definitzeko errazena dira, eta nabigatzaileetan gehien onartzen dute. Gradiente linealen CSS3 onartzen dira Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, eta Safari 4+. Internet Explorer-ek gradienteak iragazki bat erabiliz gehitu eta IE 5.5-ra onartzen ditu. Hau ez da CSS3, baina gurutzagunetako bateragarritasunerako aukera da.
Kanal bat definitzen duzunean hainbat gauza zehaztu behar dituzu:
- Zein gradiente mota lineala edo erradiala da
- Gradientea hasteko
- Gradienteak gelditu behar duen lekuan
- Zer kolore daude gradientean eta non hasi eta gelditu beharko luketen
Gradiente linealak CSS3 erabiliz definitzeko, idatzi:
lineal-gradientea ( angelu edo alboko edo izkinan , koloreen geldialdia , koloreen geldialdia )
- Lehenik, gradiente mota zehazten du izen linearrarekin .
- Ondoren, gradientearen hasiera eta geldialdiak bi moduetan definitzen dituzu: lerroaren angelua 0 eta 359 gradutan, 0 gradu zuzenean seinalatuz. Edo "alboko edo izkinako" funtzioarekin, esaterako, ezkerreko, eskuineko, beheko eta goiko. Hauek hurrengo orrialdetan zehatzago azalduko dira. Kanporatzen badituzu, gradientea goitik eta beheraino iristen da.
- Ondoren, kolorea gelditu egiten da. Kolorea kolore-kodea eta aukerako ehunekoa batekin gelditzen da. Marjina kolore honekin hasten edo amaitzen den arakatzaileari kontatzen dio portzentajeak. Lehenetsia lerroan uniformeki koloreak jartzea da. Koloretako geldialdiei buruz gehiago jakingo duzu 3. orrialdean.
Beraz, goiko gradientea CSS3rekin definitzeko, idatzi:
lineal gradient (ezkerrean, # 999999 0%, #ffffff% 100);
Eta DIV baten atzeko planoan idazten duzunean:
div {
background-image: lineal-gradient (ezkerrean, # 999999 0%, #ffffff% 100;
}
Arakatzaileen luzapenak CSS3 graduazio linealetarako
Zure graduatzailea cross-browser lan egiteko lortzeko, arakatzaileen luzapenak erabili behar dituzu arakatzaile gehienentzat eta Internet Explorer 9rako iragazkiak eta behekoak (benetan 2 iragazkiak). Horiek guztiek gradientea zehazteko elementu berberak hartzen dituzte (IEren 2 koloretako gradienteak bakarrik definitu ahal izan ezik).
Microsoft-en iragazkiak eta luzapenak -Internet Explorer -ek onartzen du erronka handiena, hiru lerro desberdin behar baitituzte arakatzailearen bertsio ezberdinetarako. Goiko grisa gradiente zuriari idazteko idatzi beharko zenuke:
/ * IE 5.5-7 * /
iragazkia: 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 (ezkerrean, # 999999 0%, #ffffff% 100);
Mozilla Extension -The -moz- luzapena CSS3 jabetza bezala funtzionatzen du, besterik gabe -moz- luzapenarekin. Firefoxen goiko gradientea lortzeko, idatzi:
-moz-linear-gradient (ezkerrean, # 999999 0%, #ffffff% 100);
Opera luzapena -The -o- luzapenak 11.1+ Opera funtzionaltasuna gehitzen du. Goiko gradientea lortzeko, idatzi:
-o-lineal-gradient (ezkerrean, # 999999 0%, #ffffff% 100);
Webkit Extension -The -webkit- luzapena CSS3 propietatearen antzekoa da. Goiko gradientea definitzeko Safari 5.1 edo Chrome 10+ idazten baduzu:
-webkit-linear-gradient (ezkerrean, # 999999 0%, #ffffff% 100);
Chrome 2+ eta Safari 4+ zerbitzuekin Webkit luzapenaren bertsio zaharragoa ere badago. Bertan, gradientearen mota balioa bezala definitzen da, jabetza-izenean baino. Gradiente zuri grisa luzapen honekin lortzeko, idatzi:
-webkit-gradient (lineala, ezkerrekoa, eskuineko goialdean, kolore-geldialdia (% 0, # 999999), kolore-geldialdia (% 100, # ffffff));
Full CSS3 Gradiente Lineala CSS Kodea
Aurrerapen gurutzatua duen euskarri osoa lortzeko grisa gradiente zuriora iristeko lehenik, lehenik, gradienteak onartzen ez dituzten arakatzaileen kolorea izan behar du eta azken elementua CSS3 estiloa izan behar du guztiz betetzen diren nabigatzaileentzat. Beraz, idazten duzu:
atzeko planoa: # 999999;
atzeko planoa: -moz-linear-gradient (ezkerrean, # 999999 0%, #ffffff% 100);
atzeko planoa: -webkit-gradient (lineala, ezkerrekoa, eskuineko goialdean, kolore-geldialdia (% 0, # 999999), kolore-geldialdia (% 100, # ffffff));
atzeko planoa: -webkit-linear-gradient (ezkerrean, # 999999 0%, #ffffff% 100);
background: -o-linear-gradient (ezkerrean, # 999999 0%, #ffffff% 100);
atzeko planoa: -ms-linear-gradient (ezkerrean, # 999999 0%, #ffffff% 100);
iragazkia: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
atzeko planoa: graduazio lineala (ezkerrean, # 999999 0%, #ffffff% 100);
Tutorial honetan hurrengo orrialdeak xehetasun gehiago azaltzen dute gradiente baten zatiak, eta azkeneko orrialdean CSS3 gradienteak automatikoki sortzeko modu bikaina den tresna bihurtzen zaitu.
Ikusi gradiente lineal hau ekintzetan CSS erabiliz soilik.
02 de 04
Gradienteko diagonala sortuz-Gradientearen angelua
Irteera eta geltokiak gradientearen angelua zehazten dute. Gradiente lineal gehienak goitik behera edo ezkerretik eskuinera daude. Baina lerro diagonal batean mugitzen den gradiente bat eraiki daiteke. Orri honetako irudiak eskuineko eta ezkerreko irudiaren gaineko 45 gradutik angelu bat mugitzen duen gradiente sinple bat erakusten du.
Gradiente lerroa definitzeko angeluak
Angelua elementuaren erdiko irudizko zirkuluan lerroa da. 0deg puntu gora, 90deg puntu eskuinera, 180deg puntu behera eta 270deg puntu ezkerrera. Edozein angelutik 0 eta 359 gradu artean definitu ditzakezu.
Kontutan izan behar duzu plazan 45 graduko angelua goiko ezkerreko izkinatik beheko eskuinera mugitzen dela, baina laukizuzen batean hasierako eta amaierako puntuak forma apur bat dira, irudian ikus dezakezun bezala.
Gradienteko diagonal bat definitzeko modu arruntak izkina bat definitzea da, goiko eskuinera eta gradientea izkin horretatik kontrakoa aldatuko da. Hasierako mezua honako gako hauekin zehaztu dezakezu:
- goiko
- eskuineko
- behean
- ezker
- zentro
Eta konbinatu ahal izango dira zehatzagoak izateko, esate baterako:
- goiko eskuinera
- goian ezkerrean
- goi zentroa
- behean eskuinera
- behean ezkerrean
- beheko erdigunea
- eskuineko erdigunea
- ezkerreko zentroa
Hemen dago CSS irudian agertzen den antzeko gradientea, gorria zuria ezkerretik eskuinera izatetik eskuinera mugituz.
atzeko planoa: ## 901A1C;
background-image: -moz-linear-gradient (eskuinean, # 901A1C 0%, # FFFFFF% 100);
background-image: -webkit-gradient (lineala, eskuineko goialdean, ezkerreko behekoa, kolore-stop (0, # 901A1C), kolore-stop (1, #FFFFFF));
atzeko planoa: -webkit-linear-gradient (eskuinean, # 901A1C 0%, #ffffff% 100);
atzeko planoa: -o-linear-gradient (eskuinean, # 901A1C% 0, #ffffff% 100);
atzeko planoa: -ms-linear-gradient (eskuinean, # 901A1C% 0, #ffffff% 100);
atzeko planoa: lineal-gradientea (eskuinean, # 901A1C% 0, #ffffff% 100);
Konturatuko zara ez dagoela IE iragazkirik ez dagoelako adibide honetan. Hori dela eta IEk bi motatako iragazkiak soilik onartzen ditu: goitik beherantz (lehenetsia) eta ezkerretik eskuinera (GradientType = 1 aldatzeko).
Ikusi gradient lineal diagonal hau ekintzetan CSS bidez soilik.
04/03
Kolorea gelditzen da
Gradiente linealen CSS3arekin, kolore bat baino gehiago gehitu ditzakezu zure gradienteari efektu zoragarriak sortzeko. Kolore hauek gehitzeko, kolore osagarriak gehitzen zaizkizu zure ondasunaren amaierara, komaz bereizita. Lerroan bertan sartu behar dituzu koloreak ondo hasi edo amaitzeko.
Internet Explorer iragazkiak bi kolorearen geldialdia onartzen du, beraz, gradiente hau eraiki nahi baduzu, erakutsi nahi duzun lehen eta bigarren koloreak bakarrik sartu beharko dituzu.
Hemen 3 graduko 3 koloretako CSSa da:
atzeko planoa: #ffffff;
atzeko planoa: -moz-linear-gradient (ezkerrean, #ffffff% 0, # 901A1C% 51, #ffffff% 100);
atzeko planoa: -webkit-gradient (lineala, ezkerrekoa, eskuineko goialdean, kolore-geldialdia (% 0, # ffffff), kolore-geldialdia (% 51, # 901A1C), kolore-geldialdia (% 100, # ffffff));
atzeko planoa: -webkit-linear-gradient (ezkerrean, #ffffff 0%, # 901A1C 51%, #ffffff% 100);
background: -o-linear-gradient (ezkerrean, #ffffff 0%, # 901A1C 51%, #ffffff% 100);
atzeko planoa: -ms-linear-gradient (ezkerrean, #ffffff% 0, # 901A1C 51%, #ffffff% 100);
iragazkia: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
atzeko planoa: graduazio lineala (ezkerrean, #ffffff% 0, # 901A1C% 51,% ffffff% 100);
Ikusi gradiente lineal hau hiru kolorearen geldialdiekin ekintza batean CSS erabiliz.
04 de 04
Egin eraikinaren gradientea errazagoa
Badira bi guneak gomendatzen dizut gradienteak eraiki nahi dituzunean, bakoitzak bere onurak eta desabantailak dituela, oraindik ez dut aurkitu oraindik gradienteen eraikitzailea.
Ultimate CSS Gradient Generator
Gradienteen sorgailua oso ezaguna da, Photoshop bezalako programetan degradatzaileen eraikitzaileak modu antzeko batean egiten duelako. Benetan gustatzen zait, CSS luzapenak guztiak ematen dituelako, ez bakarrik Webkit eta Mozilla. Sorgailu honen arazoa gradiente horizontal eta bertikalak bakarrik onartzen ditu. Gradiente diagonalak egin nahi badituzu, gomendatzen dizkiodan beste sorgailu batera joan behar duzu.
CSS3 Gradientearen sortzailea
Sorgailu honek pixka bat gehiago hartu zidan lehenengoa baino ulertzeko, baina diagonalaren noranzkoa aldatzen laguntzen du.
Besteak baino hobeak diren CSS Gradient Generator ezagutzen baduzu, jar zaitez gurekin harremanetan .