كود الظل الطويل وطريقة استخدامه

السلام عليكم ..
كيف حالكم جميعاً , ان شاء الله الجمـيع بخــير ..
اليوم حبيت اشرح طريقة استخدام الـ Long Shadow ( الظل الطويل ) بطريقة css ..
هذه الخاصية تعطي للتصميم جمـالية روعـة ولمسة جميلة جداً ..
سنستخدم هذا الموقع المجاني لأنشاء الظل وبعدها نقوم بنسخ الكود واستخدامه في تصميمنا..

المـوقع المستخدم في الشرح ::
Long Shadows Generator - by Juani
عند فتح الموقع سنلاحظ على اليسار قائمة تساعدنا على تصميم الظل المناسب لنا ..

1. لون الخلفية
2. حجم الظل
3. حجم الشفافية
4. حجم التلاشئ
5.لون المربع
6.حجم ظل النص الي بداخل المربع
7.حجم شفافية ظل خط الي بداخل المربع
8. حجم تلاشئ النص في المربع
9. لأختيار المربع بدون خلفية
10. يظهر لنا الكود لنستخدمه

تكبير الصورة معاينة الأبعاد الأصلية.

https://2img.net/h/oi58.tinypic.com/105cqd2.png

نضغط على اظهار الكود Show Code لنرئ كيف يعمل
1. التعريف الخاص بالخلفية
2. التعريف الخاص بالمربع

تكبير الصورة معاينة الأبعاد الأصلية.

https://2img.net/h/oi58.tinypic.com/16hrw5t.png

الان لو جربنا نختار النص فقط سنلاحظ بأن المربع اصبح كبيراً واختفت الخلفية

تكبير الصورة معاينة الأبعاد الأصلية.

https://2img.net/h/oi62.tinypic.com/rkvngo.png

نشأهد الكود الخاص بالنص فقط بدون خلفية
اضغط على اظهار الكود Show code
1. ستلاحظ بأن هناك التعريف الخاص بالمربع فقط

تكبير الصورة معاينة الأبعاد الأصلية.

https://2img.net/h/oi58.tinypic.com/2aad3zm.png

غيرت الاعدادت على اليسار ولاحظ كيف تغير الظل في المربع
1. غيرت حجم الظل الخاص بالنص
2. غيرت الشفافية الخاصة بظل النص
3. غيرت التلاشئ

تكبير الصورة معاينة الأبعاد الأصلية.

https://2img.net/h/oi59.tinypic.com/jpdl6t.png

الان نجرب نغير لون الخلفية ..
1. نضع اللون المناسب لنا
2. ستلاحظ التغيير على الخلفية على اليمين

تكبير الصورة معاينة الأبعاد الأصلية.

https://2img.net/h/oi61.tinypic.com/262my5h.png

الان نجرب تغير الخلفية

1. نلغي خاصية النص فقط ليظهر لنا خيارات الخلفية
2. نغير لون الخلفية ونلاحظ التغيير

تكبير الصورة معاينة الأبعاد الأصلية.

https://2img.net/h/oi62.tinypic.com/118ltus.png

الان دعونا نأخذ الكود الى الدريم ويفر ( يمكنك استخدام المحرر المفضل لك )
ونبداً باستخدامه لتصاميمنا

نضغط على اظهار الكود Show code
1. ننسخ التعريف الخاص بالمربع بدون نسخ .shape{} لاننا سنستخدم الديف الخاص بنا

تكبير الصورة معاينة الأبعاد الأصلية.

https://2img.net/h/oi60.tinypic.com/3hefq.png

الان نذهب الى الدريم ويفر ونضيف ديف جديد ونربطه بكلاس ..

1. اضفت الكلاس الخاص بالهيدر
2. اضفت الديف في منطقة Body
3. نلاحظ بظهور النص بدون تأثير

تكبير الصورة معاينة الأبعاد الأصلية.

https://2img.net/h/oi61.tinypic.com/6fa6h0.jpg

الان نضيف التعريف الي نسخناه من الموقع ونضعه في تعريف الهيدر

1. نلصق الكود
2. نلاحظ التغيير

تكبير الصورة معاينة الأبعاد الأصلية.

https://2img.net/h/oi61.tinypic.com/dvpw0z.png

ملاحظة 1 : يمكنك التعديل على الالوان وحجم النص كما تريد
ملاحظة 2: يمكنك التعديل على الكود في الموقع ليتناسب مع تصميمك وتقوم بنسخه الى تعريف الكلاس المطلوب ..

صورة مثال حى

تكبير الصورة معاينة الأبعاد الأصلية.
كود الظل الطويل وطريقة استخدامه 2ykdnw2

https://2img.net/h/oi58.tinypic.com/2ykdnw2.png

تكبير الصورة معاينة الأبعاد الأصلية.
كود الظل الطويل وطريقة استخدامه 2s7c9bm

https://2img.net/h/oi60.tinypic.com/2s7c9bm.png

الكود المستعمل فى تلك الاشكال ؟
يعمل على : ( phpBB2-PunBB-Invision)

الكود:: .postbody{ color: #131313; background-color: #e7e5e4; letter-spacing: .15em; text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897, -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, -15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4, -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd, -23px 46px 1px #d4d2d1, -24px 48px 1px #d8d6d5, -25px 50px 1px #dbdad9, -26px 52px 1px #dfdddc, -27px 54px 1px #e2e0df, -28px 56px 1px #e4e3e2; }

السلآم عليكم
كيف الحآل يا رب بخير ع طول
كود رائع شكرا لك
حبيبتي تسلمين

السلام عليكم
شلونك ؟؟ يارب ببخير
شكرا لك على الكود
احسنتي حبيبتي واصلي
في امان الله