Een zachte gloed van buitenaf die aan een element op uw webpagina wordt toegevoegd, 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 buitengloed die wordt toegevoegd aan een object binnenin Photoshop.
Creëer het element om te gloeien
Glow-effecten werken op elke achtergrond, maar ze zien er het beste uit op donkere achtergronden, omdat de gloed dan meer lijkt te glinsteren. In een voorbeeld van een rechthoekige doos met afgeronde hoeken, wordt een DIV-element in een ander DIV-element met een zwarte achtergrond geplaatst. De buitenste DIV is niet nodig voor de gloed, maar het is moeilijk om de gloed op een witte achtergrond te zien.
Stel de grootte en kleur van het element in
Nadat je het element hebt gekozen dat je gaat verfraaien met een gloed, stijlen toevoegen 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, koningsblauw. 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 border-radius-stijl toe aan uw glow-klasse. Vergeet niet om de. te gebruiken –webkit– en –moz– voorvoegsels voor de hoogste compatibiliteit.
-webkit-grens-radius: 15px;
-moz-grens-radius: 15px;
grensradius: 15px;
Voeg de gloed toe met een doosschaduw
De gloed zelf is gemaakt met een doosschaduw. Omdat het het hele element een halo geeft zonder de gloed van één kant als een schaduw te projecteren, stelt u de horizontale en verticale lengtes in op 0px.
In dit voorbeeld is de vervagingsradius ingesteld op 15 px en is de spreiding van de vervaging 5 px, maar u kunt met die instellingen spelen om te bepalen hoe breed en diffuus u de gloed wilt hebben. 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 gloedkleur die het beste bij uw project past. Vergeet niet om, net als bij het afronden van de hoeken, de browservoorvoegsels te gebruiken (–webkit– en –moz–) voor de beste compatibiliteit.
-webkit-box-schaduw: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-box-schaduw: 0px 0px 15px 5px rgba (255, 255, 190, .75);
box-schaduw: 0px 0px 15px 5px rgba (255, 255, 190, .75);