01dan 04gacha
CSS3 bilan Cross-Browser Linear Gradientlar yaratish
Lineer gradientlar
Ko'rib turganingizdek, eng keng tarqalgan gradient turi - ikki rangli chiziqli gradient. Bu degani, gradient to'g'ri chiziq bo'ylab harakatlanadi, bu chiziq bo'ylab birinchi rangdan ikkinchisiga asta-sekin o'zgarib boradi. Ushbu sahifadagi rasm #ffff (oq) ga # 999 (quyuq kulrang) dan oddiygina chapdan o'ngga bo'linadi.
Lineer gradientlar brauzerlarda eng ko'p aniqlangan va eng ko'p qo'llab-quvvatlashga ega. CSS3 linear gradyanlari Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ va Safari 4+ da ishlaydi. Internet Explorer filtri yordamida gradientlarni qo'shishingiz va ularni IE 5.5 ga qaytarishingiz mumkin. Bu CSS3 emas, lekin bu brauzerlarning o'zaro mosligi uchun imkoniyatdir.
Degradiyani aniqlaganingizda bir nechta narsalarni aniqlab olishingiz kerak bo'ladi:
- Qaysi turdagi gradient - lineer yoki radiusli
- Degradiyani boshlash kerak
- Degradiyani to'xtatish kerak
- Degradiada qanday ranglar mavjud va ular qayerda va to'xtash kerak
CSS3-dan foydalanib, chiziqli gradyanlarni aniqlash uchun quyidagilarni yozing:
lineer-gradient ( burchak yoki yon yoki burchak , rang to'xtashi , rangli to'xtash )
- Birinchidan, gradientning nomi - lineer -gradient nomi bilan belgilanadi.
- Keyin, gradientni boshlash va to'xtatish nuqtalarini ikki yo'l bilan aniqlaysiz: chiziqning 0 dan 359 gacha burchagi, 0 gradusni to'g'ridan to'g'ri yuqoriga qaratib. Yoki chap, o'ng, pastki va yuqori kabi "yon yoki burchak" funksiyasi bilan. Buni keyingi sahifada batafsilroq tushuntirish mumkin. Agar siz bularni tashlab qo'ysangiz, gradyan elementdan pastga qarab oqadi.
- Keyin rang to'xtaydi. Rang kodi va ixtiyoriy foiz bilan rangni aniqlaydi. Bu raqam brauzerda ushbu yo'nalishdagi boshlanadigan yoki tugagan joyni bildiradi. Asl qiymati ranglarni to'g'ri chiziq bo'ylab joylashtirishdir. Rangli to'xtashlar haqida batafsil ma'lumotni 3-betda topishingiz mumkin.
Shunday qilib, yuqoridagi darajani CSS3 bilan aniqlash uchun quyidagilarni yozing:
lineer-gradient (chap, # 999999 0%, #ffffff 100%);
Va uni DIV ning fonida yozing:
div {
fon-rasm: lineer-gradyan (chapda, # 999999 0%, #ffffff 100%;
}
CSS3 Linear Gradient uchun brauzer kengaytmalari
O'zingizning gradientni o'zaro faoliyat brauzerda ishlashi uchun brauzer kengaytmalari va Internet Explorer 9 va undan past (aslida 2 filtr) uchun filtrni ishlatishingiz kerak. Bularning hammasi degradiyani belgilash uchun bir xil elementlarga ega (faqat IE-dagi 2-rangli gradyanlarni aniqlash mumkin).
Microsoft filtrlari va kengaytmasi - Internet Explorer qo'llab-quvvatlovchi eng qiyin masala, chunki siz turli xil brauzer versiyalarini qo'llab-quvvatlash uchun uchta turli satr kerak. Yuqoridagi kulrang oq gradientni olish uchun quyidagilarni yozishingiz mumkin:
/ * IE 5.5-7 * /
filtri: prodid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-filtr: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-linear-gradient (chap, # 999999 0%, #ffffff 100%);
Mozilla Extension -The -moz- kengaytmasi, -moz-kengaytmasi bilan, CSS3 xususiyatiga o'xshab ishlaydi. Firefox uchun yuqoridagi darajani olish uchun quyidagilarni yozing:
-moz-lineer-gradient (chap, # 999999 0%, #ffffff 100%);
Opera Extension -The -o-kengaytmasi Opera 11.1+ ga ishora qiladi. Yuqoridagi darajani olish uchun quyidagilarni yozing:
-o-linear-gradient (chap, # 999999 0%, #ffffff 100%);
Webkit Extension -The -webkit-kengaytmasi CSS3 xususiyatiga juda o'xshash ishlaydi. Safari 5.1+ yoki Chrome 10+ uchun yuqoridagi darajani aniqlash uchun quyidagilarni yozing:
-webkit-linear-gradient (chap, # 999999 0%, #ffffff 100%);
Chrome 2+ va Safari 4+ bilan ishlaydigan Webkit kengaytmasining eski versiyasi ham mavjud. Unda siz funktsiya nomidan emas, balki qiymati sifatida gradient turini belgilashingiz mumkin. Ushbu kengaytma bilan oqni gradientga olish uchun quyidagilarni yozing:
-webkit-gradient (lineer, chap yuqori, o'ng yuqori, rang-stop (0%, # 999999), rang-stop (100%, # ffffff));
To'liq CSS3 Lineer Gradient CSS kodi
Yuqoridagi oq rangli gradientni olish uchun to'liq o'zaro faoliyat brauzerni qo'llab-quvvatlash uchun dastlab, gradientlarni qo'llab-quvvatlamaydigan brauzerlar uchun qayta tiklangan to'liq rangni va so'nggi element to'liq moslashtirilgan brauzerlar uchun CSS3 uslubi bo'lishi kerak. Shunday qilib, siz yozmoqdasiz:
fon: # 999999;
fon: -moz-lineer-gradient (chap, # 999999 0%, #ffffff 100%);
fon: -webkit-gradient (lineer, chap yuqori, o'ng yuqori, rang-stop (0%, # 999999), rang-stop (100%, # ffffff));
fon: -webkit-linear-gradient (chap, # 999999 0%, #ffffff 100%);
fon: -o-linear-gradient (chap, # 999999 0%, #ffffff 100%);
fon: -ms-linear-gradient (chap, # 999999 0%, #ffffff 100%);
filtri: prodid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filtr: proksid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
fon: lineer-gradient (chap, # 999999 0%, #ffffff 100%);
Ushbu darslikdagi keyingi sahifalarda gradient qismlarini batafsilroq tushuntiriladi va oxirgi sahifada siz CSS3 gradyentlarini avtomatik tarzda yaratishning eng zo'r usuli bo'lgan vositaga ishora qiladi.
CSS-ni ishlatib, bu satriy gradyanni ko'ring.
02/04
Grafinent burchagi - diagonali gradyanlar yaratish
Boshlanish va to'xtash nuqtalari gradyanning burchagini aniqlaydi. Eng linear gradyanlar yuqoridan pastga yoki chapdan o'ngga to'g'ri keladi. Biroq, diagonali chiziq bo'ylab harakatlanadigan bir gradiyent yaratish mumkin. Ushbu sahifadagi tasvir, tasvirning o'ngdan chapga 45degree burchak ostida harakat qiladigan oddiy gradientni ko'rsatadi.
Gradient chizig'ini belgilash uchun burchaklar
Burchak elementning markazida xayoliy doira chizig'i. 0deg yuqoriga, 90deg o'ngga, 180deg pastga, chapda 270deg ochko. 0 dan 359 daraja har qanday burchakni belgilashingiz mumkin.
Bir kvadrat ichida 45 graduslik burchak yuqoridan chap burchakdan pastki o'ngga, lekin to'rtburchakda bosh va tugash nuqtalari vahiydan ko'rib turganingizdek, shakli bir oz tashqarida.
Diagonal gradientni aniqlashning eng keng tarqalgan usuli - o'ng burchak kabi burchakni aniqlash va burchakni burchakdan boshqa burchakka ko'chiradi. Quyidagi kalit so'zlar bilan boshlang'ich postini belgilashingiz mumkin:
- yuqori
- o'ng
- pastki qismida joylashgan
- chapda
- markazi
Va ular yanada aniqroq bo'lishi uchun birlashtirilishi mumkin, masalan:
- yuqori o'ng
- yuqori chap
- yuqori markaz
- pastki o'ng
- chap pastda
- pastki markaz
- o'ng markaz
- chap markaz
Mana, yuqoridagi o'ng burchakdan pastga chapga qarab turgan qizil va oq tasvirlarga o'xshash gradient uchun CSS:
fon: ## 901A1C;
background-image: -moz-linear-gradient (o'ng yuqori, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (chiziqli, o'ng yuqori, chap pastki, rang-stop (0, # 901A1C), rang-stop (1, #FFFFFF));
fon: -webkit-linear-gradient (o'ng yuqori, # 901A1C 0%, #ffffff 100%);
fon: -o-linear-gradient (o'ng yuqori, # 901A1C 0%, #ffffff 100%);
fon: -ms-linear-gradient (o'ng yuqori, # 901A1C 0%, #ffffff 100%);
fon: lineer-gradient (o'ng yuqori, # 901A1C 0%, #ffffff 100%);
Siz ushbu misolda IE filtrlari yo'qligini payqadingiz. Buning sababi, IE faqat ikkita filtri turiga ruxsat beradi: yuqoridan pastga (standart) va chapdan o'ngga (GradientType = 1 kaliti bilan).
Bu CSS-dan foydalanib, bu diagonal chiziqli gradientni ko'ring.
03/04
Rang to'xtaydi
CSS3 chiziqli gradientlari yordamida, siz ham gradientga bir nechta ranglar qo'shishingiz mumkin, hatto qiziqarli effektlarni yaratishingiz mumkin. Ushbu ranglarni kiritish uchun siz mulkingizning oxiriga qo'shimcha ranglar qo'shasiz, keyin vergul bilan ajralib turasiz. Ranglarni qaerda boshlashi yoki tugashi kerakligini o'z ichiga olishi kerak.
Internet Explorer filtrlari faqat ikkita rang to'xtashini qo'llab-quvvatlaydi, shuning uchun siz ushbu gradyanni yaratishda faqat siz ko'rsatmoqchi bo'lgan birinchi va ikkinchi ranglarni kiritishingiz kerak.
Yuqoridagi 3 rangli gradient uchun CSS-bu erda:
fon: #ffffff;
fon: -moz-linear-gradient (chap, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
fon: -webkit-gradient (chiziqli, chap yuqori, o'ng yuqori, rang-stop (0%, # ffffff), rang-stop (51%, # 901A1C), rang-stop (100%, # ffffff));
fon: -webkit-linear-gradient (chap, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
fon: -o-linear-gradient (chap, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
fon: -ms-linear-gradient (chap, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
filtri: prodid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
fon: lineer-gradient (chap, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Faqatgina CSS-dan foydalanib, uchta rangli to'xtab turgan bu lineer gradientni ko'ring.
04/04
Qurilish gradyanlarini osonlashtiring
Degradiyani qurishda sizga yordam beradigan ikkita sayt bor, ularning har biri foydalari va kamchiliklari bor, men hali hammasini qiladigan bir darajadagi quruvchi topmadim.
Ultimate CSS Gradient Generator
Ushbu gradyanli generator juda mashhurdir, chunki Photoshop kabi dasturlarda gradient quruvchilarga o'xshash ishlarni amalga oshiradi. Bundan tashqari, Webkit va Mozilla emas, balki barcha CSS kengaytmalari sizga yoqadi. Bu generator bilan bog'liq muammo shundaki, u faqat gorizontal va vertikal gradyanlarni qo'llab-quvvatlaydi. Agar diagonal gradyanlar qilishni istasangiz, tavsiya qiladigan boshqa generatorga o'tishingiz kerak.
CSS3 Gradient Generator
Bu jeneratör men uchun bir oz ko'proq vaqtni tushundi, lekin bu diagonal yo'nalishni o'zgartiradi.
Agar boshqa CSS Gradient Generator-ni bilsangiz, bulardan yaxshiroq sizni xabardor qiling, iltimos , bizga xabar bering .