الرؤوس والتذييلات هي العناصر الأساسية عند إنشاء صفحة جديدة ويب أو مدونة ، أو إذا لم يكن هناك شيء آخر ، فنحن بحاجة إلى تحديثها لتلبي المعايير الحالية لتصميم الويب. إنها مساحات يوليها زائر موقعنا عادةً اهتمامًا كبيرًا ، لذلك يتعين علينا الاهتمام بها وتدليلها بما يكفي لإرضاء العين ، بصرف النظر عن كونها وظيفية.
لهذا السبب سوف نتشارك 29 رأس وتذييل CSS يمكنك استخدامها في مدونتك أو موقعك على الويب، ومن ثم امنحها نقطة الجودة التي كنت تبحث عنها. تتكون هذه القائمة من رؤوس مقالات ملء الشاشة ، بالإضافة إلى الحجم القياسي والرؤوس والتذييلات وبعض رؤوس الفيديو الثابتة أو الثابتة لإعطاء وجهة نظر أخرى لموقع الويب الخاص بك.
رأس منحني
رأس تم تحديده بواسطة أسلوبه المنحني في الأسفل مما يجعله عنوانًا خاصًا جدًا لموقع ويب أو مدونة. إنه CSS خالص ، لذلك يستغرق الأمر بعض الوقت بالفعل لاختبار كيف سيبدو في موقعك على الويب إذا قمت بتضمينه في مدونتك.
صورة رأس المنظر
مع تأثير صورة Parallax رائع ، هذا العنوان يعرف نفسه من خلال استخدام موقف صورة الخلفية CSS. سيتم وضع صورة العنوان في الجزء العلوي من الصفحة للحصول على رمز رائع التأثير.
رأس ثابت بزاوية
تم إصلاح هذا الرأس جيدًا في الجزء العلوي من صفحة الويب لـ اشتق مع هذا الخط القطري الذي يتقاطع مع الأفقي الكامل لعرض المستخدم. يوضح كيف يمكن استخدام عناصر CSS الزائفة لإنشاء رأس ثابت مع صورة خلفية.
رأس منحرف
CSS و HTML لهذا العنوان المميز في المثال المعطى على طول هذا الخط القطري التي تعبر الشاشة بأكملها من جانب إلى آخر.
رأس مع SVG للرسوم المتحركة
رأس بسيط للغاية ، على الرغم من استخدامه رسم متحرك SVG لتمييز نفسك التي لدينا في هذه القائمة. يمكنك الوصول إلى قائمة كبيرة من صفحات الويب مع رسوم SVG المتحركة من هنا.
رأس ثابت مع Div
مع تأثير صورة المنظر ، رأس ثابت يتميز بالتأثير الرائع تم تحقيقه باستخدام صورة الخلفية الثابتة بينما يتم تمرير الباقي أثناء التمرير بالماوس.
توضيح المنظر متعدد الطبقات
رأس من النهاية الرائعة في متعدد الطبقات HTML و CSS و JavaScript ويمكن استخدامه بشكل مثالي لموقع ويب متعلق بعالم ألعاب الفيديو. تشطيب رائع طوال الوقت.
رأس المنشور الثابت
رأس ثابت لكل منشور تم إنشاؤه في HTML و CSS و JavaScript. في اللحظة التي نتدحرج فيها ، تم تصغير الرأس وثابتة في الأعلى.
رأس ملء الشاشة مع الرسوم المتحركة
رأس يوفر رسمًا متحركًا يتحرك بشكل جانبي وهذا يعطي تأثيرًا مريحًا على المشاهد.
صورة البطل ملء الشاشة
مع تأثير التكبيرهذا رأس ملء الشاشة تم الكشف عنها باعتبارها واحدة من أصالة كبيرة. مثالي لموقع ويب يستفيد فيه الزائر بشكل كبير من التمرير للتنقل حوله.
فليكس بوكس مع زر
رأس يأخذ عرض الشاشة بالكامل لعرض زر. مثالي للصفحات المقصودة مع CSS flexbox.
رأس Flexbox Hero
رأس ذو تأثير المنظر والفليكس بوكس بسيط للغاية التي تتميز بأناقة تصميمها بشكل أساسي.
رأس مثبت عند التمرير
كما يوحي اسمه ، رأس ثابت عندما نقوم بالتمرير بالماوس عند التحرك لرؤية بقية صفحة الويب.
التمرير سريع الاستجابة مثبت
رأس ثابت آخر ذو تأثير كبير عندما تصل القائمة إلى أعلى الصفحة ، لماذاوفي تلك اللحظة يظل ثابتًا ويمكننا الاستمرار في تصفح الموقع.
رأس التمرير
إنه يختلف عن البقية الرسوم المتحركة المناسبة والحساسة ونحن نتحرك. في نهايته ، يظل اللوح الأمامي ثابتًا في الأعلى.
استجابة التمرير رأس
آخر رائع للرسوم المتحركة تميز هذا العنوان عن الباقي باستخدام HTML و CSS و JavaScript.
رأس الداخل / الخارج
رأس يتميز بالتأثير في / خارج بعد التمرير وهذا ما ينتج عنه إحساس بالانتعاش.
يتلاشى الرأس
تأثير آخر للرسوم المتحركة فضولي وأنيق للغاية في HTML و CSS و JavaScript.
الرأس المخفي
عنوان مختلف عند الاختباء وفقًا لـ نستخدم التمرير مع الرسوم المتحركة لا يلاحظها أحد ولكن بجودة عالية.
تذييل المنظر
تذييل ثابت أو ثابت مع HTML و CSS و JavaScript. ل جودة عالية مع التظليل في الواقع.
تذييل مع مقياس المحتوى
جودة عالية وتذييل أصلي لـ يذهل الزائر للحصول على طريقة رائعة لعرض مساحة الويب هذه.
تذييل الوسائط الاجتماعية
تذييل مميز ل الأزرار التي تؤدي إلى الشبكات الاجتماعية أفضل شهرة. تبرز الرسوم المتحركة التي تم إنتاجها عند ترك مؤشر الماوس فوق كل شبكة من الشبكات الاجتماعية.
قائمة تذييل الجوال المتحركة
من خلال تقليل نافذة متصفح الويب لعرض هذا التذييل ، ستتمكن من ذلك ابحث عن الأقسام 2-3 يمكن للمستخدم العثور عليها على جهاز محمول. يتم عرضها في 767 بكسل.
تذييل بسيط ثابت
Made in HTML و CSS هو ملف تذييل بسيط دون الكثير من الضجة والازدهار.
رد فعل رأس الفيديو
رأس مع فيديو بسيط React.js.
رأس الفيديو
آخر رأس مع فيديو بسيط وذات جودة عالية.
رأس فيديو ملء الشاشة مع Mix-Blend
عرض أ فيديو ملء الشاشة مع نص على طبقة باستخدام وضع المزج.
الرسوم المتحركة لرأس الفيديو
كانت الرسوم المتحركة مخصصة مع Adobe After Effects لتكون متوافقة مع جميع المتصفحات. لا يعمل على الهاتف المحمول.
رأس فيديو متجاوب مع تدرج
El التدرج هو ما يبرز إلى رأس الفيديو هذا من البقية.
أقنعوني جميعًا. شكرا
عفوا!