A weblap egyik eleméhez lágy külső fény hatására az elem kiemelkedik a néző számára. Használat CSS3 HTML és egy fontos objektum külső szélei körüli ragyogás. A hatás hasonló egy külső ragyogáshoz, amely egy objektumhoz hozzáadódik Photoshop.
Hozza létre az izzó elemet
A ragyogás effektek bármilyen háttéren működnek, de sötét háttér előtt néznek ki a legjobban, mert akkor úgy tűnik, hogy a ragyogás jobban csillog. A lekerekített sarkú téglalap alakú mezőben egy DIV elem egy másik, fekete háttérrel rendelkező DIV elembe kerül. A külső DIV nem szükséges a ragyogáshoz, de nehéz meglátni a ragyogást fehér alapon.
Állítsa be az elem méretét és színét
Miután kiválasztotta az elemet, amelyet ragyogással díszíteni fog, stílusokat adjon hozzá például háttérszín, méret és betűtípusok.
Ez a példa kék téglalap; a méret 147 x 90 képpont; és a háttér színe # 1f5afe, királykék. Tartalékot tartalmaz az elem elhelyezésére a fekete konténerelem közepén.
Kerek a sarkokon
A CSS3 segítségével könnyedén létrehozhat egy téglalapot lekerekített sarkokkal. Adja hozzá a szegélysugár stílusú tulajdonságot a ragyogásosztályhoz. Csak ne felejtsd el használni a –Webkit– és –Moz– előtagok a legnagyobb kompatibilitás érdekében.
-webkit-border-radius: 15px;
-moz-határ-sugár: 15px;
határ-sugár: 15 képpont;
Adja hozzá a ragyogást dobozos árnyékkal
Maga a ragyogás egy doboz árnyékával jön létre. Mivel az egész elemet halogatja, anélkül, hogy árnyékként levetítené a ragyogást az egyik oldalról, állítsa a vízszintes és függőleges hosszúságot 0 képpontra.
Ebben a példában az elmosódás sugara 15 képpontra van állítva, és az elmosódás terjedése 5 képpontra terjed ki, de ezen beállítások között el lehet hárítani, hogy meghatározza, milyen széles és diffúz legyen a ragyogás. A szín rgb (255,255,190) sárga színű, RGBa alfa átlátszósága 75 százalékra van állítva -rgba (255,255,190, .75). Válasszon olyan izzó színt, amely a legjobban megfelel a projektjének. A sarkok lekerekítéséhez hasonlóan ne felejtse el használni a böngésző előtagjait (–Webkit– és –Moz–) a legjobb kompatibilitás érdekében.
-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);