Ta'kidlash uchun veb-sahifa elementiga porlashni qo'shing
Veb-sahifangizdagi elementga qo'shilgan yumshoq tashqi yorug'lik elementni tomoshabinga ajratib qo'yadi. Muhim ob'ektning tashqi chekkalari bo'ylab porlashni amalga oshirish uchun CSS3 va HTML-dan foydalaning. Effekt fotoshopdagi ob'ektga qo'shilgan tashqi yorug'likka o'xshaydi.
Birinchidan, elementni porlash uchun yarating
Glow effektlari har qanday rangli fonda bajarilishi mumkin, lekin ular quyuq fonga eng yaxshi ko'rinadi, chunki u keyinroq porlash ko'proq yorqinroq ko'rinadi. Bu yumaloq burchakli to'rtburchak qutidagi misolda, DIV elementi qora fon bilan boshqa DIV elementiga joylashtiriladi. Tashqi DIV yorqinligi uchun zarur emas, lekin oq fonda yorug'likni ko'rish qiyin.
DIVga yorug'lik sinfini bering:
Elementning kattaligi va rangini belgilang
Elementni tanlaganingizdan so'ng siz nashrga tayyorlanasiz, fon rangi, kattaligi va shriftlar kabi oldinga boring va xohlagan uslubingizni qo'shing . Ushbu misol ko'k to'rtburchak; o'lchami 147px ga 90px ga o'rnatiladi; va fon rangi # 1f5afe, qirollik ko'kka o'rnatiladi. Bu element qora konteyner elementining o'rtasiga joylashtirish uchun chekka joyni o'z ichiga oladi.
Burchaklarni yumalaymiz
Yumaloq burchakli to'rtburchaklar yaratish CSS3 bilan oson. Chegarasi radiusi stilining xususiyatini sizning yorqin sinfga qo'shing. Eng yuqori moslik uchun -webkit-va-moz-prefikslardan foydalanishni esda tuting.
-webkit-border-radius: 15px;
-moz-chegara radiusi: 15px;
chegara radiusi: 15px;
Goya bir quti soya bilan qo'shing
Yorug'lik o'zini quticha soyada yaratadi. Chunki siz butun elementni halo qilishni xohlaysiz va soya kabi bir tomondan porlashni emas, balki gorizontal va vertikal uzunligini 0px ga o'rnatasiz. Ushbu misolda, blur radiusi 15px sifatida belgilanadi va loyqalik tarqalishi 5px, lekin bu yorqinlikni qanchalik keng va keng tarqalishini aniqlash uchun ushbu sozlamalar bilan skripka qilishingiz mumkin. Rangli rgb (255,255,190) RGBa alfa shaffofligi bilan sariq rangga ega bo'lib, 75% -ggbga (255,255,190,75) o'rnatiladi. Loyihangiz uchun eng yaxshi ishlaydigan nashrida rangni tanlang. Burchaklarni yaxlitlashda bo'lgani kabi, eng yaxshi moslik uchun brauzer prefikslarini (-webkit- va -moz-) ishlatishni unutmang.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
quti-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
Yorqin qutini tekshiring
Yoritgichni bir yoki bir nechta brauzerlarda tekshiring va veb-sahifangiz uchun eng yaxshi ishlaydigan yorqin effekti berish uchun zarur bo'lgan har qanday sozlashlarni amalga oshiring.