إليك موقع ويب جميل: إنه نموذج لعائلة نوع Mass-Driver الرائعة جدًا إم دي نيتشروم. هناك الكثير من الرسوم المتحركة والرسومات الرائعة التي تشرح جميع الميزات الموجودة بالداخل...
إذا كنت تتساءل عن كيفية عمل تلك الرسوم المتحركة، فقد تم تصميمها بالفعل <video>
العناصر.
هناك الكثير من اللمسات الرائعة في التصميم الجرافيكي أيضًا، مثل كيفية تتابع الحروف أدناه وتلاشيها...
هذا القليل من CSS أنيق. فإنه يتأكد من أن كل <h1>
يبقى على سطر واحد مع white-space
، ثم يقوم بتعيين تجاوز السعة المخفي عليها بحيث يختفي العنوان. يعود الخبو إلى التدرج الخطي الذي يتضمن الشفافية. التدرج هو في الواقع أ mask-image
في هذه الحالة. يعد هذا تذكيرًا جيدًا بأن تدرجات CSS هي صور تم إنشاؤها بواسطة المتصفح.
h1 { white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(to right, black 75%, transparent);
}
في الصورة أعلاه يمكنك أيضًا رؤية كيف يقوم Mass-Driver بالإعلان عن ميزات OpenType للخط. هذه أشياء مثل الكسور أو الحروف البديلة التي تمنح نصك قوى خارقة. افتراضيًا، تعرض هذه الأقسام ماهية الميزة، ولكن عند تمرير مؤشر الماوس فوقها، فإنها تقوم بما يلي:
.element { font-feature-setting: unset;
}
لا أعتقد أنني استخدمت من أي وقت مضى unset
من قبل، ولكن هذا مكان رائع لاستخدامها — اعرض الشكل الذي تبدو عليه الميزة مقدمًا، ثم عند تمرير مؤشر الماوس، اعرض الميزة الافتراضية. الاشياء الذكية.
لكن الجزء الذي لفت انتباهي - إلى جانب الطباعة المتقنة - هو الخلفية. وهي مكونة من جزأين: رسم متحرك لامع يجعل الصفحة تبدو مثل الورق، والتدرج الذي يتم وضعه فوقها. وبعد البحث في DevTools، أدركت أن التأثير المتلألئ هو صورة PNG حيث يكون ملف background-position
تقوم الخاصية بتحريك الصورة قليلاً لتحريكها مثل GIF. من الصعب رؤيته في الصور، لذا إليك عرضًا توضيحيًا مقلدًا قمت بإنشائه مع إيقاف العتامة لتسهيل الرؤية:
هل ترى ذلك الغموض الجميل؟ إنه يمنح الخلفية نوعًا من... الملمس... الذي لم أره منذ فترة طويلة، ربما منذ عام 2008 تقريبًا عندما كان الجميع يحاول جعل الأزرار تبدو وكأنها أزرار تمثيلية حقيقية على الويب. غطى جيف نفس النوع من التقنية منذ فترة حيث يمكنك التعمق في كيفية عمله.
الجزء الآخر من تصميم هذا الموقع هو التدرج في الخلفية. كيف هي تلك على نحو سلس جدا؟ حسنًا، رذرفورد كريز، المصمم وراء هذا الجزء العبقري من تصميم الويب، صنع خيط موضحا كيف حصل على هذا التأثير للعمل في المتصفح. ابتكر أداة التدرجات يتيح لك إنشاء تأثير مماثل:
يكتب رذرفورد:
ترسم تدرجات CSS التقليدية خطًا مستقيمًا عبر مساحة اللون، ويتم تحريفها مباشرةً من لون البداية إلى لون النهاية. تطبق هذه الأداة مبادئ منحنيات بيزييه، أساس الخطوط الرقمية، على هذه العملية.
من خلال إدخال "نقاط التحكم" على طول التدرج، يمكنك التحكم بشكل أكثر دقة في الاستيفاء وإنتاج نتيجة نهائية أكثر سلاسة. تقوم الأداة بعد ذلك باختبار هذا "التدرج بيزييه" لإنتاج تدرج خطي يمكنك العمل به في CSS.
ما يصفه رذرفورد أعلاه هو ما يُعرف باسم "المنطقة الرمادية الميتة" من التدرجات، حيث غالبًا ما يوجد في التدرج الخطي هذا اللون الرمادي الذي يتشكل في المنتصف.
التفاصيل الصغيرة الأخرى التي لم أتمكن من فهمها تقريبًا هي الملاحة لزجة: عندما تقوم بتحميل موقع الويب لأول مرة، فإنك ترى فقط الشعار بدون أي شيء آخر، ولكن بعد ذلك أثناء التمرير سترى التنقل ويتم تثبيته في مكانه:
لاحظ كيف يتم أيضًا استخدام الموضع الثابت لاحقًا لإظهار الحروف الرسومية للخط.
CSS يجعل هذا النوع من الأشياء سهلاً للغاية. أعلن عن وضع لاصق على العنصر، ثم قم بتعويض الالتصاق إذا كان العنصر يجب أن يبدأ في الالتصاق في مكان معين.
.sticky-thing { position: sticky; top: 75px;
}
نظرًا لأنهم يريدون منك التركيز على الحروف أولاً وليس على بقية واجهة المستخدم، فمن المنطقي جدًا تأجيل التنقل إلى جانب واحد، فقط عندما تحتاج إليه. وهذا يجعل التصميم العام يبدو مركزًا ومباشرًا بشكل لا يصدق، وربما لا يستحق التعليق عليه على الإطلاق، ولكن عندما تكون معظم مواقع الويب مليئة بالمشتتات، أعتقد أن الأمر يستحق الاحتفال بمواقع الويب الهادئة مثل هذه.
المصدر: https://css-tricks.com/websites-we-like-md-nichrome/
- دعاية
- الكل
- الرسوم المتحركة
- حول
- قطعة
- اسود
- المتصفح
- يو كاتش
- اشتعلت
- ميت
- تصميم
- مصمم
- التفاصيل
- رقمي
- للعائلات
- الميزات
- المميزات
- الاسم الأول
- تركز
- بالإضافة إلى
- GIF
- خير
- اللون الرمادي
- عظيم
- كيفية
- HTTPS
- صورة
- يدمج
- IT
- خط
- تحميل
- أقفال
- شعار
- طويل
- التحركات
- قائمة الإختيارات
- أنيق
- عوض
- أخرى
- ورق
- صورة
- الملكية
- REST
- إحساس
- صغير
- سمارت
- So
- الفضاء
- بقعة
- بداية
- الوقت
- طن
- تيشرت
- الشفافية
- ui
- الويب
- الموقع الإلكتروني
- المواقع
- للعمل
- أعمال
- قيمة