إضافة ظل طويل للخطوط والأيقونات add long shadow for icons adn texts with jquery and css3

السلام عليكم ورحمة الله وبركاته
مع ظهور خطوط الأيقونات وتقنيات css3 الجديدة أصبح يتم الاستعاضة عن الكثير من الصور بتقنيات الويب الجديدة ومما شاع مؤخراً استخدام ظلال طويلة للأيقونات والنصوص باستخدام css3
وسأضع لكم اليوم طريقة باستخدام jQuery و خاصية data في html لإضافة الظلال بسلاسة
صورة مثال :

قمت بعمل كود جافا سكربت صغير أحببت أن أشارككم إياه لإضافة ظل طويل
الكود هو

    $('[data-shadow]').each(function(i, value) {

        var t = $(this).data('shadow');

        var n, sh = "",long = 90;        

        for( n = 1 ; n <= long ; n++ ){

            sh = sh + n + "px "+n+"px "+ t; 

            if( n != long ) sh = sh +", ";

        }

    

        $(this).css("text-shadow",sh);

        $(this).css("position","static");

    });

طريقة الاستخدام
داخل أي وسم html أضف الخاصية data-shadow وقيمة هذه الخاصية تمثل لون الظل الذي تريده
مثلاً

tahasoft

حيث القيمة #C19307 هي لون الظل ويمكن كتابته بأي طريقة مثلاً كتابة القيمة red, blue, orange,... الخ أو كتابته بالطريقة rgb(255, 197, 10)
ملاحظة:
المربع الذي يحوي نص أو أيقونة لها ظل طويل يجب إضافة تنسيق css له من أجل أن لا يخرج الظل خارج المربع وهي

overflow:hidden;

في الرابط التالي مثال مع استخدام bootstrap وبعض التنسيقات
الرابط للمعاينة لكل من النتيجة والكود:
http://www.bootply.com/tfm5zSLVGm