En mjuk utvändig glödning som läggs till på ett element på din webbsida gör att elementet sticker ut mot betraktaren. Använd CSS3 och HTML för att applicera en glöd runt utsidan av ett viktigt objekt. Effekten liknar en yttre glöd som läggs till i ett objekt i Photoshop.
Först Skapa Elementet till Glöd
Glödseffekter kan göras på vilken färgbakgrund som helst, men de ser bäst ut på mörka bakgrunder, eftersom glöden verkar skimma mer. I det här rundade hörnet rektangulära boxexemplet placeras ett DIV-element i ett annat DIV-element med en svart bakgrund. Den yttre DIV är inte nödvändig för glöd, men det är svårt att se glöden på en vit bakgrund.
Ge DIV en klass av glöd:
Ställ in elementets storlek och färg
När du har valt det element du ska pryder med ett glöd, fortsätt och lägg till alla stilar du vill ha, till exempel bakgrundsfärg, storlek och teckensnitt. Detta exempel är en blå rektangel; storleken är inställd på 147px med 90px; och bakgrundsfärgen är inställd på # 1f5afe, en kungblå. Den innehåller en marginal för att placera elementet mitt i det svarta behållarelementet.
Runt hörnen
Att skapa en rektangel med rundade hörn är lätt med CSS3. Lägg till egenskapen för radieradien i din glödklass. Kom bara ihåg att använda -webkit- och -moz-prefixen för högsta kompatibilitet.
-webkit-gränsen-radien: 15px;-moz-gränsen-radien: 15px;gränsstråle: 15px; Lägg till glöd med en rutaskugga
Glödgen själv skapas med en boxskugga. Eftersom du vill att den ska halo hela elementet och inte projektera glöden från ena sidan som en skugga, ställer du de horisontella och vertikala längderna till 0px. I det här exemplet är suddradiusen inställd på 15px och sprickans spridning är 5px, men du kan lura med de inställningarna för att bestämma hur bred och diffus du vill att glödet ska vara. Färg rgb (255,255,190) är en gul färg med RGBa alfa genomskinlighet inställd till 75 procent-rgba (255,255,190, .75). Välj en glödfärg som fungerar bäst för ditt projekt. Som med att avrunda hörnen glöm inte att använda webbläsarens prefix (-webkit- och -moz-) för bästa kompatibilitet.
-webkit-box-skugga: 0px 0px 15px 5px rgba (255, 255, 190, 75);-moz-box-skugga: 0px 0px 15px 5px rgba (255, 255, 190, 75);boxskugga: 0px 0px 15px 5px rgba (255, 255, 190, 75); Testa glödlådan
Testa den glödande rutan i en eller flera webbläsare och gör några justeringar som behövs för att ge den glödseffekt som fungerar bäst för din webbsida.
