A weboldal egy eleméhez hozzáadott puha külső fény hatására az elem kiemelkedik a néző számára. Használja a CSS3 és a HTML-t, hogy egy fontos objektum külső szélei körül fényt fújjon. A hatás hasonló a Photoshopban lévő objektum külső fényéhez.
Először hozzon létre az elemet a ragyogáshoz
Glow effektek bármely színes háttéren elvégezhetők, de a sötét háttérrel jobban néznek ki, mert az izzó fényesebbnek tűnik. Ebben a lekerekített négyszögletes négyzetdobozban egy DIV elemet helyeznek el egy másik DIV elemhez fekete háttérrel. A külső DIV nem szükséges a ragyogáshoz, de nehéz látni a ragyogást fehér alapon.
Adja a DIV-nek egy ragyogó osztályt:
Állítsa be az elem méretét és színét
Miután kiválasztottad azt az elemet, amelyet egy fényességgel kívánsz díszíteni, menj előre és adjon hozzá olyan stílusokat, mint például a háttérszín, a méret és a betűtípusok. Ez a példa egy kék téglalap; a méret 147px-re van beállítva 90px-vel; és a háttérszín # 1f5afe, királykék. Tartalmaz egy olyan margót, amely az elemet a fekete konténerelem közepére helyezi.
Kerek a sarok
A CSS3 segítségével könnyen lekerekíthetünk egy téglalapot lekerekített sarkokkal. Adja hozzá a határ-sugaras stílus tulajdonságot az izzási osztályához. Ne feledje, hogy a -webkit- és -moz-előtagokat használja a legmagasabb szintű kompatibilitás érdekében.
-webkit-border-radius: 15px;-moz-határ-sugár: 15px;határ-sugár: 15px; Adja hozzá a ragyogást a doboz árnyékához
Maga a ragyogás egy doboz árnyékkal jön létre. Mivel azt szeretné, hogy az egész elemet felhúzza, és ne árnyékolja le az egyik oldalról az árnyékot, a vízszintes és függőleges hosszúságokat 0px értékre állítja. Ebben a példában az elmosódási sugár 15-szeresre van beállítva, és az elmosódottság szóródása 5px, de ezeket a beállításokat meg lehet határozni annak meghatározására, hogy mennyire széles és diffúz, amire az izzításra szüksége lehet. A színes rgb (255,255,190) sárga színű, RGBa alfa átlátszósága 75% -ra (255,255,190, 0,75). Válasszon olyan fényszínt, amely a legjobban illik a projekthez. A sarkok lekerekítéséhez, ne felejtsd el használni a böngésző előtagokat (-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);doboz árnyék: 0px 0px 15px 5px rgba (255, 255, 190, .75); Ellenőrizze az izzó dobozt
Tesztelje az izzó dobozt egy vagy több böngészőben, és végezze el a szükséges módosításokat ahhoz, hogy a fényerő hatása jobban működjön a weblapján.
