En myk utvendig glød lagt til et element på websiden din gjør at elementet skiller seg ut for betrakteren. Bruk CSS3 og HTML for å bruke en glød rundt utsiden av et viktig objekt. Effekten er lik en utvendig glød lagt til et objekt i Photoshop.
Lag Element for Glow
Glødeffekter fungerer på hvilken som helst bakgrunn, men de ser best ut på mørke bakgrunner, for da ser glødet ut til å skinne mer. I et eksempel på et rektangulært avrundet hjørne plasseres et DIV-element i et annet DIV-element med svart bakgrunn. Den ytre DIV er ikke nødvendig for gløden, men det er vanskelig å se gløden på en hvit bakgrunn.
Angi størrelsen og fargen på elementet
Etter at du har valgt elementet du skal pynte med en glød, legg til stiler til den, for eksempel bakgrunnsfarge, størrelse og skrifttyper.
Dette eksemplet er et blått rektangel; størrelsen er satt til 147px x 90px; og bakgrunnsfargen er satt til # 1f5afe, en kongeblå. Den inkluderer en margin for å plassere elementet i midten av det sorte beholderelementet.
Rundt hjørnene
Å lage et rektangel med avrundede hjørner er enkelt med CSS3. Legg til grense-radius-egenskapen til glødeklassen din. Bare husk å bruke –Webkit– og –Moz– prefikser for høyest kompatibilitet.
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
grense-radius: 15px;
Legg til gløden med en bokseskygge
Selve gløden er skapt med en bokseskygge. Fordi det glir hele elementet uten å projisere gløden fra den ene siden som en skygge, setter du den horisontale og vertikale lengden til 0px.
I dette eksemplet er uskarphetsradius satt til 15px og spredningen av uskarpheten er 5px, men du kan fikle med disse innstillingene for å bestemme hvor bred og diffus du vil at gløden skal være. Fargen rgb (255,255,190) er en gul farge med RGBa alfa-gjennomsiktighet satt til 75 prosent—rgba (255,255,190, .75). Velg en glødfarge som fungerer best for prosjektet ditt. Som med avrunding av hjørnene, ikke glem å bruke nettleserprefikset (–Webkit– og –Moz–) for best 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);
bokseskygge: 0px 0px 15px 5px rgba (255, 255, 190, .75);