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


/ Published in: jQuery

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


Copy this code and paste it in your HTML
  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);

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.