En blød ydre glød tilsat et element på din webside får elementet til at skille sig ud til seeren. Brug CSS3 og HTML til at anvende en glød omkring ydersiden af en vigtig genstand. Effekten ligner en udvendig glød føjet til et objekt i Photoshop.
Opret først elementet til glød
Glødeffekter kan udføres på en hvilken som helst farvebaggrund, men de ser bedst ud på mørke baggrunde, fordi lyset ser ud til at skinne mere. I dette runde-hjørne rektangulære bokseksempel er et DIV-element placeret i et andet DIV-element med en sort baggrund. Den ydre DIV er ikke nødvendig for glød, men det er svært at se gløden på en hvid baggrund.
Giv DIV en klasse af glød:
Indstil elementets størrelse og farve
Når du har valgt det element, du skal pynte med en glød, skal du gå videre og tilføje eventuelle stilarter, du vil have, f.eks. Baggrundsfarve, størrelse og skrifttyper. Dette eksempel er et blåt rektangel; størrelsen er indstillet til 147px med 90px; og baggrundsfarven er sat til # 1f5afe, en kongeblå. Den indeholder en margen til at placere elementet midt i det sorte beholderelement.
Runde hjørnerne
Oprettelse af et rektangel med afrundede hjørner er nemt med CSS3. Tilføj egenskaben for radiustyrestil til din glødklasse. Husk bare at bruge -webkit- og -moz-præfikserne for den højeste kompatibilitet.
-webkit-grænse-radius: 15px;-moz-grænse-radius: 15px;grænse-radius: 15px; Tilføj glød med en bokseskygge
Lyset selv er skabt med en bokseskygge. Fordi du vil have det til at halo hele elementet og ikke projektere gløden fra den ene side som en skygge, sætter du de vandrette og lodrette længder til 0px. I dette eksempel er blurradiusen indstillet til 15px, og spredningen af blur er 5px, men du kan fyre med disse indstillinger for at bestemme, hvor bredt og diffust du vil have, at gløden skal være. Farven rgb (255,255,190) er en gul farve med RGBa alfa gennemsigtighed sat til 75 procent-rgba (255,255,190, .75). Vælg en lysfarve, der passer bedst til dit projekt. Som med afrunding af hjørnerne, skal du ikke glemme at bruge browseren præfikser (-webkit- og -moz-) for at opnå den bedste kompatibilitet.
-webkit-boks-skygge: 0px 0px 15px 5px rgba (255, 255, 190, .75);-moz-box-skygge: 0px 0px 15px 5px rgba (255, 255, 190, .75);box-skygge: 0px 0px 15px 5px rgba (255, 255, 190, .75); Test den glødende boks
Test den glødende boks i en eller flere browsere og foretag de nødvendige justeringer for at give den lyseffekt, der virker bedst for din webside.
