Diqqət üçün bir Web səhifə elementinə parıltı əlavə edin
Veb səhifənizdə bir elementə əlavə edilən yumşaq bir kənar parıltı, elementin görüntüləyiciyə üstünlük verməsinə səbəb olur. Mühüm bir obyektin kənar kənarları ətrafında bir parıltı tətbiq etmək üçün CSS3 və HTML istifadə edin. Effekt Photoshop-da bir obyektə əlavə olunan bir parıltıya bənzərdir.
Birincisi Parıltı üçün element yaradın
Glow effektləri hər hansı bir rəng fonunda edilə bilər, ancaq daha sonra parıltı daha parıltılı görünür, çünki onlar qaranlıq fonları yaxşı baxmaq. Bu dairəvi küncdə düzbucaqlı qutuda nümunə olan bir DIV elementi qara bir fon ilə digər DIV elementinə yerləşdirilir. Xarici DIV parıltı üçün zəruri deyil, lakin ağ fonda parıltıı görmək çətindir.
DIV bir parıltı ver:
Elementin ölçüsü və rəngini seçin
Elemanı seçdikdən sonra bir parıltı ilə zəriflik edəcəyik, ardıcıl rəng, ölçü və şriftlər kimi, istədiyiniz hər hansı bir üslub əlavə edin . Bu nümunə mavi düzbucaqlıdır; ölçüsü 147px qədər 90px; fon rəngi # 1f5afe, padşahlıq mavi olaraq təyin edilir. Elementi qara konteyner elementinin ortasına yerləşdirmək üçün margin daxildir.
genişlik: 147px;
yüksəklik: 90px;
background-color: # 1f5afe;
};
Küncləri yuvarla
Dəyirmi küncləri olan bir düzbucaqlı yaradın CSS3 ilə asan. Sərhəd radiuslu stil mülkünü parıltı sinifinə əlavə edin. Yalnız ən yüksək uyğunluq üçün -webkit- və -moz- önfixləri istifadə edin.
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
sərhəd radiusu: 15px;
Qutu gölgəsi ilə parıltı əlavə edin
Parıltı özü bir qutu kölgəsi ilə yaradılmışdır. Çünki bütün elementi haloya çevirmək və bir kölgə kimi bir tərəfdən parıltı verməyinizi istəməyiniz üçün 0px-yə üfüqi və şaquli uzunluqları təyin edirsiniz. Bu nümunədə, blur radius 15px-ə bərabərdir və bulanıklığın yayılması 5pxdir, amma siz parıltıların nə dərəcədə geniş və diffuz olduğunun müəyyənləşdirilməsi üçün bu parametrlər ilə skripka edə bilərsiniz. Rəngli rgb (255,255,190) RGBa alfa şəffaflığı ilə 75 faiz-rgba (255,255,190, .75) olan sarı bir rəngdir. Layihə üçün ən yaxşı işləyən parıltı rəngini seçin. Guşələrin yuvarlaqlaşdırılmasında olduğu kimi, ən yaxşı uyğunluq üçün brauzerinizin prefikslərini (-webkit- və -moz-) istifadə etməyi unutmayın.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
qutu kölgəsi: 0px 0px 15px 5px rgba (255, 255, 190, .75);
Glowing Box test edin
Parlaq qutunu bir və ya bir neçə brauzerdə sınayın və veb səhifəniz üçün ən yaxşı işlədilən parıltı təsiri vermək üçün lazım olan hər hansı bir düzəliş edin.