مرحبا بالجميع!
بالتأكيد ، لاحظ بعضكم أن المواقع المختلفة تستخدم نفس نوع الظل تقريبًا في الكتل ولوحات التنقل والحاويات الأخرى ، بالإضافة إلى أو نقصان بضع وحدات بكسل في اتجاه الشفافية. لقد قمت بتحليل عدد من المواقع الشعبية ، سواء الخاصة بنا أو الأجنبية ، وحاولت جمع معاملات الظلال المستخدمة في أقرب مجموعة ممكنة أو مكتبة واحدة. لمن هو أكثر ملاءمة. آمل أن يأتي شخص ما في متناول اليدين.
الهدف الرئيسي من المشروع هو تسهيل عمل مصممي الويب والمطورين المبتدئين في إنشاء تصميم لطيف وحديث. ربما سيرسم المصممون ذوو الخبرة لأنفسهم شيئًا مثيرًا للاهتمام من هذا التطور.
ستكون المكتبة ملائمة لأولئك الذين لم يتح لهم الوقت حتى الآن للخوض بشكل كامل في التصميم ، ولكنهم يريدون إنشاء ظلال جميلة على الأزرار والكتل ، وما إلى ذلك. وبالتالي ، يمكنك تبسيط العمل باستخدام الكتل وتقليل وقت اختيار ظلال css في المولد.
Box-shadows.css
Box-shadows.css عبارة عن مجموعة من ظلال css البسيطة والجميلة (box-shadow) لمشاريعك. يستخدم الفصل الرئيسي فئة
.bShadow البسيطة. تتضمن المجموعة الآن أكثر من 50 خيارًا ذا صلة للظلال مع رقم ، بالإضافة إلى ثلاث فئات منفصلة
.bShadow و
.bShadow-light و
.bShadow-inset . إنها رائعة للاستخدام في الجداول ، لمحتويات الصفحات الرئيسية والحاويات والملاحة وكتل أخرى من موقعك.
من خلال قمع عدد من الأسئلة ، سأشرح على الفور سبب استخدام الأرقام ، وليس الأسماء أو الفئات مثل
bShadow-01040-00 .
لا تستخدم المجموعة أسماء مستقلة ، كما هو الحال في animate.css ، نظرًا لأنها غير مقبولة بعض الشيء في هذا المشروع. يزداد ظل الكتل بشكل متزايد ، مع انحرافات مختلفة ، وبسبب تسلسل الأرقام ، يمكنك اختيار الخيار الأفضل لنفسك ، دون حفظ الأسماء الفردية. هذا يبسط العمل مع المجموعة بشكل كبير.
تحتوي المجموعة على
عدد من الميزات الأخرى ، على سبيل المثال ، استخدام
تأثيرات التمرير ، مع التبديل السلس بين الظلال.
وظائف إضافية
موقع المشروع بسيط بصريًا ، ولكنه يحتوي على وظائف كافية لتخصيص وتحديد الفئات والأنماط اللازمة. الموقع مكتوب باللغة الإنجليزية ، ولكن بالنسبة لأولئك الذين لا يجيدون هذه اللغة بعد ، هناك تحول إلى اللغة الروسية.
اختيار الظل
يحتوي الموقع على وظيفة معاينة يمكنك من خلالها تحديد لون الخلفية وحاوية موقعك لمزيد من التحديد للظلال. يتم تحديد الظلال والفئات عن طريق اختيار الخيارات أو التمرير فوق الكتل. يتم عرض النتيجة كظل حاوية الموقع الرئيسية.
Min.css مولد الملفات
يحتوي الموقع أيضًا
على مولد ملفات box-shadows.min.css مع تعليمات تسمح للمستخدم بإنشاء ملفه الخاص ، والذي يتكون فقط من الفئات التي يختارها. سيساعد ذلك على تقليل الحمل على الموقع إذا كان مشروعك يستخدم أقل من ظلين أو ثلاثة ظلال.
مولد CSS Box-Shadow
يمكنك استخدام
مولد css box-shadow الكلاسيكي لاستكمال مجموعتك بأنماطك الخاصة. بالنقر فوق الزر حفظ وإضافة التالي ، يمكنك إنشاء عدد لا نهائي من الفئات. يتم تعيين رقم تسلسلي ليس جزءًا من المجموعة للفئات الأولى التي تم إنشاؤها واللاحقة. يمكنك نسخ الأنماط الناتجة ولصقها في ملف css الجذر أو ملف ظلال المربع الذي تم إنشاؤه على الموقع.
min.css .
جرب التجربة. هذه وظيفة مثيرة للاهتمام حقا.
الآن التطوير قيد التطوير ومجموعة 200 نجمة على GitHub ، لربط cdnjs. أتمنى لك استخدامًا طيبًا ونجاحًا إبداعيًا. إذا كانت لديك اقتراحات أو تعليقات أو اقتراحات لتحسين المشروع ، فاكتب في التعليقات.
جيثب ·
الموقع الإلكتروني