Posted By

neal_grosskopf on 12/08/09


Tagged

css ie jquery CSS3


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

vagrantradio
neal_grosskopf
jirimelcak


A jQuery Plugin To Create CSS3 Text-Shadows In Internet Explorer


 / Published in: jQuery
 

URL: http://www.nealgrosskopf.com/tech/thread.php?pid=61

Internet Explorer does not support a standards compliant way to create text shadows. Learn how to emulate the CSS3 feature with this jQuery plugin.

  1. $(document).ready(function(){
  2. $(".shadow-me").textShadow("#000",1,1);
  3. });
  4.  
  5.  
  6. (function ($) {
  7. $.fn.textShadow = function(shadowcolor,x,y) {
  8. return this.each(function(i){
  9. var parent = "tsw-" + Math.floor(Math.random()*100000);
  10.  
  11. //Create container
  12. $(this).wrap('<div class="text-shadow-wrapper" id="' + parent + '"></div>');
  13.  
  14. //Set height of container so that it properly overflows
  15. $("#" + parent).css("height", $(this).css("font-size")); //Math.abs()??
  16.  
  17. //Add text-shadow class to initial element
  18. $(this).addClass("text-shadow");
  19.  
  20. //Adds shadow HTML element
  21. $(this).before('<span class="shadow">' + $(this).text() + '</span>');
  22.  
  23. //Positions shadow HTML element
  24. $("#" + parent + " .shadow").css({left: x, top: y, color: shadowcolor});
  25. });
  26. };
  27. })(jQuery);

Report this snippet  

You need to login to post a comment.