01 ti 04
Ṣiṣẹda Awọn ọlọjẹ Alakoso Cross-Browser pẹlu CSS3
Awọn onigbọwọ Iwọn
Ọna ti o wọpọ julọ ti aladun ni iwọ yoo ri jẹ mimu-laini wiwa ti awọn awọ meji. Eyi tumọ si pe alamẹsẹ yoo gbe ni ila ila kan ti o yipada ni kiakia lati awọ akọkọ si ẹgbẹ keji pẹlu ila naa. Aworan ti o wa ni oju-iwe yii fihan wiwa osi-si-ọtun ti # 999 (awọ dudu) si #fff (funfun).
Awọn alamọ laini jẹ rọrun julọ lati ṣafihan, ati ni atilẹyin julọ ni awọn aṣàwákiri. Curs3 gradient linear ti wa ni atilẹyin ni Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, ati Safari 4+. Internet Explorer le fi awọn alabọṣe kun pẹlu lilo àlẹmọ ati atilẹyin wọn pada si IE 5.5. Eyi kii ṣe CSS3, ṣugbọn o jẹ aṣayan fun ibamu agbelebu-kiri.
Nigbati o ba ṣọkasi asiko kan o nilo lati ṣafihan ọpọlọpọ awọn ohun oriṣiriṣi:
- Iru iru gradient ti o jẹ- Igbẹhin tabi radial
- Nibo ni aladun naa yẹ ki o bẹrẹ
- Nibo ni aladun naa yẹ ki o da
- Awọn awọ ni o wa ni aladun ati ibi ti wọn yẹ ki o bẹrẹ ati da
Lati ṣe apejuwe awọn alabọgbẹ laini nipa lilo CSS3, iwọ kọwe:
mimu-kọn-jigọ ( igun tabi ẹgbẹ tabi igun , ideri awọ , ipari awọ )
- Ni akọkọ iwọ o tumọ iru iru aladun pẹlu orukọ- laini orukọ.
- Lẹhinna, o tumọ si ibẹrẹ ati awọn idi ipari ti mimu ni ọkan ninu awọn ọna meji: igun ti ila ni iwọn lati 0 si 359, pẹlu iwọn 0 ntokasi ni gígùn. Tabi pẹlu iṣẹ "ẹgbẹ tabi igun", bi osi, ọtun, isalẹ, ati oke. Awọn wọnyi ni yoo salaye ni awọn alaye diẹ si oju-iwe ti o tẹle. Ti o ba fi awọn wọnyi silẹ, aladun naa yoo ṣàn lati oke lọ si isalẹ ti awọn ero.
- Lẹhinna o tumọ si awọn awọ duro. O setumo pe awọ duro pẹlu koodu awọ ati ipin ogorun aṣayan kan. Iwọn naa sọ fun aṣàwákiri ibi ti lori ila lati bẹrẹ tabi pari pẹlu awọ naa. Awọn aiyipada ni lati gbe awọn awọ boṣeyẹ pẹlú ila. Iwọ yoo ni imọ siwaju sii nipa awọn iduro awọ ni oju-iwe 3.
Nitorina, lati ṣafihan ọmọ-iwe ti o loke pẹlu CSS3, iwọ kọwe:
mimu-gbẹsẹ (osi, # 999999 0%, #ffffff 100%);
Ati lati ṣeto o bi isale ti a DIV o kọ:
pin [
lẹhin-aworan: alakoso-gradient (osi, # 999999 0%, #ffffff 100%;
}
Awọn amugbooro Burausa fun Awọn Olutọ Lita CSS3
Lati gba aladun rẹ lati ṣiṣẹ agbelebu-kiri, o nilo lati lo awọn amugbooro lilọ kiri fun ọpọlọpọ awọn aṣàwákiri ati àlẹmọ fun Internet Explorer 9 ati isalẹ (gangan 2 awọn ayẹwo). Gbogbo awọn wọnyi lo awọn eroja kanna lati ṣe itọkasi rirọsi rẹ (ayafi pe o le ṣokasi awọn alabọsi-2 ni IE nikan).
Ajọjade ati Ifaagun Microsoft -Internet Explorer jẹ eyiti o nira julọ lati ṣe atilẹyin, nitori pe o nilo awọn ila oriṣiriṣi mẹta lati ṣe atilẹyin awọn ẹya ẹrọ lilọ kiri oriṣiriṣi. Lati gba irun ti o loke si aladun funfun o yoo kọwe:
/ * IE 5.5-7 * /
àlẹmọ: 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 (osi, # 999999 0%, #ffffff 100%);
Mozilla Extension -The -moz-extension works like the CSS3 ini, pẹlu pẹlu -moz-itẹsiwaju. Lati gba gradient loke fun Firefox, kọwe:
-moz-linear-gradient (osi, # 999999 0%, #ffffff 100%);
Opera Extension -The - extension afikun awọn alabọsi si Opera 11.1+. Lati gba aladun loke, kọwe:
-o-linear-gradient (osi, # 999999 0%, #ffffff 100%);
Ṣiṣe-oju-iwe ayelujara Ṣiṣe afikun -The -webkit-itẹsiwaju n ṣiṣẹ pupọ bi ohun ini CSS3. Lati ṣokasi asẹ ti o wa loke fun Safari 5.1+ tabi Chrome 10+ o kọ:
-iṣẹ-ọna asopọ alaiwiawia (osi, # 999999 0%, #ffffff 100%);
O tun jẹ ẹya ti o ti dagba julọ ti itẹsiwaju Ayelujara ti o ṣiṣẹ pẹlu Chrome 2+ ati Safari 4+. Ninu rẹ o ṣe apejuwe iru aladun bi iye, dipo ni orukọ ohun-ini. Lati gba grẹy si aladun funfun pẹlu itẹsiwaju yii, kọwe:
-iṣẹ-alaiwiawia (Ikọwe, oke osi, oke apa ọtun, ipari-awọ (0%, # 999999), iduro-awọ (100%, # ffffff));
Kikun CSS3 Linear Gradient CSS Code
Fun atilẹyin kikun agbelebu-kiri lati gba grẹy si alamọde funfun ju o yẹ ki o kọlu awọ-awọ ti o ni apadabọ fun awọn aṣàwákiri ti ko ṣe atilẹyin awọn alabọbọ, ati ohun kan ti o gbẹhin yẹ ki o jẹ ara CSS3 fun awọn aṣàwákiri ti o ni kikun ifaramọ. Nitorina, iwọ kọwe:
lẹhin: # 999999;
lẹhin: -moz-linear-gradient (osi, # 999999 0%, #ffffff 100%);
lẹhin: -webkit-gradient (laini, oke osi, oke apa, awọ-idin (0%, # 999999), awọ-stop (100%, # ffffff));
lẹhin: -webkit-linear-gradient (osi, # 999999 0%, #ffffff 100%);
lẹhin: -o-linear-gradient (osi, # 999999 0%, #ffffff 100%);
lẹhin: -ms-linear-gradient (osi, # 999999 0%, #ffffff 100%);
àlẹmọ: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
lẹhin: alakoso-gradient (osi, # 999999 0%, #ffffff 100%);
Awọn oju-ewe ti o wa ni itọnisọna yii ṣe apejuwe awọn ẹya ti onitẹsẹ ni apejuwe sii, ati oju-iwe ti o gbẹhin o ṣafasi o si ọpa ti o jẹ ọna ti o dara julọ lati ṣẹda awọn ọlọjẹ CSS3 laifọwọyi.
Wo gradient yii ni igbese nipa lilo CSS nikan.
02 ti 04
Ṣiṣẹda Awọn onigbọwọ ijinlẹ-Ẹsẹ ti Olukọni
Awọn ibẹrẹ ati awọn idaduro ojuami pinnu awọn igun ti aladun. Ọpọlọpọ gradients laini jẹ lati oke de isalẹ tabi si osi si otun. Ṣugbọn o ṣee ṣe lati kọ eleyi ti o nrìn lori ila ila-aaya. Aworan ti o wa ni oju-iwe yii fihan fifẹ rọrun ti o gbe ni igun 45degree kọja aworan lati ọtun si apa osi.
Awọn Ipele lati Ṣeto Iwọn Irẹjẹ
Igun naa jẹ ila kan lori ila ti o wa ni aarin ti awọn ero. 0deg gbe soke, 90deg ojuami si ọtun, 180deg ojuami isalẹ, ati 270deg ojuami si apa osi. O le ṣokasi eyikeyi igun lati 0 si 359 iwọn.
O yẹ ki o akiyesi pe ni igun kan, iwọn igun mẹẹdogun 45 lo lati apa oke apa ọtun si isalẹ sọtun, ṣugbọn ni ọna onigun mẹta awọn ibẹrẹ ati awọn opin ojuami jẹ die-die ni ita si apẹrẹ, bi o ṣe le wo ninu aworan.
Ọna ti o wọpọ julọ lati ṣọkasi asiko ti o jẹ diagonal ni lati ṣafihan igun kan, gẹgẹbi oke oke ati awọn ọmọde yoo gbe lati igun yẹn si igun odi. O le ṣe alaye itọnisọna ti bẹrẹ pẹlu awọn koko-ọrọ wọnyi:
- oke
- ọtun
- isalẹ
- apa osi
- aarin
Ati pe wọn le ni idapo lati wa ni pato diẹ sii, bii:
- oke apa ọtun
- oke apa osi
- ile-iṣẹ oke
- isalẹ sọtun
- sisale isalẹ
- ile-iṣẹ isalẹ
- ọtun ile-iṣẹ
- ile-aarin osi
Eyi ni CSS fun iru aladun kan bi ẹni ti a fi aworan han, pupa si funfun ti nkọ lati oke ọtun si apa osi:
lẹhin: ## 901A1C;
lẹhin-aworan: -moz-linear-gradient (oke apa ọtun, # 901A1C 0%, # FFFFFF 100%);
Oju-aworan: -kitkitkit-gradient (alakoso, oke apa ọtun, apa osi, awọ-idaduro (0, # 901A1C), ipari-awọ (1, #FFFFFF));
abẹlẹ: -kititi-ọlọgbẹ-ọlọsẹ (oke ọtun, # 901A1C 0%, #ffffff 100%);
lẹhin: -o-linear-gradient (oke oke, # 901A1C 0%, #ffffff 100%);
lẹhin: -ms-linear-gradient (oke apa ọtun, # 901A1C 0%, #ffffff 100%);
lẹhin: alakoso-gradient (oke apa ọtun, # 901A1C 0%, #ffffff 100%);
O le ṣe akiyesi pe ko si awọn Ajọ IE ni apẹẹrẹ yii. Eyi jẹ nitori IE nikan n gba awọn orisi meji ti awọn awoṣe: oke si isalẹ (aiyipada) ati osi si apa ọtun (pẹlu iyipada GradientType = 1).
Wo eleyii ila-aarọ diagonal ni igbese nipa lilo CSS nikan.
03 ti 04
Iwọ Awọ
Pẹlu awọn alamọwe laini CSS3, o le fi awọn awọ ti o pọ si igbimọ rẹ lati ṣeda paapaa awọn ipa idaraya. Lati fi awọn awọ wọnyi kun, o fi awọn afikun awọ kun si opin ti ohun ini rẹ, ti a yàtọ nipasẹ awọn aami idẹsẹ. O yẹ ki o tẹ ibi ti o wa lori ila awọn awọ yẹ ki o bẹrẹ tabi mu dopin.
Awọn oluṣọ Ayelujara Intanẹẹti ṣe atilẹyin awọn iduro meji, nitorina nigbati o ba kọ eleyi yi, o yẹ ki o nikan ni awọn awọ akọkọ ati awọn awọ keji ti o fẹ lati han.
Eyi ni CSS fun fifẹ awọ-awọ mẹta ti o loke:
lẹhin: #ffffff;
lẹhin: -moz-linear-gradient (osi, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
lẹhin: -kitẹkitẹẹli (alakoso, oke osi, oke apa ọtun, awọ-duro (0%, # ffffff), ipari-awọ (51%, # 901A1C), ipari-awọ (100%, # ffffff));
lẹhin: -webkit-linear-gradient (osi, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
lẹhin: -o-linear-gradient (osi, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
lẹhin: -ms-linear-gradient (osi, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
lẹhin: alakoso-gradient (osi, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Wo gradient eleyi yi pẹlu awọn iduro mẹta ni igbese nipa lilo CSS nikan.
04 ti 04
Ṣe awọn ọlọjẹ ile jẹ rọọrun sii
Awọn aaye ayelujara meji wa ni mo ṣe iṣeduro fun iranlọwọ fun ọ lati kọ awọn alabọṣe, wọn ni anfani ati awọn atunṣe si wọn, Emi ko ti ri oluṣeto ọmọde kan ti o ṣe ohun gbogbo sibẹsibẹ.
Gbẹhin CSS Gradient Generator
Yi monomono gradient yi jẹ gidigidi gbajumo nitori pe o ṣe ni ọna kanna si awọn akọle ti o ni awọn ọmọde ni awọn eto bi Photoshop. Mo tun fẹran rẹ nitori pe o fun ọ ni gbogbo awọn amugbooro CSS, kii ṣe oju-iwe ayelujara ati Mozilla nikan. Iṣoro pẹlu iwọnyii yii ni pe o ṣe atilẹyin fun awọn alabọde ipari ati awọn alaiṣe gangan. Ti o ba fẹ ṣe awọn alabọgba ijẹrisi, o ni lati lọ si monomono miiran ti mo ṣe iṣeduro.
COS3 Gradient Generator
Yi monomono yi mu mi diẹ diẹ lati ni oye ju akọkọ ọkan, ṣugbọn o ni atilẹyin yiyipada awọn itọsọna si a diagonal.
Ti o ba mọ nipa miiran monomono CSS Gradient ti o fẹ dara ju awọn wọnyi, jọwọ jẹ ki a mọ .