Rang gradientini qanday qilish kerak: foydali xizmatlar va CSS bilan ishlash

Gradientlarning turlari va foydalanish tamoyillari

Gradient - bu rang soyalari orasidagi silliq va muammosiz o'tish. Ushbu vizual effekt dizaynda faol qo'llaniladi - butun ob'ekt va uning alohida asosiy elementlari. Gradientlar quyidagi turlarda bo'ladi:

Chiziqli : ranglar bir xil chiziq bo'ylab joylashgan, ammo turli tomonlarda. Ushbu gradientlar to'rtburchaklar shakllar va maydonlarni to'ldirish uchun juda qulaydir.

Radial : rang yoki intensivlik doira chetidan markazga o'zgaradi. Ushbu gradient yumaloq shakllar uchun ko'proq mos keladi.

Gradient shaklida qanday rang o'tishini amalga oshirsangiz ham, siz uchta qoidaga amal qilishingiz kerak:

• Ikki tonnadan foydalaning (yoki ko'pi bilan uchta).
• Faqat tekis grafik elementlarni gradient bilan to'ldiring.
• Rasmga hajm qo'shish uchun tashqi yoki ichki soyalardan foydalanishga ruxsat beriladi.

Shubhasiz, gradientlar turli yo'llar bilan tuzilishi mumkin. Yuqoridagi variantlardan tashqari, boshqalar ham bor. Misol uchun, dizaynni raqobatchilaringizdan ko'ra originalroq qilish uchun soyalarni notekis ravishda aralashtiring. Gradient mashlari sirtlarni buzish va notekis shakllarni yaratish uchun ishlatilishi mumkin.

Gradientlarni qo'llash

Rasmlar va grafik dizayn. Gradientlar juda mashhur: ular bosma mahsulotlarni loyihalashda keng qo'llaniladi - tashrif qog'ozlaridan tortib ulkan reklama taxtalari yoki porloq jurnallargacha. Biz ularni kontsert plakatlarida, mahsulot qadoqlarida va internet bannerlarida ko'ramiz. Gradientning maqsadi rang-barang fon yaratish bilan cheklanmaydi; gradient plombalar tasvirlarni qoplash yoki dizaynning eng muhim elementlarini ta'kidlash uchun ishlatiladi. Gradientli o'tishlardan foydalanib, siz fonda matnning kichik qismlarini ajratib ko'rsatishingiz, fotosuratlarni "jonlantirishingiz", ularni yanada atmosfera qilish uchun ularga istiqbol berishingiz mumkin (agar siz gradientlarni to'g'ri qo'llaniladigan soyalar bilan to'ldirsangiz).

Identifikatsiya ( korporativ uslub, logotiplar). Bir necha yil oldin, dizaynerlar bir ovozdan gradientlarni logotiplarni to'ldirishda foydalanilgan 90-yillardagi orqaga qaytarish deb hisoblashgan. Biroq, muammo qabulxonaning o'zida emas, balki o'sha davrning tovar belgilariga xos bo'lgan kamchiliklarda. Gradientlar haqiqatan ham o'sha davrning ko'plab logotiplarida topilgan, shuning uchun ularning obro'si yomon edi. Bugungi kunda logotiplar va tipografik elementlarni gradient bilan to'ldirish modaga qaytdi, bu uslub yangi va original deb hisoblanadi. Ranglarning silliq o'tishlaridan foydalangan holda dizaynerlar ularni yanada sezilarli qilish uchun tugmalar, alohida matn bo'laklari, sarlavhalar va piktogrammalarni ajratib ko'rsatishadi.

Mahsulotni qadoqlash. Shaffof joylar va gradient - qadoqlash dizaynida, shuningdek, ichki dizaynda keng tarqalgan "xususiyat". Kosmetik butilkalar, ichimlik idishlari, shirinliklar va hokazolarda bir nechta rangdagi gradient ishlab chiqariladi. Bunga Dove kompaniyasining sochni parvarish qilish mahsulotlarining premium liniyasi yaxshi misol bo'la oladi, bu erda gradientlarni qadoqlashda topish mumkin. Qadoqlash uchun eng zamonaviy gradientlar golografik effektlar bilan birga keladi. Qadoqlash bir nechta soyalar bilan porlaydi va xaridorning e'tiborini yanada tortadi.

Veb-dizayn va SMM. Veb-dizaynda bir nechta rangdagi gradientlar 2016 yildan boshlab tekis dizaynning bir qismi sifatida 2014 yildan beri mashhur bo'lgan va faqat 32 ta asosiy soyani o'z ichiga olgan holda amalga oshirila boshlandi. Bu erda kashshoflar yirik korporatsiyalar va global brendlardir: ular doimo ajralib turishning yangi usullarini izlaydilar, ayniqsa Internetda. Gradientlar odatda veb-sahifalar va mobil ilova interfeyslari uchun fon plomba sifatida ishlatiladi. Tugmalar, menyu havolalari va bannerlar ham ko'pincha gradientlar bilan to'ldiriladi. Gradientlardan foydalanib, siz o'zingizning veb-saytingizni o'zgartirishingiz va uning dizaynini shunchaki tasvir yoki fonni almashtirish orqali yanada individual qilishingiz mumkin.

Gorizontal yoki vertikal gradientlardan foydalanib, foydalanuvchi e'tiborini kerakli joyga, masalan, CTA tugmalari yoki aloqa shakllariga yo'naltirishingiz mumkin. Bunday hollarda foydalanuvchi nigohi harakatining boshlang'ich nuqtasi engilroq to'ldirishga ega bo'lishi kerak va yakuniy nuqta yanada to'yingan rangga ega bo'lishi kerak. Ushbu uslub doimiy ravishda savdo veb-saytlarida va onlayn-do'konlarda qo'llaniladi. Bundan tashqari, veb-saytingizda bir nechta rangdagi gradient yaratsangiz, fon rasmlari va rasmlariga chuqurlik qo'shishingiz, ularning sifatini oshirishingiz va dizaynga yangi ma'nolar qo'shishingiz mumkin. Asl va g'ayrioddiy rangli echimlar turli xil soyalarni aralashtirish orqali olinadi.

Gradient tanlash xizmatlari

WebGradients. Aslida, bu turli xil ranglardan tayyor gradientlar kutubxonasi, siz o'zingiz hech narsa qilishingiz shart emas, faqat allaqachon tavsiya etilgan variantlardan foydalaning. To'plamda faqat 180 ta gradient mavjud. Asbobni Sketch va an'anaviy PSD formatlarida yuklab olish mumkin (portalning yuqori qismidagi havolaga qarang).

Gradientlarni CSS kodi sifatida yuklab olish va keyin to'g'ridan-to'g'ri saytingizga joylashtirish mumkin.

UiGradients. Ko'p tayyor echimlarga ega bo'lgan gradientlarning yana bir to'plami. Sahifaning yuqori qismidagi "Barcha gradientlarni ko'rsatish" tugmasini bosish orqali barcha variantlarni ko'rishingiz mumkin. Portalda siz veb-interfeysning barcha kerakli standart elementlarini topasiz va siz o'zingizga yoqqanini tanlashingiz va keyin uni yuklab olishingiz mumkin (JPG tasvir yoki kod sifatida).

CSS gradient animatori. Veb-xizmat sizga eng dahshatli dizayn fantaziyalaringizni amalga oshirishga va JavaScript-ni ishlatmasdan sof CSS-dan foydalangan holda ma'lum bir rangning gradientini yaratishga imkon beradi. Buning uchun yon paneldagi "Rang qo'shish" tugmasini bosing. Gradientning ikkita asosiy rangi uchun kerakli soyalarni tanlashingiz mumkin bo'lgan oyna paydo bo'ladi. Shuningdek, siz o'tishning intensivligini sozlashingiz va natijaga qoyil qolishingiz mumkin.

Colorzilla. Ushbu xizmat haqida eshitmagan veb-dizaynerni topish qiyin. Bu dizaynerlarga chiroyli gradientlarni yaratishda yordam berish uchun yaratilgan birinchi onlayn vositalardan biri edi. Va mutaxassislar undan foydalanishda davom etmoqdalar.

ColorSpace. Rang sxemalarini yaratish uchun ajoyib xizmat. Boshqa narsalar qatorida, portal o'zining gradient generatoriga ega, bu sizga taqdim etilgan variantlar kutubxonasini kengaytirish imkonini beradi. Interfeys juda qulay, ammo cheklov mavjud: siz turli xil kombinatsiyalarda bir xil rangni faqat ikki marta tanlashingiz mumkin. ColorSpace ning afzalligi ikki rangdan ortiq murakkab gradient yaratish qobiliyatidir.

Cheksiz gradientlar. Gradientlar bilan barcha operatsiyalar yuqori navigatsiya panelida joylashgan: bu siz tanlagan shablonning turli xil variantlarini bloklash, qo'shish, tahrirlashni o'z ichiga oladi. Sichqoncha yordamida tuvallarni sudrab borish va kerakli o'tishlarni o'rnatish, so'ngra saytning CSS uslublariga joylashtirish uchun gradient to'ldirish kodini nusxalash juda qulay. Rassomlar ushbu onlayn xizmatni yaxshi ko'radilar.

Gradient tugmalari. Bu kutubxonada nafaqat gradientlar, balki turli dizayndagi tayyor kichik tugmalar ham mavjud. Tanlov juda keng, tugmalar shakli, shrifti, o'lchami bo'yicha tasniflanadi. Vizual gradient generatorlari universal bo'lib, effektni darhol baholashga va kerak bo'lganda sozlamalarni darhol tahrirlashga imkon beradi. Tayyor versiya foydalanish uchun qulay formatda yuklab olinadi.

CSS-da rang gradientini qanday qilish kerak

Lineer gradient linear-gradient(). Chiziqli gradient qilish uchun ikki yoki undan ko'p rangni va ular ta'qib qiladigan yo'nalishni - gradient chizig'ini belgilang. Yo'nalishni ko'rsatmasdan, gradient o'tish yuqoridan pastgacha quriladi. Ranglarning standart taqsimoti bir xil. Uning yo'nalishi gradient chizig'iga perpendikulyar. Yozish uslublarining umumiy sxemasi: fon: chiziqli-gradient (qiyalik burchagi / yoki yon, bir yoki ikkita kalit so'z bilan belgilanadi, birinchi soya, ikkinchi soya, boshqa xususiyatlar); Gradient yo'nalishini qanday o'rnatish kerak: yoki o'qdan aniq og'ish burchagini belgilang (deg, darajalarda) - bu elementdagi gradient chizig'ining moyillik burchagi bo'ladi: div { balandligi: 200px; fon: chiziqli-gradient (45deg, #EECFBA, #C5DDE8); } yoki kalit so'z bilan yo'nalishni ko'rsating (yuqoriga, pastga, o'ngga, chapga) - ular 0deg, 180deg, 90deg, 270deg burchaklariga to'liq mos keladi: div { balandligi: 200px; fon: chiziqli-gradient (o'ngga, #F6EFD2, #CEAD78); } Agar siz gradientni aniqlash uchun kalit so'zlardan foydalansangiz (masalan, o'ngdan pastda), gradient o'tish shu nuqtada tugaydi va qarama-qarshi nuqtadan boshlanadi (ya'ni, yuqori chapda). div { balandligi: 200px; fon: chiziqli-gradient (yuqorida chap, chang ko'k, pushti); } Agar siz rang gradientingizni notekis qilishni xohlasangiz, har bir soya va rang to'xtash joylari uchun boshlang'ich pozitsiyalarini - gradient to'xtash nuqtalarini - foizlarda belgilang. 0% nol nuqtaga, 100% yakuniy nuqtaga to'g'ri keladi. div { balandligi: 200px; fon: chiziqli-gradient (yuqoriga, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%); } Agar siz silliq rang o'tishlarini emas, balki aniq chiziqlar effektiga erishmoqchi bo'lsangiz, har bir yangi rangni avvalgisining to'xtash nuqtasidan boshlang: div { balandligi: 200px; fon: chiziqli-gradient (o‘ngga, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%); }

Radial gradient radial-gradient(). Radial gradientda ranglar shaklning markazidan chiqadi va ellips yoki mukammal doira hosil qilib, qirralarga bir tekis tarqaladi. fon: radial-gradient (gradient yo'nalishi / hajmi / markaziy nuqta, birinchi soya, ikkinchi soya va boshqalar); Rangli gradientni radial qilish uchun doira yoki ellips kalit so'zidan foydalaning. Agar boshqacha belgilanmagan bo'lsa, standart radial gradient elliptik bo'ladi. div { balandligi: 200px; fon: radial-gradient (oq, #FFA9A1);

} Markaziy nuqta, shuningdek, at prefiksi qo'shilgan fon pozitsiyasida kalit so'zlar bilan belgilanadi. Odatiy bo'lib, bu xususiyat markazga o'rnatiladi. div { balandligi: 200px; fon: radial-gradient (yuqorida, #FEFFFF, #A7CECC); } Elliptik gradientning o'lchami foizlar, piksellar yoki em bilan belgilanadi. Ikkita bunday qiymat mavjud: birinchisi - ellipsning kengligi, ikkinchisi - balandligi. div { balandligi: 200px; fon: radial-gradient (40% 50%, #FAECD5, #CAE4D8); }

Gradientning o'lchamini belgilash uchun maxsus kalit so'zlar qo'llaniladi. Standart qiymat eng uzoq burchakdir.

div { balandligi: 200px; fon: radial-gradient (100px 50px, #FBF2EB, #352A3B da eng uzoq burchakni aylana); }

Gradientlar dizayner uchun kuchli vizual vositadir. Ikki yoki uchta rangdagi gradientni yaratish qiyin emas va ko'plab onlayn xizmatlar bunga yordam beradi. Turli elementlarni birlashtiring, soyalar bilan o'ynang, tajriba qilishdan qo'rqmang!

Foydalanilgan manba:gb.ru