Ein weiches äußeres Leuchten, das einem Element auf Ihrer Webseite hinzugefügt wird, hebt das Element für den Betrachter hervor. Benutzen CSS3 und HTML, um die Außenkanten eines wichtigen Objekts zu leuchten. Der Effekt ähnelt einem äußeren Glühen, das einem Objekt in hinzugefügt wird Photoshop.
Erschaffe das Element zum Leuchten
Glüheffekte funktionieren auf jedem Hintergrund, aber sie sehen auf dunklen Hintergründen am besten aus, weil dann das Glühen mehr zu schimmern scheint. In einem Beispiel eines rechteckigen Kastens mit abgerundeten Ecken wird ein DIV-Element in einem anderen DIV-Element mit schwarzem Hintergrund platziert. Das äußere DIV ist für das Leuchten nicht erforderlich, aber es ist schwer, das Leuchten auf weißem Hintergrund zu sehen.
Legen Sie die Größe und Farbe des Elements fest
Nachdem Sie das Element ausgewählt haben, das Sie mit einem Leuchten verschönern möchten, Stile hinzufügen wie Hintergrundfarbe, Größe und Schriftarten.
Dieses Beispiel ist ein blaues Rechteck; die Größe ist auf 147 x 90 Pixel festgelegt; und die Hintergrundfarbe ist auf #1f5afe, ein Königsblau, eingestellt. Es enthält einen Rand, um das Element in der Mitte des schwarzen Containerelements zu platzieren.
Um die Ecken
Mit CSS3 ist es ganz einfach, ein Rechteck mit abgerundeten Ecken zu erstellen. Fügen Sie die Stileigenschaft border-radius zu Ihrer Glühklasse hinzu. Denken Sie daran, die –Webkit– und –moz– Präfixe für höchste Kompatibilität.
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
Randradius: 15px;
Fügen Sie das Leuchten mit einem Boxschatten hinzu
Das Leuchten selbst wird mit einem Kastenschatten erzeugt. Da es das gesamte Element umstrahlt, ohne das Leuchten von einer Seite wie einen Schatten zu projizieren, stellen Sie die horizontale und vertikale Länge auf 0px ein.
In diesem Beispiel ist der Weichzeichnungsradius auf 15px eingestellt und die Streuung der Weichzeichnung beträgt 5px, aber Sie können mit diesen Einstellungen herumspielen, um zu bestimmen, wie breit und diffus das Leuchten sein soll. Die Farbe RGB (255,255,190) ist eine gelbe Farbe mit einer RGBa-Alpha-Transparenz von 75 Prozent.rgba (255,255,190, .75). Wählen Sie eine Leuchtfarbe, die für Ihr Projekt am besten geeignet ist. Vergessen Sie nicht, wie beim Abrunden der Ecken die Browser-Präfixe (–Webkit– und –moz–) für beste Kompatibilität.
-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-Schatten: 0px 0px 15px 5px rgba (255, 255, 190, .75);