Баса назар аудару үшін веб-парақ элементіне жарқыл қосыңыз
Веб-беттегі элементке қосылатын жұмсақ сырттағы жарқыл элемент көрерменге бөлінеді. Маңызды нысанның сыртқы шеттерінде жарқылдау үшін CSS3 және HTML- ні қолданыңыз. Бұл әсер Photoshop-дағы объектке қосылатын сыртқы жарқырауға ұқсас.
Алдымен элементті Жарқыл үшін жасаңыз
Жарқылдау әсері кез-келген түсті фонда жасалуы мүмкін, бірақ олар қараңғы фонда жақсы көрінеді, сол кезде жарқырау көбірек көрінеді. Бұл дөңгелек бұрыштағы тікбұрышты ұяшықтағы мысалда DIV элементі қара түспен басқа DIV элементіне орналастырылады. Сыртқы DIV жарқырау үшін қажет емес, бірақ ақ фондағы жарқылды көру қиын.
DIV-ті жарқылдың класына келтіріңіз:
Элементтің өлшемі мен түстерін орнатыңыз
Элементті таңдағаннан кейін, сіз жарқылмен жарнамаланатын боласыз, алға қарай жалғастырыңыз және фондық түс, өлшем және қаріп сияқты кез келген мәнерлерді қосыңыз . Бұл мысал - көк тіктөртбұрыш; өлшемі 147px дейін 90px; ал фон түсі # 1f5afe, корольдің көк түске орнатылған. Ол элементті қара контейнер элементінің ортасына орналастыру үшін маржаны қамтиды.
Дөңгелек бұрыштар
Дөңгеленген бұрыштары бар тіктөртбұрышты жасау CSS3-мен оңай. Реңк-радиус стилі сипатын сіздің жарқыл сыныпыңызға қосыңыз. Тек ең жоғары үйлесімділік үшін -webkit- және -moz- префикстерді пайдалануды ұмытпаңыз.
-webkit-border-radius: 15px;
-moz-шекара-радиусы: 15px;
border-radius: 15px;
Қабырғасының көлеңкесімен жарқыл қосыңыз
Жарқылдың өзі қорап көлеңкесімен жасалады. Өйткені, сіз барлық элементті галоға айналдырғыңыз келеді және көлеңке сияқты бір жақты жарықтандыруды емес, көлденең және тік ұзындарды 0px мәніне орнатасыз. Бұл мысалда бұлыңғырлық радиусы 15 пиксельге тең болады және бұлыңғырлықтың таралуы 5px, бірақ сіз жарқылдың қаншалықты кең және диффузиялық екендігін анықтау үшін сол параметрлермен скрипить аласыз. Түс ргб (255,255,190) - RGBa альфа мөлдірлігі 75% -ггбаға (255,255,190, .75) орнатылған сары түсті. Жобаңыз үшін ең жақсы жұмыс істейтін жарқыл түсті таңдаңыз. Бұрыштарды дөңгелектеу сияқты, ең жақсы үйлесімділік үшін браузер префикстерін (-webkit- және -moz-) пайдалануды ұмытпаңыз.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
қораптың көлеңке: 0px 0px 15px 5px rgba (255, 255, 190, .75);
Жарқыраған қорапты тексеріңіз
Бір немесе бірнеше браузерлердегі жарқыл терезені тексеріңіз және веб-парағыңыз үшін ең жақсы жұмыс істейтін жарқыл әсерін беру үшін қажетті түзетулер енгізіңіз.