Hur lägger du till en glöd till ett webbsideelement med CSS?

En mjuk yttre glöd som läggs till ett element på din webbsida gör att elementet sticker ut för tittaren. Använd CSS3 och HTML för att applicera en glöd runt de yttre kanterna 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öden skimra mer. rektangulär låda med runda hörn, ett DIV-element placeras i ett annat DIV-element med svart bakgrund. Den yttre DIV-en är inte nödvändig för glöden, men det är svårt att se glöden på en vit bakgrund.

Ställ in elementets storlek och färg

När du har valt elementet du ska försköna med en glöd, lägg till st yles till det, som bakgrundsfärg, storlek och teckensnitt.

Detta exempel är en blå rektangel; storleken är inställd på 147px x 90px; och bakgrundsfärgen är inställd på #1f5afe, en kunglig blå. Den innehåller en marginal för att placera elementet i mitten av det svarta behållarelementet.

class="ql-syntax">

Runt hörnen

Att skapa en rektangel med rundade hörn är lätt 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;

kantradie: 15px;

 
   Add the Glow With a Box Shadow  
  Själva glöden skapas med en boxskugga.  Eftersom den halos hela elementet utan att projicera glöden från ena sidan som en skugga, ställ in de horisontella och vertikala längderna till 0px.  
  I det här exemplet är oskärpa radien inställd på 15px och spridningen av oskärpan är 5px, men du kan pilla med dessa inställningar för att bestämma hur bred och diffus du vill att glöden 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.  Som med att runda hörnen, glöm inte att använda webbläsarens prefix (–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);