En myk ytre glød som legges til et element på nettsiden din, får elementet til å skille seg ut til betrakteren. Bruk CSS3 og HTML for å bruke en glød rundt utsiden av en viktig gjenstand. Effekten ligner en utvendig glød som er lagt til i et objekt i Photoshop.
Først lag elementet til glød
Glødeffekter kan gjøres på hvilken som helst fargebakgrunn, men de ser best ut på mørke bakgrunner, fordi lyset ser ut til å skinne mer. I dette runde hjørnet rektangulære bokseksemplet er et DIV-element plassert i et annet DIV-element med en svart bakgrunn. Den ytre DIV er ikke nødvendig for glød, men det er vanskelig å se gløden på en hvit bakgrunn.
Gi DIV en klasse av glød:
Angi størrelse og farge på elementet
Når du velger elementet du skal pynte med en glød, går du videre og legger til noen stilarter du vil ha, for eksempel bakgrunnsfarge, størrelse og skrifter. Dette eksemplet er et blått rektangel; størrelsen er satt til 147px med 90px; og bakgrunnsfargen er satt til # 1f5afe, en kongeblå. Den inneholder en margin for å plassere elementet midt i det svarte beholderelementet.
Rundt hjørnet
Å lage et rektangel med avrundede hjørner er enkelt med CSS3. Legg til egenskapen for radiustyretilstanden til din lysklasse. Bare husk å bruke -webkit- og -moz-prefikser for høyeste kompatibilitet.
-webkit-grense-radius: 15px;-moz-grense-radius: 15px;border-radius: 15px; Legg til gløden med en bokseskygge
Lyset selv er opprettet med en bokseskygge. Fordi du vil at den skal halo hele elementet og ikke projisere gløden fra den ene siden som en skygge, setter du horisontale og vertikale lengder til 0px. I dette eksemplet er blurradiusen satt til 15px og spredningen av uskarpheten er 5px, men du kan flappe med disse innstillingene for å bestemme hvor bredt og diffust du vil ha gløden til å 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 lysfarge som fungerer best for prosjektet ditt. Som med å avrunde hjørnene, ikke glem å bruke nettleserprefiksene (-webkit- og -moz-) for å få best mulig 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);boksskygge: 0px 0px 15px 5px rgba (255, 255, 190, 75); Test den glødende boksen
Test den glødende boksen i en eller flere nettlesere og foreta nødvendige tilpasninger for å gi den lyseffekten som fungerer best for din nettside.
