مرحبا بالجميع!
في التصميم الحديث ، عند إنشاء المواقع والتطبيقات ، يطبق العديد من المطورين تأثير العمق والحجم ، غالبًا ما يشيرون إلى خصائص css مثل
box-shadow و
drop-shadow . يعتقد البعض أنه
في عام 2018 هذا هو الاتجاه. في الواقع ، هناك الكثير من المواقع الأجنبية والروسية على حد سواء التي بدأت في عام 2018 في تطبيق الظلال بشكل متكرر.
في هذا الصدد ، ظهرت مؤخرًا
مجموعة صغيرة
من ظلال css البسيطة والممتعة ، والتي يتم العثور عليها غالبًا على مواقع الويب (زائد أو ناقص بضع بكسل إلى الجانب). تسمى المجموعة
Box-shadows.css . لقد تلقت بالفعل بعض المراجعات الإيجابية على الشبكة وتم تحديثها مؤخرًا إلى الإصدار 1.0.4 ، حيث ظهرت العديد من الظلال الأكثر جمالًا ، مقسمة إلى مجموعات.
بعد التحديث الأخير ، بدأت المجموعة تحتوي على أكثر من 60 خيارًا مناسبًا للظلال ، وهي رائعة للاستخدام في الجداول ، لمحتويات الصفحات الرئيسية والحاويات وأشرطة التنقل وكتل أخرى من موقعك.
الهدف الرئيسي من إنشاء هذه المجموعة هو تسهيل عمل مصممي الويب والمطورين المبتدئين في إنشاء تصميم لطيف وحديث. بفضل المجموعة ، يمكنك تبسيط العمل باستخدام الكتل وتقليل وقت اختيار ظلال css في المولد (وهو متاح أيضًا بالمناسبة). بالطبع ، من غير المحتمل أن يحتاج المطورون ذوو الخبرة إلى ذلك ، ولكن ربما يمكنهم تعلم شيء مثير للاهتمام لأنفسهم. المجموعة مفيدة لأولئك الذين لم يتمكنوا بعد من الخوض بشكل كامل في التخطيط ، لكنهم يريدون إنشاء ظلال جميلة على الأزرار والكتل والحاويات في موقعهم.
ربط الأنماط
لتوصيل ورقة أنماط ، انتقل إلى
موقع المشروع على الويب وقم بتنزيل الملف الذي تريده. ثم ، قم بإرفاق الملف بصفحة html الخاصة بك ، بعد علامة الفتح <head> ، بطريقة مناسبة لك.
<head> <link rel="stylesheet" href="/box-shadows.css"> <link rel="stylesheet" href="/box-shadows.min.css"> </head>
يمكنك استخدام
منشئ الملفات
min.css ، الذي يسمح لك بإنشاء ملفك الخاص الذي يتكون من الفئات المحددة فقط. حسنًا ، أو فقط حدد الكتلة التي تحتاجها وانسخ الظل الذي تريده إلى موقعك. سيساعد ذلك في تقليل الحمل إذا كان مشروعك يستخدم أقل من ظلين أو ثلاثة ظلال. ما عليك سوى اتباع التعليمات الموجودة على الموقع وسوف تنجح.
باستخدام الفصول
لتوصيل الظل المطلوب
بالكتلة ، ما عليك سوى إضافة فئة
bshadow مع الرقم المطلوب إليها:
<div class="bShadow-54"></div>
تأثيرات التمرير
لإنشاء تأثير تحويم
لكتلتك ، أضف الفصل الذي يعجبك بالرقم ، على سبيل المثال ،
.bShadow-1 واكتب الحرف اللاتيني
h بعد الرقم. على سبيل المثال:
<div class="bShadow-38 bShadow-1h"></div>
ألق نظرة
على مثال فئة
.bShadow . عند التمرير ، يقوم بتعيين قيم الظل للفئة المجاورة.
bShadow-1 . إذا كنت تريد ألا يظهر الظل عند التمرير أو النقر فوقه ، أضف فئة
.bSnoneالتحول السلس والرسوم المتحركة
تستخدم فئة
.bShadow بشكل افتراضي حركة سلسة في
transition: transform 0.2s ease-in-out .2s
transition: transform 0.2s ease-in-out ، ويتضمن أيضًا خاصية تحذر المتصفح من الظل القادم وتحويل الموضع
will-change: transform, box-shadow; .
استخدم هذا لإنشاء رسوم متحركة جميلة للكتل الخاصة بك. على سبيل المثال ، يمكنك إضافة صفك أو خصائصك مع تحويل:
.transform-translateY-5:hover { -webkit-transform: translateY(-5px) translateZ(0); transform: translateY(-5px) translateZ(0); }
ثم ، أضف إلى الحاوية التي تحتاجها:
<div class="bShadow transform-translateY-5 bShadow-1h"> </div> وسترى
النتيجةإضافة معلمة أقحم
لإضافة معلمة ظل داخلية ، ما عليك سوى لصق البرنامج النصي في صفحة html وتحديد الفئات التي تريد تطبيقها عليها.
على سبيل المثال.
bShadow-1 . لتحديد فئات متعددة ، افصل بينها بفواصل ، كما في المثال أدناه. لا تنس أن تضع حدا للصف!
[].forEach.call(document.querySelectorAll('.bShadow-1, .bShadow-2h, .bShadow-3'), function(node) { var bsh = getComputedStyle(node).boxShadow; node.style.boxShadow = "inset " + bsh; });
تجريبيمولد CSS Box-Shadow
تتضمن المجموعة أيضًا زيادة في عدد الفصول مع الظلال التي أنشأها المستخدم نفسه. أي أنه يمكنك استخدام
مولد الظل الكلاسيكي لاستكمال المجموعة بأنماطك الخاصة. بالنقر فوق الزر حفظ وإضافة التالي ، يمكنك إنشاء عدد لا نهائي من الفئات. يتم تعيين رقم تسلسل غير موجود في المجموعة للفئات الأولى التي تم إنشاؤها واللاحقة. يمكن بسهولة نسخ الأنماط الناتجة ولصقها في ملف css الجذر لمشروعك أو في ملف box-shadows.min.css الذي تم إنشاؤه على موقع المجموعة.
نخطط الآن لتوسيع المجموعة وتكوين حزمة npm ، ولكن هناك بعض الصعوبات الطفيفة في ذلك. لذلك ، بينما آمل أن أتلقى رابط
cdnjs والمزيد من تطوير المشروع.
GitHubPagePage