Een zachte buitenste gloed toegevoegd aan een element op uw webpagina zorgt ervoor dat het element opvalt voor de kijker. Gebruik CSS3 en HTML om een gloed rond de buitenranden van een belangrijk object toe te passen. Het effect is vergelijkbaar met een buitenste gloed toegevoegd aan een object in Photoshop.
Maak eerst het element dat moet gloeien
Gloei-effecten kunnen op elke kleurachtergrond worden uitgevoerd, maar ze zien er het best uit op donkere achtergronden, omdat de glans dan meer lijkt te flikkeren. In dit rechthoekige rechthoekige doosvoorbeeld is een DIV-element geplaatst in een ander DIV-element met een zwarte achtergrond. De buitenste DIV is niet nodig voor de gloed, maar het is moeilijk om de gloed op een witte achtergrond te zien.
Geef de DIV een klasse van gloed:
Stel de grootte en kleur van het element in
Nadat je het element hebt gekozen dat je gaat gloeien met een gloed, ga je gang en voeg je de gewenste stijlen toe, zoals achtergrondkleur, -grootte en -lettertypen. Dit voorbeeld is een blauwe rechthoek; de grootte is ingesteld op 147px bij 90px; en de achtergrondkleur is ingesteld op # 1f5afe, een koningsblauwe kleur. Het bevat een marge om het element in het midden van het zwarte containerelement te plaatsen.
Rond de hoeken
Het maken van een rechthoek met afgeronde hoeken is eenvoudig met CSS3. Voeg de eigenschap van de randradiusstijl toe aan uw gloeiklasse. Vergeet niet om de -webkit- en -moz-voorvoegsels te gebruiken voor de hoogste compatibiliteit.
-webkit-border-radius: 15px;-moz-border-radius: 15px;grensradius: 15px; Voeg de gloed met een doosschaduw toe
De gloed zelf is gemaakt met een doosschaduw. Omdat je wilt dat het hele element halo wordt en de gloed niet van een kant als een schaduw projecteert, stel je de horizontale en verticale lengte in op 0px. In dit voorbeeld is de blur-straal ingesteld op 15 px en de spreiding van de vervaging is 5 px, maar u kunt met die instellingen spelen om te bepalen hoe breed en diffuus u wilt dat de gloed is. De kleur rgb (255,255,190) is een gele kleur met RGBa alpha-transparantie ingesteld op 75 procent-rgba (255,255,190 ,,75). Kies een gloeikleur die het beste werkt voor uw project. Net als bij het afronden van de hoeken, vergeet dan niet de browser-voorvoegsels (-webkit- en -moz-) te gebruiken voor de beste compatibiliteit.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);vakschaduw: 0px 0px 15px 5px rgba (255, 255, 190, .75); Test de gloeiende doos
Test het gloeiende vak in een of meer browsers en pas het lichteffect aan dat het beste werkt voor uw webpagina.
