En blød udvendig glød føjet til et element på din webside får elementet til at skille sig ud for seeren. Brug CSS3 og HTML for at anvende en glød omkring yderkanterne på et vigtigt objekt. Effekten svarer til en udvendig glød føjet til et objekt i Photoshop.
Opret elementet til glød
Glødeffekter fungerer på enhver baggrund, men de ser bedst ud på mørke baggrunde, for så ser det ud til, at glødet skinner mere. I et eksempel på et afrundet rektangulært felt placeres et DIV-element 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ød på en hvid baggrund.
Indstil størrelsen og farven på elementet
Når du har valgt det element, du skal pynte med en glød, tilføj stilarter til det, såsom baggrundsfarve, størrelse og skrifttyper.
Dette eksempel er et blåt rektangel; størrelsen er indstillet til 147 pixel ved 90 pixel; og baggrundsfarven er indstillet til # 1f5afe, en kongeblå. Det inkluderer en margen til at placere elementet i midten af det sorte containerelement.
Rund om hjørnerne
Det er nemt at oprette et rektangel med afrundede hjørner med CSS3. Føj egenskaben border-radius style til din glødeklasse. Husk bare at bruge –Webkit– og –Moz– præfikser for den højeste kompatibilitet.
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
grænse-radius: 15px;
Tilføj glød med en boksskygge
Selve gløden er skabt med en boksskygge. Fordi det haloerer hele elementet uden at projicere gløden fra den ene side som en skygge, skal du indstille de vandrette og lodrette længder til 0 pixel.
I dette eksempel er sløringsradius indstillet til 15 pixel, og spredning af sløring er 5 pixel, men du kan fikle med disse indstillinger for at bestemme, hvor bred og diffus du vil have glød. Farven rgb (255,255,190) er en gul farve med RGBa alfa-gennemsigtighed indstillet til 75 procent—rgba (255,255,190, .75). Vælg en lysfarve, der fungerer bedst til dit projekt. Som ved afrunding af hjørnerne, glem ikke at bruge browserpræfikserne (–Webkit– og –Moz–) for den bedste kompatibilitet.
-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-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);