My Technical Notes

Tuesday, 19 March 2013

Adding Green Glow to a JQuery UI Button

My solution is to use the CSS box-shadow property for the standards compliant browsers and to use DXImageTransform.Microsoft.Glow for IE8 and below.

The following is my css:


/* add this class to an element to make it glow  */
.glow 
{
 -moz-box-shadow: 0 0 3px 4px #4F8F27;
 -webkit-box-shadow: 0 0 3px 4px #4F8F27;
 box-shadow: 0 0 3px 4px #4F8F27;
 filter: progid:DXImageTransform.Microsoft.Glow(Strength=4, Color='#4F8F27')\9; 
}

/* 

#add-glow-to-me is the element we will jquery buttonize, note that the 
margin size is the same as the extend of our glow

*/
#add-glow-to-me
{
 margin-top: 4px;
 margin-left: 4px;
}

/* 

for IE8 and below, we need to remove the margin, because the DXImageTransform 
statement will take an additional 4px, whereas on the standards compliant ones
the box-shadow property does not take additional pixels. 

*/
#add-glow-to-me.glow
{
 margin-top: 0\9;
 margin-left: 0\9;
}
a

The full solution can be downloaded from here: HtmlPage_Glow_Green.html

No comments: