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  */
 -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

 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. 

 margin-top: 0\9;
 margin-left: 0\9;

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

No comments: