01 - 04
CSS3-тай мөр хоорондын браузерын тэгшитгэлийг үүсгэх
Шугаман градиент
Хамгийн өргөн хэлбэрийн градиент нь хоёр өнгийн шугаман градиент юм. Энэ нь градиент нь эхний мөрөөс эхлэн дараачийн шугамаас аажмаар өөрчлөгдөх шулуун шугамд шилжинэ гэсэн үг юм. Энэ хуудасны зураг # 999 (хар саарал) зүүнээс баруун тийш градиентийг #fff (цагаан) болгож харуулав.
Шугаман градиент нь тодорхойлох хамгийн хялбар байдаг бөгөөд хөтчүүдэд хамгийн их дэмжлэг байдаг. CSS3 шугаман градиент нь Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, Safari 4+ дэмждэг. Internet Explorer нь шүүлтүүр ашиглан градентыг нэмж өгч, тэдгээрийг IE 5.5 рүү буцааж дэмждэг. Энэ бол CSS3 биш боловч энэ нь интернет хөтчийн нийцтэй байх сонголт юм.
Хэрэв та градиентийг тодорхойлбол хэд хэдэн зүйлийг тодорхойлох хэрэгтэй:
- Ямар төрлийн градиент нь шугаман эсвэл радиаль юм
- Энд градиент эхлэх ёстой
- Энд градиент зогсох ёстой
- Налуу нь ямар өнгөтэй, хаана эхлэх, зогсох ёстой вэ?
CSS3 ашиглан шугаман градентыг тодорхойлохын тулд дараахийг бичнэ үү:
шугаман-градиент ( өнцөг , булан , булан , өнгөт хаалт , өнгөний цэг )
- Эхлээд градиентийн төрөл нь шугаман хамаарлын нэрээр тодорхойлогдоно.
- Дараа нь градиент эхлэх ба зогсоох цэгийг хоёр аргаар тодорхойлж өгнө. Шугамын өнцөг нь 0-ээс 359 хүртэл градусын өнцгөөр шулуун чиглэлтэй 0 градусаар зааж өгнө. Эсвэл "тал буюу булан" функцээр, зүүн, баруун, доод, дээд гэх мэт. Эдгээрийг дараагийн хуудсанд илүү дэлгэрэнгүй тайлбарлах болно. Хэрэв та эдгээрийг орхивол градиент дээд хэсгээс элементийн ёроол руу урсдаг.
- Дараа нь та өнгө зогсолтыг тодорхойлно. Та өнгөний код болон нэмэлт хувь хэмжээгээр өнгө зогсолтыг тодорхойлно. Хувь нь тухайн шугамыг эхэлж, эсвэл төгсгөлтэйгээр төгсгөлд нь хөтлөнө. Анхдагч нь өнгө дагуу шугамыг жигд байрлуулах явдал юм. Та 3-р хуудас дээрх өнгө зогсоолын тухай илүү ихийг мэдэх болно.
CSS3 дээр дээрх градентыг тодорхойлохын тулд дараахийг бичнэ үү:
шугаман-градент (зүүн, # 999999 0%, #ffffff 100%);
Д DIV-ийн дэвсгэр дээр үүнийг тохируулахын тулд та бичнэ үү:
div {
background-image: шугаман-градент (зүүн, # 999999 0%, #ffffff 100%;
}
CSS3 шугаман градиентийг браузерийн өргөтгөлүүд
Интернет хөтөчтэй ажиллахын тулд градентаа авахын тулд ихэнх хөтөч өргөтгөлүүд болон Internet Explorer 9-ийн шүүлтүүр болон үнэндээ (үнэндээ 2 шүүлтүүр) зориулж хөтчийн өргөтгөлүүдийг ашиглах хэрэгтэй. Эдгээр нь бүгд градентыг тодорхойлоход ижил элементүүдийг агуулдаг. (IE дээрх 2 өнгө градиентийг тодорхойлох боломжгүй).
Microsoft Filters and Extension -Internet Explorer нь өөр өөр хөтөч хувилбаруудыг дэмжихийн тулд танд гурван өөр мөр хэрэгтэй тул интернет хөтөч. Дээрх саарал цагаан градиентийг авахын тулд та дараах бичих болно:
/ * IE 5.5-7 * /
шүүлтүүр: 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 * /
-с-шугаман-градент (зүүн, # 999999 0%, #ffffff 100%);
Mozilla Extension -The -moz-өргөтгөл нь CSS3 өмчтэй адил -moz-өргөтгөлтэй ажилладаг. Firefox дээрх дээрх градиентыг авахын тулд дараах тушаалыг бичээрэй:
-moz-шугаман-градент (зүүн, # 999999 0%, #ffffff 100%);
Opera Extension -The -o өргөтгөл Opera 11.1+ руу градентыг нэмдэг. Дээрх градиентыг авахын тулд бичнэ үү:
-иар-шугаман-градент (зүүн, # 999999 0%, #ffffff 100%);
Webkit Extension -The -webkit- extension нь CSS3 өмчтэй маш их ажилладаг. Дээрх градиентийг Safari 5.1+ эсвэл Chrome 10+-д зориулж тодорхойлохын тулд та бичнэ үү:
-webkit-linear-градент (зүүн, # 999999 0%, #ffffff 100%);
Мөн WebKit өргөтгөлийн хуучин хувилбар Chrome 2+ болон Safari 4+-тай ажилладаг. Үүнд та градиентийн төрлийг өмчийн нэр дээр бус харин утга болгон тодорхойлно. Энэ өргөтгөлтэй саарал цагаан градиент авахын тулд дараах зүйлийг бичнэ үү:
-webkit-градиент (шугаман, зүүн дээд, баруун дээд, өнгө-цэг (0%, # 999999), өнгө-цэг (100%, # ffffff));
Бүтэн CSS3 шугаман градент CSS код
Цагаан өнгийн градиентийг саарал болгохын тулд бүрэн хөндлөн браузерийн дэмжлэгтэй болгохын тулд та эхлээд градентыг дэмждэггүй browsers нь унах хатуу өнгийг агуулж байх ёстой бөгөөд хамгийн сүүлийн зүйл нь бүрэн дагаж мөрдөж буй хөтчүүдэд зориулсан CSS3 хэв маяг байх ёстой. Тиймээс та бичих:
дэвсгэр: # 999999;
background: -moz-linear-градент (зүүн, # 999999 0%, #ffffff 100%);
background: -webkit-градиент (шугаман, зүүн дээд, баруун дээд, өнгө-цэг (0%, # 999999), өнгө-цэг (100%, # ffffff));
background: -webkit-linear-gradient (зүүн, # 999999 0%, #ffffff 100%);
background: -o-linear-gradient (зүүн, # 999999 0%, #ffffff 100%);
суурь: -с-шугаман-градент (зүүн, # 999999 0%, #ffffff 100%);
шүүлтүүр: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
суурь: шугаман-градент (зүүн, # 999999 0%, #ffffff 100%);
Энэ гарын авлагын дараагийн хуудаснууд градиентын хэсгүүдийг дэлгэрэнгүй тайлбарлаж, сүүлчийн хуудас нь CSS3 градиентийг автоматаар үүсгэх хамгийн сайн арга юм.
Зөвхөн CSS-г ашиглан үйл ажиллагааны шугаман градиентыг үзнэ үү.
04 дүгээр сарын 02
Диагоналийн градиент-Gradient өнцөг үүсгэх
Эхлэл ба зогсолтын цэгүүд градиентийн өнцгийг тодорхойлно. Ихэнх шугаман градиент нь дээшээ юм уу, зүүнээс баруун тийш. Гэхдээ диагональ шугам дээр нүүх градент бий болгох боломжтой. Энэ хуудсан дээрх зургийг зүүнээс баруун тийш харагдах 45 градусын өнцөг рүү зөөвөрлөх энгийн градент харуулсан байна.
Gradient шугамыг тодорхойлох өнцөг
Энэ өнцөг нь элементийн төв дэх төсөөлөл тойргийн шугам юм. 0deg цэг, баруун тийш 90deg цэг, 180deg цэг, зүүн талд 270deg оноо. 0-ээс 359 градусын өнцгийг тодорхойлж болно.
Та квадрат дээр 45 градусын өнцгөөс зүүн дээд өнцөгөөс баруун тийш хөдөлж байгааг хараарай, гэхдээ тэгш өнцөгт дүрс дээр эхлэл болон төгсгөлийн цэгүүд нь дүрсээс бага зэрэг харагдаж байна.
Диагоналийн градиентийг тодорхойлох илүү нийтлэг арга бол баруун дээд өнцөг, градиент нь булангаас нөгөө өнцөг рүү шилжих буланг тодорхойлох явдал юм. Та доорх түлхүүр үгүүдтэй эхлүүлэх шийдлийг тодорхойлж болно:
- дээд
- баруун
- доод
- үлдсэн
- төв
Үүнийг илүү тодорхой болгохын тулд тэдгээрийг нэгтгэж болно. Үүнд:
- дээд талд
- дээд зүүн
- дээд төв
- баруун тийш
- зүүн доод
- доод төв
- баруун төв
- зүүн төв
Энд градиент нь CSS-тэй адил баруун дээд булангаас зүүн доодоос цагаан хүртэлх улаан өнгөтэй байна:
суурь мэдээлэл: ## 901A1C;
background-image: -moz-linear-градиент (баруун дээд, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-градиент (шугаман, баруун дээд, зүүн доод, өнгө-зогсолт (0, # 901A1C), өнгө-цэг (1, #FFFFFF));
background: -webkit-linear-gradient (баруун дээд, # 901A1C 0%, #ffffff 100%);
background: -o-linear-gradient (баруун дээд, # 901A1C 0%, #ffffff 100%);
суурь: -с-шугаман-градиент (баруун дээд, # 901A1C 0%, #ffffff 100%);
суурь: шугаман-градиент (баруун дээд, # 901A1C 0%, #ffffff 100%);
Энэ жишээнд IE шүүлтүүр байхгүй гэдгийг та анзаарсан байх. Яагаад гэвэл IE нь зөвхөн хоёр төрлийн шүүлтүүрийг зөвшөөрдөг: дээд рүү (анхдагч), зүүнээс баруун тийш (GradientType = 1 шилжүүлэгчтэй).
Энэ диагональ шугаман градиентийг зөвхөн CSS ашиглан ашиглана уу.
03 - 04
Өнгө нь зогссон
CSS3 шугаман градиент нь уян хатан нөлөөг бий болгохын тулд олон өнгийн өнгийг нэмж болно. Эдгээр өнгө нэмэхийн тулд нэмэлт өнгөийг таны эдний төгсгөлд таслалаар тусгаарлана. Та өнхрөх цэгийг хаана эхлэх, дуусгахыг оруулах ёстой.
Internet Explorer-ийн шүүлтүүрүүд нь зөвхөн хоёр өнгөт зогсолтыг дэмждэг тул та энэ градиентийг үүсгэхдээ зөвхөн эхний болон хоёрдахь өнгөийг харуулахыг хүсэх болно.
Дээрх 3 өнгөт градиент нь CSS байна:
background: #ffffff;
background: -moz-linear-gradient (зүүн, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
background: -webkit-градиент (шугаман, зүүн дээд, баруун дээд, өнгө-цэг (0%, # ffffff), өнгөний цэг (51%, # 901A1C), өнгө-цэг (100%, # ffffff));
background: -webkit-linear-gradient (зүүн, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
background: -o-linear-gradient (зүүн, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
background: -ms-linear-gradient (зүүн, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
шүүлтүүр: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
суурь: шугаман-градент (зүүн, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
Энэ шугаман градиентийг зөвхөн CSS дээр ашиглана.
04 - 04
Барилгын градиентийг хялбар болгох
Надад градиент бүтээхэд тусалдаг хоёр вэбсайт байдаг бөгөөд тэдгээр нь тус бүрт ашиг тус, дутагдалтай байдаг. Би бүх зүйлийг хийдэг градиент барилгачин олж чадаагүй.
Ultimate CSS Gradient Generator
Энэ градиентийн генератор нь маш их алдартай бөгөөд энэ нь Photoshop мэтийн программд градиент үүсгэгчтэй ижил төстэй байдаг. Энэ нь танд зөвхөн вэбсайт болон Mozilla-н бүх CSS өргөтгөлүүдийг өгдөг учраас надад таалагддаг. Энэ генераторын асуудал нь зөвхөн хэвтээ болон босоо градиентийг дэмждэг явдал юм. Хэрэв та диагоналийн градиент хийхийг хүсч байвал миний санал болгож буй бусад генератор руу явах хэрэгтэй.
CSS3 градиент үүсгэгч
Энэ генератор намайг эхнийхаас илүү ойлгоход хүргэсэн боловч диагнал руу чиглэлээ өөрчлөхийг дэмждэг.
Хэрэв та үүнээс илүү дуртай CSS CSS Gradient Generator-г мэддэг бол бидэнд мэдэгдээрэй .