الظلال المسطحة باستخدام الجيكويري

السلام عليكم و رحمة الله و بركاته،

التصاميم المسطحة أو ما يعرف “بالفلات ديزاين Flat Design”، تصاميم تتميز بالبساطة و القوة في نفس الوقت، تصاميم خالية من كثرة الظلال، تدرجات الألوان، حدود… (سيكون لنا عودة مع التصاميم المسطحة بالتفصيل في مواضيعنا القادمة إن شاء الله).

من بين العناصر الأكثر استخداما في إطار التصميم المسطح، نذكر الظلال المطولة أو (الظلال المسطحة Flat Shadow)، ظلال تضفي رونقا و جمالية عند إضافتها بموقعك. و بعيدا عن تعقيدات الفوتوشوب لعمل مثل هذه الحركات، سأشرح اليوم كيفية الاستفادة من إضافة جميلة، ستساعد في إضافة الظلال المسطة لأي عنصر من العناصر داخل موقعك فقط بتطبيق بعض الحركات البسيطة. لنبدأ على بركة الله.

مثال مباشرتحميل المثال

استخدام الظلال المسطحة Flat Shadow.js :

لاستخدام الظلال المسطحة، قم بإضافة مكتبة jQuery و Flat Shadow بموقعك، و ذلك بإضافة الرابطين التاليين قبل الوسم <head/> :

1 2	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="path/js/flatshadow.min.js"></script>

لا تنسى تغيير Path برابط المسار الذي رفعت إليه الملف flatshadow.min.js.

الآن لنفترض أن لديك عنصر ما (نص مثلا) تريد إضافة الظلال المسطحة عليه، أول شيء تقوم به هو إضافة الفئة التالية بالعنصر المرغوب في تعديله :

1	class="geek-shadow"

ليصبح بهذا الشكل مثلا :

1	<div class="geek-shadow">مهووس الويب</div>

نقوم بعد ذلك بتنسيق العنصر من خلال إضافة كود CSS التالي :

1 2 3 4 5 6 7 8 9

.geek-shadow {  padding:23px 28px;  font-size: 35px;  font-weight: bold;  display: inline-block;  line-height: 100%;  overflow: hidden;  margin-right: 15px; }

هل هذا كل شيء ؟ لا، حتى يتم تطبيق الظل المسطح على العنصر المختار، يجب إضافة كود الجافاسكربت التالي قبل الوسم <body/> :

1 2 3 4 5 6

<script type="text/javascript">  $(".geek-shadow").flatshadow({  color: "#3498DB",  angle: "SW"  });  </script>

الآن فقط سيتم إضافة ظل مسطح على عبارة “مهووس الويب”، اللون سيكون أزرق، و اتجاه الظل سيكون جنوب غربي.

تجدر الإضارة إلى أن الاستخدام السابق للإضافة هو استخدام افتراضي، أي أن كل عنصر داخل موقعك تضيف له الفئة geek-shadow، سيكون له نفس اللون، و نفس اتجاه الظل، لكن هناك استخدام آخر مخصص للإضافة.

الاستخدام المخصص لإضافة الظلال المسطحة :

يمكن تخصيص الأمر أكثر، و ذلك بإعطاء كل عنصر مثلا لون معين و اتجاه ظل خاص به، لذلك نستحدم الخاصية data.

ففي المثال السابق، لنفترض أن لدينا ثلاث عناصر “مهووس الويب”، و نريد تخصيص إحداها بلون معين و اتجاه ظل خاص، كيف سيكون الكود ؟ ببساطة على الشكل التالي :

1	<div data-color="#f29200" data-angle="SE" class="geek-shadow">مهووس الويب</div>

•  data-color : لتحديد لون العنصر؛
• data-angle : لتحديد اتجاه الظل.

هناك مجموعة من الاتجاهات يمكن استخدامها :

1. N : ظل ناحية الشمال؛
2. E : ظل ناحية الشرق؛
3. W : ظل ناحية الغرب؛
4. S : ظل ناحية الجنوب؛
5. NE : ظل ناحية الشمال الشرقي؛
6. SE : ظل ناحية الجنوب الشرقي؛
7. NW : ظل ناحية الشمال الغربي؛
8. SW : ظل ناحية الجنوب الغربي.

مثال مباشرتحميل المثال

بهذا نكون قد أنهينا موضوع اليوم، أتمنى أن يكون عند حسن ظنكم، إذا واجهتكم أي مشاكل في التطبيق، يمكنكم الاستعانة بالمثال المباشر، فهو جاهز للتحميل، أو ترك تعليق بالمشكل، و إن شاء الله اقوم بحله. تحياتي.

Posted in: