En mjuk yttre glöd som läggs till ett element på din webbsida gör att elementet sticker ut för tittaren. Använda sig av CSS3 och HTML för att applicera en glöd runt ytterkanterna på ett viktigt objekt. Effekten liknar en yttre glöd som läggs till ett objekt i Photoshop.
Skapa elementet att glöda
Glödeffekter fungerar på vilken bakgrund som helst, men de ser bäst ut på mörka bakgrunder, för då verkar glödet skimra mer. I ett rundat rektangulärt leksaksexempel placeras ett DIV-element i ett annat DIV-element med svart bakgrund. Den yttre DIV är inte nödvändig för glödet, men det är svårt att se glödet på en vit bakgrund.
Ställ in storlek och färg på elementet
När du har valt det element du ska försköna med en glöd, lägg till stilar till den, 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 kungsblå. Den innehåller en marginal för att placera elementet i mitten av det svarta behållarelementet.
Runda hörnen
Att skapa en rektangel med rundade hörn är enkelt med CSS3. Lägg till egenskapen border-radius style till din glödklass. Kom bara ihåg att använda –Webkit– och –Moz– prefix för högsta kompatibilitet.
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
gränsradie: 15 pixlar;
Lägg till glöd med en lådskugga
Själva glödet skapas med en boxskugga. Eftersom det glor hela elementet utan att projicera glödet från ena sidan som en skugga, ställer du in de horisontella och vertikala längderna till 0 pixlar.
I det här exemplet är suddighetsradien inställd på 15 pixlar och oskärpaens spridning är 5 pixlar, men du kan lura med dessa inställningar för att bestämma hur bred och diffus du vill att glödet ska vara. Färgen rgb (255,255,190) är en gul färg med RGBa alfa-transparens inställd på 75 procent—rgba (255,255,190, .75). Välj en glödfärg som fungerar bäst för ditt projekt. Glöm inte att använda webbläsarprefixen som vid avrundning av hörnen (–Webkit– och –Moz–) för bästa 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);