Mīksts ārējais spīdums, kas pievienots jūsu tīmekļa lapas elementam, padara šo elementu skatītājam izceļamu. Izmantot CSS3 un HTML, lai piemērotu mirdzumu ap svarīga objekta ārējām malām. Efekts ir līdzīgs ārējam spīdumam, kas pievienots objektam Photoshop.
Izveidojiet elementu, kas spīd
Spīduma efekti darbojas uz jebkura fona, taču tie vislabāk izskatās uz tumša fona, jo tad šķiet, ka mirdzums vairāk mirdz. Noapaļotu stūru taisnstūra lodziņa piemērā DIV elements tiek ievietots citā DIV elementā ar melnu fonu. Ārējais DIV nav nepieciešams mirdzumam, taču uz balta fona ir grūti redzēt mirdzumu.
Iestatiet elementa lielumu un krāsu
Kad esat izvēlējies elementu, kuru izrotāt ar mirdzumu, pievienot stilus kā fona krāsa, izmērs un fonti.
Šis piemērs ir zils taisnstūris; lielums ir iestatīts uz 147 x 90 pikseļiem; un fona krāsa ir iestatīta uz # 1f5afe, karaliski zilu. Tas ietver rezervi elementa ievietošanai melnā konteinera elementa vidū.
Apkārt Stūriem
Izmantojot CSS3, ir viegli izveidot taisnstūri ar noapaļotiem stūriem. Pievienojiet apmales rādiusa stila īpašumu savai spīduma klasei. Vienkārši atcerieties izmantot –Webkit– un –Moz– priedēkļi visaugstākajai saderībai.
-webkit-border-rādiuss: 15px;
-moz-pierobežas rādiuss: 15px;
apmales rādiuss: 15 pikseļi;
Pievienojiet Glow With a Box Shadow
Pats mirdzums ir izveidots ar kastes ēnu. Tā kā tas samazina visu elementu, nenovēršot spīdumu no vienas puses kā ēna, iestatiet horizontālo un vertikālo garumu uz 0 pikseļu.
Šajā piemērā aizmiglojuma rādiuss ir iestatīts uz 15 pikseļiem, un izplūduma izplatība ir 5 pikseļi, taču jūs varat pakavēties ar šiem iestatījumiem, lai noteiktu, cik plašs un izkliedēts vēlaties mirdzumu. Krāsa RGB (255 255 190) ir dzeltena krāsa ar RGBa alfa caurspīdīgumu, kas iestatīts uz 75 procentiem—rgba (255 255 190, 0,75). Izvēlieties jūsu projektam vislabāk piemērotu spīduma krāsu. Tāpat kā noapaļojot stūrus, neaizmirstiet izmantot pārlūka prefiksus (–Webkit– un –Moz–), lai nodrošinātu vislabāko saderību.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);