Ismerje meg, hogyan lehet fényerejű hatásokat gyorsan és könnyedén hozzáadni a CSS3 használatával

Add hozzá a Glow egy weboldal elemet a hangsúlyt

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.