الصفحة الرئيسية / إنترنت/ Html بأسلوب التفاح. CSS أقل: قوائم نمط Apple

أتش تي أم أل في أسلوب التفاح. CSS أقل: قوائم نمط Apple

العديد من العملاء ، يصفون رغباتهم فيما يتعلق بالموقع المستقبلي ، يعبرون عن أنفسهم بإيجاز: "نريد شيئًا على طراز Apple!". في رأيهم ، يجب أن تعطي هذه الإجابة لفناني الأداء معلومات شاملة ، ونقطها على الفور بحرف "i" وتزيل أي غموض. لكن في الواقع ، بالطبع ، كل شيء أكثر تعقيدًا. بعد كل شيء ، يمكن لأي شيء أن يثير إعجاب أي شخص بأسلوب Apple - عرض تقديمي لجهاز لوحي جديد ، أو صندوق iPhone أبيض بسيط ، أو موقع ويب Apple نفسه. والشيء الأكثر هجومًا هو ، على الأرجح ، قول "افعل ذلك بأسلوب Apple" ، فالعميل نفسه ببساطة لا يعرف ما يعنيه حقًا. ماذا عن المؤدي غير السعيد الذي ، ربما ، ببساطة لا يعرف ما هو متوقع منه في النهاية؟

دعنا نحاول معرفة ذلك!

مبدأ أبل

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

"حسنًا ، لقد وفرنا على كتابة الإعلانات - نحن لا نبيع النصوص ، ولكن الهاتف" ، كما يعتقد الغالبية.

لكن هذا كل شيء! من وجهة نظر شركة Apple ، تظهر تجربة امتلاك منتجاتها حتى قبل تخصيص أموالك التي كسبتها بشق الأنفس لأي iPod ، وبالتالي لا توجد عناصر تافهة في هذه السلسلة. هذه ليست تقنية فقط ، ليس فقط تغليف ، ولكن أيضًا إعلان ، وعرض ، وموقع ويب ، ونصوص على الموقع. لا توجد عناصر ثانوية هنا. و "يمكن أن تحكي العبوة نفسها قصة كاملة". وعليه ، فإن أول شيء يجب فهمه حول "أسلوب Apple" هو الاهتمام الدقيق بجميع مجالات العمل.

الميزة الثانية المهمة لمنتجات Apple هي البساطة الأنيقة. تلعب دورًا مهمًا جدًا في شركة Apple.

"لماذا نعتقد أن البساطة أمر جيد؟ لأنه عندما نتعامل مع الأشياء ، من المهم بالنسبة لنا أن نشعر أننا نديرها ".

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

لكن كل ما وصفته حتى الآن مرتبط بالمنتجات. في مثالنا الأصلي ، كنا نتحدث عن إنشاء موقع ويب. كيف تطبق هذه الأساليب على تصميم الويب؟ للإجابة على هذا السؤال ، دعنا نلقي نظرة على موقع Apple الإلكتروني ونحاول فهم الحيل الأسلوبية التي يستخدمها.

اقتراب

الصور والرسوم التوضيحية

أول ما يلفت انتباهك عند زيارة موقع Apple على الويب هو صور المنتجات عالية الجودة. في الحقيقة ، أعتقد أن هذه الصور تقوم بنصف مهمة استدعاء "Wow!" عند الزائر. جميعها كبيرة ومشرقة ومصنوعة بنفس الأسلوب وتسمح لك برؤية كل التفاصيل.

سحر الصور. وفقا للبعض - "كتلة عادية مع زوايا مستديرة" ، ولكن في مثل هذه الصور هو مثير للإعجاب.

التهوية والنقاء

سيكون العنصر التالي هو التهوية - جميع العناصر الموجودة على الصفحة مريحة جدًا ومجانية ، وتعطي الخلفية البيضاء لمنطقة المحتوى إحساسًا بالخفة. وحتى لا يكون هناك انطباع بأن الصفحة بأكملها تنهار - يتم جمعها بخلفية رمادية فاتحة مع إطار خفيف.

الخطوط

تستخدم Apple محرفين فقط من Adobe Myriad للعناوين وخط macOS X القياسي ، Lucida Grande. كلا الخطين هما خطان متقشفان وحديثان يحافظان فقط على أسلوب بسيط شامل. ومن الجدير بالذكر أن الرغبة في الجودة العالية موجودة هنا أيضًا - بدافع الرغبة في ضمان أن تبدو العناوين الكبيرة على الموقع جميلة في أي ظرف من الظروف ، تستخدم Apple الصور للتسميات التوضيحية وليس النصوص.

يدين ستيف جوبز أيضًا بموقفه الموقر تجاه الخطوط في Apple - بعد أن ترك الكلية ، حضر دورات مختلفة ، بما في ذلك دورة محاضرات عن فن الخط.

زوايا مدورة

كما أن الموقع يحتوي على الزوايا الدائرية الشهيرة (كم بدونها!). هم حرفيا في كل مكان! لأكون صادقًا - يبدو أحيانًا أن iPhone قد تم اختراعه فقط لمواصلة تقليد استخدام الزوايا الدائرية.

الزوايا الدائرية موجودة في كل مكان - في علبة الهاتف وأيقونات التطبيقات وحتى على زر الصفحة الرئيسية.

تأثيرات

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

القائمة الرئيسية على موقع آبل. تكريمًا لأسلوب أكوا الشهير - بعد تقاعد سكوت فورستول ، تهيمن البساطة بشكل متزايد على تأثيرات التشكل وتأثيرات الكراميل.

المحتوى

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

التأثيرات الحديثة

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

وهل كل شيء؟

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

سيؤدي الفشل في تطوير خطوة واحدة فقط إلى تدمير السحر الهش لـ "أسلوب Apple".

سيساعدك استخدام التقنيات الموضحة أعلاه في عمل تصميم جميل وأنيق وعصري ، لكنه لن يحررك من باقي خطوات الإنشاء - كتابة نصوص مختصة واستخدامها بالكميات الصحيحة ، وإنشاء عروض تقديمية بالفيديو وصور عالية الجودة .

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

كوبرتينو ، كاليفورنيا - في 16 نوفمبر ، أعلنت شركة Apple عن إصدار كتاب بغلاف مقوى جديد بعنوان "Designed by Apple in California". من iMac (1998) إلى Apple Pencil (2015) ، تم التقاط 450 صورة من المنتجات السابقة والحالية على مدى عقدين من الابتكار في التصميم. تم تأليف الكتاب لمدة 8 سنوات وخصص لإحياء ذكرى ستيف جوبز.

يقول جوني إيف: "إن فكرة إنشاء شيء مهم للبشرية حفزت ستيف منذ البداية ، وهذا الفكر هو هدفنا المثالي والهدف الذي تنتقل به Apple إلى المستقبل".

"Designed by Apple in California" هو نتيجة التعاون الوثيق بين العديد من فرق التصميم والمهنيين من مجالات مختلفة تمامًا. إنهم جميعًا يتشاركون الأمل في أن الكتاب سوف يمنح الناس فهمًا لكيفية ولماذا يتم إنشاء ووجود منتجات Apple. التقط أندرو زوكرمان جميع الصور بتقنية وصفها بأنها "أسلوب متواضع بشكل متعمد". توضح الصور تفاصيل عملية التصميم وكذلك المنتجات النهائية نفسها.

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

"كمصممين ، نحن نعيش في المستقبل ، ونحب ما فعلناه بالفعل ، ونحن مهووسون بما لم نفعله بعد."

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

تم تصميمه بواسطة Apple في كاليفورنيا وهو كتاب ذو إصدار محدود بتنسيقين: صغير (25.9 × 32.4 سم) مقابل 199 دولارًا وكبيرًا (33 × 40.6 سم) مقابل 299 دولارًا. تتم طباعته على ورق مصنوع خصيصًا بلون خاص مع حواف مطلية بالفضة غير اللامعة. يُباع حصريًا على Apple.com في الولايات المتحدة وأستراليا والمملكة المتحدة وألمانيا وهونغ كونغ وكوريا وفرنسا واليابان وتايوان ، وبعض متاجر Apple Store.

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

لست متأكدا كيف يجب أن يكون مثل هذا الموقع؟ لا تقلق ، سنشرح لك الآن كل شيء ونخبرك بكيفية المتابعة. إذا اتبعت نصيحتنا ، فلن تضطر بعد الآن إلى التنهد بحزن عند النظر إلى مواقع Apple أو Nike أو L'Oreal ، لأن موقعك الخاص سيكون بنفس الجودة. إذن ، إليك بعض الإرشادات لإنشاء موقع ويب متين واحترافي.

اتبع اتجاهات تصميم الويب

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

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

نعتقد في هذه المرحلة أنه لن يضرك التجول في مواقع المصممين والحصول على بعض الإلهام الجيد. توصياتنا: مجلة إلهام الويب، مقالات لوبارتومجلة التصميم غرفة واجب؛ إذا كانت اللغة الإنجليزية ليست عائقًا أمامك ، اقرأ تصميم فاندلاي , مجلة التحطيمو مستودع Webdesign .

* لا تفهم ما تعنيه كل هذه الكلمات؟ لذلك أنت بحاجة إلى قراءة ما لدينا.

انخرط في الترويج للعلامة التجارية

تتمتع الشركات الكبيرة بهوية مؤسسية مميزة وموقع واضح للغاية. يستخدمون خطوطًا وألوانًا وشعارات محددة جيدًا. سوف تتعرف بشكل لا لبس فيه على شعار Coca-Cola الأحمر ، سواء كان ذلك على موقع الويب أو الزجاجات أو اللوحات الإعلانية على طول الشارع.

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

أفضل أقل

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

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

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

اعرض المنتج على الصفحة الرئيسية

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

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

اجعل التنقل جيدًا

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

إذا طُرح عليك نفس السؤال طوال الوقت ، فقم بإعداد صفحة بها إجابات للأسئلة الشائعة. يمكنك استخدام التطبيق الأسئلة الشائعة حول Wix... بالإضافة إلى أن الناس يحصلون على المعلومات التي يحتاجون إليها ، وفي نفس الوقت لا تشتت انتباهك عن أشياء أخرى.

هل تريد أن تُظهر أن شركتك سريعة الاستجابة وودية؟ أضف التطبيق " الدردشة الحية Tidio»للإجابة على الأسئلة في الوقت الحقيقي. يمكنك تثبيته على هاتفك الذكي وعدم الجلوس على الكمبيوتر طوال اليوم ، ولكن يمكنك ممارسة الأعمال التجارية والبقاء على اتصال في نفس الوقت.

أظهر أن الناس يثقون بك

من الجيد أن تحاول البقاء على اتصال والإجابة على الأسئلة في الوقت المحدد ، لكن هذا لا يكفي لبناء الثقة مع عملائك. للقيام بذلك ، تحتاج إلى العمل على الموقع مرة أخرى. أنشئ قسمًا منفصلاً يحتوي على تاريخ الشركة ، وأخبرنا عن هويتك وما تؤمن به وما تعتبره مهمًا. كثرة المعلومات غير مجدية: يجب أن يكون النص قصيرًا وصادقًا ومفهومًا. من الصعب جدًا إظهار نوع الشخص الذي تتواجد عليه على الإنترنت ، لكننا نعتقد أن مثل هذه الصفحة ستقوم بعمل ممتاز في هذه المهمة.

نوصي أيضًا بإضافة مراجعات العملاء إلى الموقع - على الصفحة الرئيسية أو في قسم منفصل. بعد قراءتها ، سيتفهم الناس أن منتجك جدير بالثقة. بالمناسبة ، يولي Yandex و Google اهتمامًا أيضًا للمراجعات ، مما يعني أنها تؤثر.

عمل نسخة محمولة من الموقع

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

لا تنس وسائل التواصل الاجتماعي

انتبه إلى كيفية إدارة الزملاء الأكبر سنًا والأكثر خبرة لصفحات التواصل الاجتماعي الخاصة بهم. نعم ، للحصول على تغطية كاملة للجمهور ، تحتاج إلى موقع ويب وصفحات على Facebook و Vkontakte و Instagram وما إلى ذلك. تعتبر وسائل التواصل الاجتماعي مثالية لنشر الأخبار والكتابة عن منتج والإجابة على الأسئلة. من المهم ليس فقط الحديث عن العمل ، ولكن تكوين صورة وبناء علاقات طبيعية مبنية على الثقة. إذا لم تكن متأكدًا حقًا مما يجب فعله ، فاقرأ المقالة واتبع جميع توصياتنا.

بعد أن تبدأ صفحة على موقع معين ، أخبر زوار موقعك عنها. أضف أزرار الوسائط الاجتماعية إلى رأس الصفحة أو تذييلها أو قسم جهات الاتصال. نوصي أيضًا بإضافة التطبيق - إنه مجاني ، وتستخدمه الشركات الكبيرة عن طيب خاطر. بمساعدتها ، يمكنك إدارة ما يصل إلى عشرة حسابات من موقعك: نشر الأخبار ، والرد على التعليقات في الوقت المحدد ، ومفاجأة العملاء بالسرعة وعدم العيب والاحتراف.

هل أنت جاهز للاصطفاف مع العلامات التجارية الكبرى؟ نفسك على Wix - إنه سهل ومجاني!

تطور تصميم الويب على غرار Apple على مر السنين ، بدءًا من عام 1996. كما يوحي الاسم ، تنتمي فكرة التصميم إلى شركة Apple: تم تصميم واجهات موقع الويب والمنتج بهذا النمط. اكتسب تصميم مواقع الويب على غرار Apple شعبية واسعة بسبب بساطته وتركيز انتباه المستخدم على منتج معين.

السمات المميزة لتصميم مواقع الويب بأسلوب Apple

التسلسل الهرمي الصارم في تكوين العناصر. الأولوية الرئيسية هي صورة المنتج. الصورة عالية الجودة وواضحة وكبيرة وموضوعة في منتصف الصفحة ومحاطة بمساحة بيضاء. في أفضل تقاليد بساطتها.
تتكون لوحة الألوان عادةً من ثلاثة ألوان: أسود ، أبيض ، رمادي. في الوقت نفسه ، على عكس النمط المسطح ، يتم استخدام التدرجات والظلال وطرق نقل الحجم على نطاق واسع.
الخطوط المميزة. تم تصميم العناوين بواسطة Adobe Myriad ، ونص عادي بواسطة Lucida Grande.
المحتوى. تحتوي الصفحة الرئيسية للموقع على حد أدنى من المعلومات. وصف مفصل يرد في صفحات منفصلة. لا يوجد تأثير تشبع زائد. يختار المستخدم بنفسه المعلومات التي تهمه.
ميزات تقنية. يركز تصميم Apple على تنسيق HTML 5 ، باستخدام معايير التصميم الحديثة. لا يستخدم موقع Apple الرسمي على الويب Flash من حيث المبدأ.

لأي مواقع هو مناسب؟

أسلوب Apple هو الطريقة المثلى لتقديم منتج أو خدمة. غالبًا ما يستخدم هذا النمط في تصميم المتاجر عبر الإنترنت والمواقع الترويجية المخصصة لأي نوع من المنتجات: من الدورات التدريبية إلى بيع العقارات. هذا ما يبدو عليه التصميم على غرار Apple لمواقع البرامج:

- Jumsoft http://www.jumsoft.com/money/
- Versionsapp https://versionsapp.com/

لتصميم هذه المواقع ، يتم استخدام الألوان المميزة للأسلوب - الرمادي والأسود والأبيض. هذا يجعل قائمة التنقل غير مرئية تقريبًا. ينصب انتباه المستخدم على المنتج المقدم بصورة مشرقة وملونة. يتم تمييز أزرار التنزيل والشراء بمساعدة التناقضات. يتم تقديم المحتوى بشكل موجز ومنظم ، مصحوبًا بأيقونات وصور. التصميم ضخم ، وهناك تأثيرات مرآة ، وظل. لا يناسب أسلوب Apple بوابات المعلومات والمدونات والمحافظ والمواقع المخصصة للإبداع.

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

ما هو أقل؟

LESS هي وظيفة إضافية لـ CSS. هذا يعني أن أي كود CSS صالح LESS ، لكن عناصر LESS الإضافية لن تعمل في كود CSS بسيط. هذا أمر رائع لأن CSS الحالي هو بالفعل رمز LESS عملي ، مما يقلل من عتبة الدخول في تقنية جديدة.

يضيف LESS العديد من الخصائص الديناميكية المفيدة إلى ملف. يقدم المتغيرات والعمليات والعناصر والخلطات. توفر لك القدرة على كتابة أوراق أنماط معيارية الكثير من المتاعب.

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

1
2
3
4
5
6
7
8
9
10
11

زوايا دائرية (@ radius: 5px) (
نصف قطر الحد: @ radius ؛
-webkit-border-radius:radius ؛
-moz-border-radius:radius ؛
}
# رأس (
.زوايا مدورة؛
}
#تذييل (
زوايا دائرية (10 بكسل) ؛
}

وسيبدو CSS المترجم كما يلي:

1
2
3
4
5
6
7
8
9
10

# رأس (
نصف قطر الحدود: 5 بكسل ؛
نصف قطر مجموعة الويب الحدودية: 5 بكسل ؛
-موز حدود نصف قطرها: 5 بكسل ؛
}
#تذييل (
نصف قطر الحدود: 10 بكسل ؛
-webkit-border-radius: 10px؛
-موز حدود نصف قطرها: 10 بكسل ؛
}

قم بتنزيل مكتبة prefix-free.js واربطها بـ index.html:

< script src= "prefix-free.js" type= "text/javascript" >

هذا يكمل التحضير وينتقل مباشرة إلى إنشاء قائمة بأسلوب Apple.com

ترميز HTML

ترميز القائمة واضح ومباشر. القائمة مصنوعة على أساس قائمة غير مرتبة. افتح محرر HTML والصق الكود التالي:

1
2
3
4
5
6
7
8
9

أنماط أقل

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

لنلقِ نظرة على الأجزاء المكونة التي ستتألف منها القائمة:

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

يستخدم الظل.
الحدود؛
فاصل بين عناصر القائمة ؛
التدرج للخلفية.
تأثير التعتيم على تمرير الماوس ؛
نص القائمة.

يمكنك استخدام الأنماط المكتوبة بطريقتين:

سحق

الأهمية:عند استخدام الطريقة الأولى ، بحيث يتم ربط Styles.less قبل توصيل مكتبة less.js! يبقى أيضًا أن نتذكر الاتصال بدون بادئة.
وبالتالي ، يبدو اتصال الأنماط كما يلي:

1
2
3
4
5