درس CSS الأقل تصميم شريط التنقل في قائمة Slick

هذه المقالة هي جزء من موقعنا "سلسلة دروس HTML5 / CSS3" - مكرسة لمساعدتك في جعلك أفضل مصمم و / أو مطور. انقر هنا لرؤية المزيد من المقالات من نفس السلسلة.

عالم تصميم وتطوير العالم يتطور بسرعة كبيرة. يمكننا أن نرى ذلك في العدد الكبير من الأشياء الجديدة التي يتم إطلاقها في المجتمع (تقريبًا) يوميًا ، سواء كانت تطبيقات أو أطر عمل جديدة تساعد على جعل عملنا اليومي كمصممي أو مطورين ويب أكثر فاعلية وكفاءة.

أحد الأشياء التي لفتت انتباهي من تطور تصميم الويب اليوم هو LESS ، وهي لغة صفحات أنماط قابلة للبرمجة تعمل على توسيع الطريقة التي نكتب بها بناء جملة CSS من خلال الجمع بين بعض مفاهيم البرمجة مثل المتغيرات والخلطات والوظائف والعمليات.

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

حسنًا ، دعنا نقوم ببعض التمارين باستخدام LESS للحصول على رؤية أفضل لما تقدمه.

تصميم بأقل

في هذا البرنامج التعليمي ، سنحاول تصميم شريط التنقل في قائمة بقعة مستوحى من شريط Apple.com. نظرًا لأنه منتج "مستوحى" فقط من المنتج الأصلي ، فلاحظ أن منتجنا التعليمي النهائي لن يكون بالضبط نفس المنتج الأصلي.

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

• أقل هو أكثر: اجعل الترميز CSS أسهل مع أقل
• اكتب CSS أفضل مع أقل
• مقدمة لأقل ، ومقارنة ساس

تجهيز

بادئ ذي بدء ، هناك بعض الأشياء الأساسية التي نحتاجها لهذا المشروع الصغير ، وهي:

1. محرر نصوص أقل

سنحتاج إلى محرر نصوص لتشفير قائمة التنقل. ومع ذلك ، فإن معظم برامج تحرير النصوص المتاحة في السوق اليوم (مثل Dreamweaver و Notepad ++ و InType و Sublime Text 2) لم تدعم حتى الآن .أقل امتدادات الملفات افتراضيًا ، لذلك قد لا يتم تمييز بناء الجملة جيدًا.

لذلك ، لغرض هذا البرنامج التعليمي ، سوف نستخدم محرر نصوص خاص لـ LESS المسمى ChrunchApp. يمكننا فتح وتحرير .أقل تمديد الملفات وتجميعها في CSS ثابت باستخدام هذا التطبيق. نظرًا لأنه تطبيق Adobe Air ، يمكن تثبيته في كل نظام تشغيل رئيسي لسطح المكتب (Win و OSX و Linux).

بالنسبة لمحرر HTML ، يمكنك استخدام أي محرر تشعر بالارتياح بالفعل لاستخدامه الآن. أنا شخصيا أحب نص سامية 2.

2. Less.js

بعد ذلك ، قم بتنزيل LESS JavaScript Library من موقعه الرسمي على الإنترنت ، الإصدار الحالي هو 1.2.1. ضعه داخل مجلد التدريب الخاص بك لهذا الغرض.

ثم اربط الملف بمستند HTML.

3. بادئة خالية

سنستخدم أيضًا بعض ميزات CSS3 لإنجاز بعض التأثيرات في قائمة التنقل التي ستتضمن بادئات البائعين (-MOZ-, -س-, -بكت-) ليتم عرضه بشكل صحيح عبر متصفحات مختلفة. ومع ذلك ، أنا شخصياً لا أفضّل استخدام البادئات ، حيث إنها ستنتفخ ملف CSS.

لهذا السبب ، قررت استخدام مكتبة جافا سكريبت خالية من البادئة ، والتي أنشأتها Lea Verou والتي ستتعامل مع بادئات البائع تلقائيًا في الخلفية. لذلك سنحتاج فقط لكتابة بناء الجملة الرسمي من W3C.

قم بتنزيل الملف وربطه بملف HTML.

حسنًا ، نحن جميعًا نصنع ؛ الآن لنبدأ في هيكلة ترميز HTML.

ترميز HTML

الملاحة بسيط جدا. سيكون لديه خمسة قوائم ملفوفة داخل علامة قائمة غير مرتبة. افتح محرر HTML المفضل لديك ووضع العلامات التالية:

أقل التصميم

في هذا القسم ، سنبدأ في تصميم التنقل بلغة أقل. بالنسبة لأولئك الجدد على لغة البرمجة ، فإن كتابة بناء جملة CSS مع LESS ستشعر ببعض الغرابة والحرج. ولكن لا داعي للقلق ، فبمجرد ممارسة بعض الممارسات ، ستكون بالتأكيد أكثر متعة من الطريقة التي نكتب بها CSS خالص (إنها تجربتي ، إنها أيضًا تسبب الإدمان قليلاً).

دعنا نتفحص أسلوب التنقل من مصدر إلهامنا.

كما نرى في لقطة الشاشة أعلاه ، يحتوي التنقل في Apple.com على الأنماط الرئيسية الستة التالية:

• ظل
• الحدود
• مقسم
• التدرجات
• تأثير التحويم
• نص

سنقوم بتخزين هذه الأنماط وحفظها في الداخل config.less كنمط افتراضي ترتيب؛ بعض المصممين قد تسمية أيضا lib.css هذا يقف ل مكتبة. اربط هذا الملف بمستندنا.

تأكد من وضعها قبل مكتبة جافا سكريبت LESS.

تحديد قاعدة اللون مع المتغيرات

في هذه الخطوة ، سنحدد قاعدة ألوان التنقل باستخدام المتغيرات. تم الإعلان عن المتغير في LESS باستخدام @ رمز.

theme: # 555؛

هذه @موضوع المتغير هو لوننا القياسية. سوف نستخدمها بكل الطرق الممكنة لتصميم نظام ألوان مثالي ، ومن المتوقع أن تصبح تركيبة اللون أكثر اتساقًا.

تحديد نمط الظل الافتراضي مع Mixins

واحدة من الميزات التي أحبها من LESS هي Mixins. إنه مفهوم برمجة يخزن العديد من الأنماط المحددة مسبقًا والتي في LESS يمكن أن توارث في الفصول أو المعرفات لاحقًا في ورقة الأنماط.

.shadow box-shadow: 0 1px 2px 0theme؛ 

في الكود أعلاه ، لم أضمّن الإصدار السابق من مربع الظل الخاصية ، حيث أن المكتبة الخالية من البادئة ستتعامل معها تلقائيًا. أيضا ، لون الظل مورث من لون متغير السمة.

تحديد نمط الحدود مع الخلطات حدودي

سيحتاج شريط التنقل إلى لون حدود متميز مع زاوية مستديرة قليلاً. يمكننا تجميع نمط الحدود باستخدام خلطات معلمية. لديه بالفعل نفس وظائف Mixins ، والفرق الوحيد هو أنه يحتوي أيضًا على معلمات قابلة للتغيير وبالتالي فإن القيم قابلة للتعديل.

.border (radius: 3px) border-radius:radius؛ الحد: 1px solidtheme - # 050505؛ 

في الكود أعلاه ، قمنا بإعداد الحدود الافتراضية @نصف القطر إلى عن على 3PX وكما ذكرنا من قبل ، يمكن تغيير هذه القيمة في وقت لاحق.

تحديد التدرج ، مقسم ، وتحوم الاسلوب مع العملية

العملية هي ببساطة لغة برمجة حيث يمكننا تطبيق صيغة رياضية مثل الجمع والقسمة والطرح والضرب للحصول على النتيجة المرجوة. دعنا نلقي نظرة على الكود التالي:

.divider border-style: solid؛ عرض الحدود: 0 1px 0 1px ؛ لون الحدود: transparenttheme - # 111 transparenttheme + # 333؛ 

في الكود أعلاه نطرح @موضوع متغير من قبل # 111, بهذه الطريقة سيكون إخراج لون الحدود الأيسر أغمق قليلاً. بينما يتم اشتقاق اللون الحد الأيمن من إضافة @موضوع متغير مع اللون عرافة # 333, سيكون الإخراج أخف وزنا.

نظام الألوان المستوى

حسنًا ، بالنسبة للبعض منكم قد يكون مرتبكًا مع الصيغ ، فلنبحث في مخطط نظام الألوان أدناه للحصول على فهم أفضل:

الحد الأقصى لهجة الظلام هو # 000 (أسود) ، في حين أن الحد الأقصى لهجة الضوء هو # الاتحاد الفرنسي (أبيض) وقاعدة اللون الحالية لدينا # 555. لذلك ، إذا كنا نريد أن تكون قاعدة اللون 3 مستويات أكثر قتامة من الحالي ، يمكننا ببساطة طرحها من قبل # 333. ويمكن أيضا أن تطبق بنفس الطريقة لتفتيح اللون.

بعد ذلك ، سوف نعمل على لون التدرج.

.gradient background: linear-gradient (top،theme + # 252525 0٪،theme + # 171717 50٪،them - # 010101 51٪،them + # 151515 100٪)؛  .hovereffect background: gradient-linear (top،theme - # 010101 0٪،theme - # 121212 50٪،them - # 222222 51٪،them - # 050505 100٪)؛ 

تحديد نمط النص مع الحرس Mixins

نحن نخطط أن يكون لديك لونان على شريط التنقل واللون الداكن ne وضوء واحد. نحن نطبق بيانين شرطيين للنص باستخدام Guard Mixins.

أولاً ، عندما يتم إعطاء النص لونًا له خفة تساوي أو تزيد عن 50٪ ، فإن نص الظل يجب أن تتحول الظلام ، في هذا اللون القضية # 000000.

.textcolor (txtcolor) عندما (lightness (txtcolor)> = 50٪) color:txtcolor؛ text-shadow: 1px 1px 0px # 000000؛ 

ثم ، عندما يتم إعطاء النص لونًا ، تكون نسبة الإضاءة أقل من 50٪ نص الظل سوف تتحول بيضاء.

.textcolor (txtcolor) عند (lightness (txtcolor) 
استيراد أقل
 
دعونا الآن إنشاء آخر .أقل ملف اسمه styles.less والاستيراد config.less بداخله:
 
import "config.less" ؛
 
إضافة عائلة الخط
 
لكي يبدو شريط التنقل أكثر جاذبية ، سنضم عائلة خطوط جديدة تستخدم @ الخط وجه قاعدة. بشكل مفاجئ, @ الخط وجه القاعدة مدعومة بالفعل منذ IE6!
 
هذه المرة سوف نستخدم الخط Asap. قم بتنزيله من مجموعة خطوط Font Squirrel. ثم أدخل الأنماط التالية في موقعنا الذي تم إنشاؤه حديثًا styles.less ملف.
 
@ font-face font-family: 'AsapRegular'؛ SRC: رابط ( 'الخطوط / في اسرع وقت ممكن، منتظم، webfont.eot')؛ src: تنسيق url ('fonts / Asap-Regular-webfont.eot؟ #iefix') ('embent-opentype') ، url ('fonts / Asap-Regular-webfont.woff') format ('woff') ، url ('fonts / Asap-Regular-webfont.ttf') format ('truetype') ، url ('fonts / Asap-Regular-webfont.svg # AsapRegular') format ('svg')؛ وزن الخط: عادي ؛ نمط الخط: عادي.  
 
تصميم الجسم مع وظائف اللون
 
الآن ، سنقدم لون الخلفية إلى الجسم (يجب أن تكون أخف من قاعدة اللون) بالإضافة إلى تحديد حجم الخط وحجمه. يمكننا التعامل مع التأثير باستخدام وظائف اللون:
 
الكود التالي سوف يخفف الخلفية بنسبة 30٪.
 
body background: lighten (theme، 30٪)؛ font-family: AsapRegular، sans-serif؛ حجم الخط: 11pt ؛ 
 
 
 
تصميم التنقل مع القاعدة المتداخلة
 
في LESS ، نحن قادرون على تداخل الأنماط مباشرة أسفل الأصل. دعنا نلقي نظرة على الكود أدناه.
 
ال الملاحة سيتم منح العلامة التالية التي تحتوي على جميع العناصر اللازمة للتنقل الأنماط التالية.
 
nav margin: 50px auto 0؛ العرض: 788 بكسل ؛ الارتفاع: 45 بكسل ؛ .الحدود؛ .ظل؛ 
 
لاحظ أنه ، بدلاً من إعطاء مجموعة من قواعد CSS مرة أخرى ، قمت فقط بإدخال .الحدود لإعطاء نمط الحدود و .ظل لإضافة الظل. في الحالات الحقيقية ، يمكن إعادة استخدام مجموعة الطبقات هذه في عنصر آخر أيضًا ، أينما دعت الحاجة.
 
 
 
بعد ذلك ، نحن نقدم أنماط ل المجاهدين داخل ال الملاحة لديك الصفر الحشو والهامش. منذ وقت ليس ببعيد ، سنتناول الأسلوب من خلال كتابة شيء مثل هذا:
 
nav ... nav ul ...
 
لا حرج في هذا النهج ، في الواقع ، اعتدت أن أفعل ذلك في كل مرة وأنا مرتاح جداً لذلك. ومع ذلك ، فإن هذه الطريقة ، كما قال العديد من مصمم CSS ، يتم التحقق منها وفي بعض الحالات ، لا يمكن التحكم فيها بسهولة.
 
الآن ، يمكننا أن نفعل شيئا مثل هذا:
 
nav margin: 50px auto 0؛ العرض: 788 بكسل ؛ الارتفاع: 45 بكسل ؛ .الحدود؛ .ظل؛ ul padding: 0؛ الهامش: 0 
 
 
 
ثم سيتم عرض القائمة في صف واحد باستخدام عرض: مضمنة خاصية.
 
nav margin: 50px auto 0؛ العرض: 788 بكسل ؛ الارتفاع: 45 بكسل ؛ .الحدود؛ .ظل؛ ul padding: 0؛ الهامش: 0 li display: inline؛ 
 
 
 
في بناء الجملة أدناه ، نحدد نمط علامة ربط القائمة ونضيف أنماطنا المحددة مسبقًا ، وهي: .لون الخط, .مقسم, .الانحدار.
 
nav margin: 50px auto 0؛ العرض: 788 بكسل ؛ الارتفاع: 45 بكسل ؛ .الحدود؛ .ظل؛ ul padding: 0؛ الهامش: 0 li display: inline؛ زخرفة النص: لا شيء ؛ عرض: كتلة مضمنة. تعويم: اليسار؛ العرض: 156 بكسل ؛ الارتفاع: 45 بكسل ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 300 ٪ ؛ .textcolor (F2F2F2 #)؛ // يمكنك تغيير هذا الخط. .الانحدار؛ 
 
في الكود أعلاه نطبق اللون السداسي F2F2F2 # حيث يعتبر الخفة أعلى من 50 ٪ ، لذلك نتوقع أن نرى الظل يصبح الظلام (تلقائيًا). ما تبقى من الشفرة أنا متأكد من أنها تشرح نفسها بنفسها.
 
 
 
ومع ذلك ، إذا نظرنا إلى النتيجة الحالية أعلاه ، فكل قائمة من القائمة لها فواصل ، مما يؤدي إلى تدفق القسم الأخير إلى الأسفل. لذلك نحن بحاجة إلى حذف نمط الحدود للطفل الأول والأخير من شريط التنقل.
 
nav margin: 50px auto 0؛ العرض: 788 بكسل ؛ الارتفاع: 45 بكسل ؛ .الحدود؛ .ظل؛ ul padding: 0؛ الهامش: 0 li display: inline؛ زخرفة النص: لا شيء ؛ عرض: كتلة مضمنة. تعويم: اليسار؛ العرض: 156 بكسل ؛ الارتفاع: 45 بكسل ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 300 ٪ ؛ .textcolor (F2F2F2 #)؛ // يمكنك تغيير هذا الخط. .الانحدار؛  li: first-child a border-left: none؛  li: last-child a border-right: none؛ 
 
 
 
تحوم الدولة
 
في الخطوة الأخيرة ، سنضيف تأثير التحويم. في أقل يمكننا أن نضيف شبه عنصر مثل :يحوم استخدام و رمز.
 
nav margin: 50px auto 0؛ العرض: 788 بكسل ؛ الارتفاع: 45 بكسل ؛ .الحدود؛ .ظل؛ ul padding: 0؛ الهامش: 0 li display: inline؛ زخرفة النص: لا شيء ؛ عرض: كتلة مضمنة. تعويم: اليسار؛ العرض: 156 بكسل ؛ الارتفاع: 45 بكسل ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 300 ٪ ؛ .textcolor (F2F2F2 #)؛ // يمكنك تغيير هذا الخط. .الانحدار؛ &: hover .hovereffect؛  li: first-child a border-left: none؛  li: last-child a border-right: none؛ 
 
 
 
تغيير سمة اللون
 
هنا هو الجزء الرائع من LESS. إذا كنا نريد تغيير النسق العام للون ، فيمكننا القيام بذلك في تغييرات أقل في السطر مما نحتاجه في CSS الخالص.
 
في هذه الحالة ، سوف أقوم بتغيير لون التنقل ليكون أخف قليلاً. ببساطة تغيير السطرين التاليين.
 
theme: #ccc؛ //غير هذا
 
.textcolor (رقم 555)؛ // وهذا
 
وهنا هي النتيجة.
 
 
 
ترجمة LESS إلى CSS
 
عندما لا نزال نستخدم JavaScript LESS ، فسوف يتم الاستيلاء على .أقل ملف وترجمته إلى CSS ثابت بحيث يمكن للمستعرض القياسي تفسيره. هذه هي وظيفة مزدوجة في جانب العميل ، ناهيك عن عرض النطاق الترددي الزائد والنفايات. النقطة الأساسية في LESS هي في سير العمل لتبسيط ممارستنا في تجميع CSS ثابت لتكون أكثر ديناميكية وقابلة للبرمجة.
 
لذلك ، عندما نكون على وشك وضع شريط التنقل مباشرًا على موقع الويب ، من المهم تجميع ملف LESS في CSS ثابت.
 
انقر على أزمة ذلك! زر كبير.
 
 
 
احفظ .less في ملف التمرين ، اربطه بمستند HTML وفك الارتباط .أقل و less.js ملف من المستند.
 
 .shadow box-shadow: 0 1px 2px 0 # 555555؛  .divider border-style: solid؛ عرض الحدود: 0 1px 0 1px ؛ الحدود اللون: شفاف # 444444 transparent # 888888 ؛  .gradient background: gradient-linear (top، # 7a7a7a 0٪، # 6c6c6c 50٪، # 545454 51٪، # 6a6a6a 100٪)؛  .hovereffect background: linear-gradient (top، # 545454 0٪، # 434343 50٪، # 333333 51٪، # 505050 100٪)؛  @ font-face font-family: 'AsapRegular'؛ src: url ('fonts / Asap-Regular-webfont.eot') ؛ src: تنسيق url ('fonts / Asap-Regular-webfont.eot؟ #iefix') ('embent-opentype') ، تنسيق url ('fonts / Asap-Regular-webfont.woff') (url) ('fonts / Asap-Regular-webfont.ttf') format ('truetype') ، url ('fonts / Asap-Regular-webfont.svg # AsapRegular') format ('svg')؛ وزن الخط: عادي ؛ نمط الخط: عادي.  الجسم الخلفية: # a2a2a2؛ font-family: AsapRegular، sans-serif؛ حجم الخط: 11pt ؛  nav margin: 50px auto 0؛ العرض: 788 بكسل ؛ الارتفاع: 45 بكسل ؛ دائرة نصف قطرها الحدود: 3px ؛ الحدود: 1px صلب # 505050 ؛ box-shadow: 0 1px 2px 0 # 555555؛  nav ul padding: 0؛ الهامش: 0  nav ul li display: inline؛  nav ul li a text-decoration: none؛ عرض: كتلة مضمنة. تعويم: اليسار؛ العرض: 156 بكسل ؛ الارتفاع: 45 بكسل ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 300 ٪ ؛ اللون: # f2f2f2 ؛ text-shadow: 1px 1px 0px # 000000؛ نمط الحدود: الصلبة. عرض الحدود: 0 1px 0 1px ؛ الحدود اللون: شفاف # 444444 transparent # 888888 ؛ الخلفية: التدرج الخطي (أعلى ، # 7a7a7a 0٪ ، # 6c6c6c 50٪ ، # 545454 51٪ ، # 6a6a6a 100٪) ؛  nav ul li a: hover background: linear-gradient (top، # 545454 0٪، # 434343 50٪، # 333333 51٪، # 505050 100٪)؛  nav ul li: first-child a border-left: none؛  nav ul li: last-child a border-right: none؛  
 
دعنا نلقي نظرة على النتيجة مرة أخرى.
 
 
 
وقد انتهينا ، لا تتردد في تجربة ذلك.
 
استنتاج
 
لقد تعلمنا أشياء كثيرة عن اللغة الأقل اليوم ، مثل:
 

• المتغيرات.
• Mixins
• خلطات معلمية
• عمليات
• حراسة الخلطات
• والقواعد المتداخلة

على الرغم من أن هناك العديد من الأشياء التي يمكن تغطيتها بشكل أكبر والعديد من الاحتمالات لعرضها وشرحها ، نأمل أن تستمتع بهذا البرنامج التعليمي الأساسي.

• عرض
• تحميل المصدر