Ein weiches Glühen nach außen, das einem Element auf Ihrer Webseite hinzugefügt wird, hebt das Element für den Betrachter hervor. Verwenden Sie CSS3 und HTML, um die Außenkanten eines wichtigen Objekts zu glühen. Der Effekt ähnelt einem äußeren Schein, der einem Objekt in Photoshop hinzugefügt wird.
Erstellen Sie zuerst das Element zum Glühen
Glüheffekte können auf jeden farbigen Hintergrund angewendet werden, sie wirken jedoch auf dunklen Hintergründen am besten, da der Schein dann mehr zu schimmern scheint. In diesem Beispiel mit rechteckigen Feldern mit abgerundeten Ecken wird ein DIV-Element in einem anderen DIV-Element mit schwarzem Hintergrund platziert. Das äußere DIV ist für das Glühen nicht erforderlich, aber das Glühen auf weißem Hintergrund ist schwer zu erkennen.
Gib dem DIV eine Klasse von Glanz:
Legen Sie die Größe und Farbe des Elements fest
Nachdem Sie das Element ausgewählt haben, das Sie mit einem Schimmer verschönern möchten, fügen Sie die gewünschten Stile hinzu, z. B. Hintergrundfarbe, Größe und Schriftarten. Dieses Beispiel ist ein blaues Rechteck. die Größe wird von 90px auf 147px gesetzt; Die Hintergrundfarbe ist auf # 1f5afe, ein Königsblau, gesetzt. Sie enthält einen Rand, um das Element in der Mitte des schwarzen Containerelements zu platzieren.
Rund um die Ecken
Das Erstellen eines Rechtecks mit abgerundeten Ecken ist mit CSS3 einfach. Fügen Sie der Glow-Klasse die Style-Eigenschaft für den Rahmenradius hinzu. Denken Sie daran, die Präfixe "webkit" und "moz" zu verwenden, um höchste Kompatibilität zu gewährleisten.
-webkit-border-radius: 15px;-moz-border-radius: 15px;Grenzradius: 15px; Fügen Sie das Glow With Box Box Shadow hinzu
Das Glühen selbst wird mit einem Boxschatten erstellt. Da Sie möchten, dass das gesamte Element angezeigt wird und der Schein nicht wie ein Schatten von einer Seite projiziert wird, legen Sie die horizontale und vertikale Länge auf 0px fest. In diesem Beispiel ist der Unschärfekreisradius auf 15px und die Ausbreitung der Unschärfe beträgt 5px. Sie können jedoch mit diesen Einstellungen arbeiten, um zu bestimmen, wie breit und diffus das Glühen sein soll. Die Farbe rgb (255,255,190) ist eine gelbe Farbe, wobei die RGBa-Alphatransparenz auf 75 Prozent eingestellt ist - rgba (255,255,190, 0,75). Wählen Sie eine Leuchtfarbe, die für Ihr Projekt am besten geeignet ist. Vergessen Sie bei der Abrundung der Ecken nicht, die Browser-Präfixe (–webkit– und –moz–) zu verwenden, um die beste Kompatibilität zu gewährleisten.
-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); Testen Sie die leuchtende Box
Testen Sie das Leuchtfeld in einem oder mehreren Browsern, und nehmen Sie die erforderlichen Anpassungen vor, um den für Ihre Webseite optimalen Glüheffekt zu erzielen.
