craigsworks.com - Support Forum

Full Version: qTip drop shadows
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi all,

I have created the shadow for this tooltip by using the callback function, but this does not give the exact look and feel of the normal shadow.

I would like to know to know is there any other way to acheive this shadow.

Thanks
Babu Pca
baabupca, what shadow are you referring to?
(11th February 14:15)Craig Wrote: [ -> ]baabupca, what shadow are you referring to?

Hi,
I have used the following jquery.shadow.js plugin for applying the shadow
$(selector).dropshadow();
Ah using another jQuery plugin, I see. That sounds like it could slow down the page a lot. You could try a trick I picked up over from phpied.com using CSS:

CSS Code
.shadow {
  /* offset left, top, thickness, color with alpha */
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  /* IE */
  filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray');
  /* slightly different syntax for IE8 */
  -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray')";
}


Granted, the shadows aren't as nice in IE as those WebKit and Mozilla browsers, and it's supported could be limited. Still it falls back nicely in older browsers since it uses CSs, and has minimal performance effect.

For more details and filters, checkout the full article: http://www.phpied.com/css-performance-ui...er-images/
Thanks for this. I want to find a css-way for rounded corner without some pictures.
Reference URL's