منتدى أنمي بنات ديزني


للبنات فقط
 
الرئيسيةاليوميةمكتبة الصورمنتدى أنمي بنات ديزني ( منشورات )س .و .جبحـثالأعضاءالمجموعاتالتسجيلدخول

شاطر | 
 

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

اذهب الى الأسفل 
كاتب الموضوعرسالة
الملكة Elsa

avatar

تاريخ التسجيل تاريخ التسجيل : 14/09/2014
العمر : 26
عدد المساهمات عدد المساهمات : 1870
نقآطي~ نقآطي~ : 9317
السٌّمعَة : 24

مُساهمةموضوع: كود الظل الطويل وطريقة استخدامه   الجمعة أكتوبر 09, 2015 1:53 am


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

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

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

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

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

http://i58.tinypic.com/105cqd2.png

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


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

http://i58.tinypic.com/16hrw5t.png

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

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

http://i62.tinypic.com/rkvngo.png

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


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

http://i58.tinypic.com/2aad3zm.png

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


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

http://i59.tinypic.com/jpdl6t.png

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


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

http://i61.tinypic.com/262my5h.png

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

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


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

http://i62.tinypic.com/118ltus.png

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


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


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

http://i60.tinypic.com/3hefq.png

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

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


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

http://i61.tinypic.com/6fa6h0.jpg

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

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


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

http://i61.tinypic.com/dvpw0z.png



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

صورة مثال حى

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

http://i58.tinypic.com/2ykdnw2.png


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

http://i60.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;  }


مشتركة بشلهه

الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://frozen.arabepro.com
كتكوتة المنتدى



تاريخ التسجيل تاريخ التسجيل : 14/09/2015
العمر : 16
عدد المساهمات عدد المساهمات : 337
نقآطي~ نقآطي~ : 5245
السٌّمعَة : 3

مُساهمةموضوع: رد: كود الظل الطويل وطريقة استخدامه   الخميس أكتوبر 15, 2015 2:14 pm

السلآم عليكم
كيف الحآل يا رب بخير ع طول
كود رائع شكرا لك
حبيبتي تسلمين
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
ﻏ̣̐ﭬــړُﺂﻧ ﺳــﭠﺂﯾﻟژ !

avatar

تاريخ التسجيل تاريخ التسجيل : 19/09/2015
العمر : 15
عدد المساهمات عدد المساهمات : 140
نقآطي~ نقآطي~ : 4687
السٌّمعَة : 0

مُساهمةموضوع: رد: كود الظل الطويل وطريقة استخدامه   السبت أكتوبر 22, 2016 3:43 am

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




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

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى أنمي بنات ديزني :: خدماتنآ آلمتنوعة :: أكوآد تطوير المنتديآت-
انتقل الى: