العنوان الخاص بك هو أحد أهم أجزاء صفحتك الرئيسية. هذا عادة ما تراه أولاً ، وبالتالي هو ما يحدد الانطباع الأول. مثل أي انطباع أول آخر ، تريده أن يكون جيدًا. الآن ، إذا كنت تبحث عن طريقة إبداعية لتقديم العنوان الخاص بك ، فسوف تستمتع بهذا البرنامج التعليمي حيث سنوضح لك كيفية إضافة الرسوم المتحركة لكتل نص CSS إلى العنوان الخاص بك ويمكنك أيضًا تنزيل ملف تنسيق JSON مجانًا!
مسح
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة على النتيجة على أحجام الشاشات المختلفة.
لنبدأ التصميم
إضافة القسم رقم 1
خلفية التدرج
ابدأ بإضافة قسم عادي إلى صفحة جديدة أو إلى الصفحة التي تعمل عليها. افتح إعدادات القسم وقم بتطبيق خلفية التدرج التالية:
- اللون 1: # f0f2b
- اللون 2: # c10b1a
- نوع التدرج: الخطي
- اتجاه التدرج: 63deg
مباعدة
قم بالتبديل إلى علامة تبويب تصميم القسم وقم بتطبيق قيم التعبئة العلوية والسفلية المخصصة التالية على أحجام شاشات مختلفة:
- الحشو العلوي: 7vw (سطح المكتب) ، 20vw (الكمبيوتر اللوحي) ، 25vw (الهاتف)
- الحشو السفلي: 7vw (مكتب) ، 20vw (tablet) ، 25vw (هاتف)
الحدود
أضف أيضًا حدًا إلى القسم.
- عرض الحدود: 2vw (أعلى ، يسار ، يمين)
- أسفل عرض الحدود: 0vw
- لون الحدود: # fffff
أضف سطرًا جديدًا
هيكل العمود
استمر في إضافة سطر جديد إلى القسم باستخدام بنية العمود التالي:
التحجيم
افتح معلمات الخط وقم بتعديل معلمات الأبعاد وفقًا لذلك:
- العرض: 100٪
- أقصى عرض: 100 ٪
إضافة وحدة نمطية النص إلى العمود
أضف محتوى H1
ثم قم بإضافة وحدة نصية بعنوان H1 من اختيارك.
أضف علامات Div إلى كل كلمة في عنوان H1
قم بالتبديل إلى علامة تبويب النص في نسخة العنوان الخاصة بك وإضافة div مختلف لكل كلمة في العنوان الخاص بك. يجب أن يكون معرف CSS مختلفًا لكل كلمة.
جاهز
الى
بناء
جميلة
مواقع الويب؟
إعدادات النص H1
قم بالتبديل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات نص H1 وفقًا لذلك:
- خط العنوان: Work Sans
- وزن خط العنوان: متوسط
- لون نص الرأس: #ffffff
- حجم نص الرأس: 4vw (سطح المكتب) ، 5vw (الجهاز اللوحي) ، 6vw (الهاتف)
- ارتفاع خط الرأس: 1,4 م
مباعدة
ثم قم بتغيير قيم الهامش على أحجام الشاشات المختلفة.
- الهامش الأيسر: 20vw (مكتب والكمبيوتر اللوحي) ، 15vw (الهاتف)
- الهامش الأيمن: 35vw (سطح المكتب) ، 20vw (الكمبيوتر اللوحي) ، 15vw (الهاتف)
إضافة وحدة نمطية رمز إلى العمود
أدخل كود CSS
لكي يتم تطبيق الرسوم المتحركة للكتلة النصية على العنوان الخاص بنا ، سنحتاج إلى بعض كود CSS. سنضيف كود CSS هذا إلى وحدة كود جديدة.
<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>
مباعدة
قم بالتبديل إلى علامة تبويب تصميم الوحدة النمطية وقم بإزالة كل الحشوة السفلية الافتراضية.
- الهامش السفلي: 0px
إضافة وحدة زر إلى العمود
أضف نسخة
الوحدة التالية التي نحتاجها هي وحدة زر. أدخل نسخة من اختيارك.
إعدادات زر
قم بالتبديل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات الزر وفقًا لذلك:
- استخدم الأنماط المخصصة للزر: نعم
- حجم نص الزر: 1vw (سطح المكتب) ، 2vw (قرص) ، 3vw (هاتف)
- لون نص الزر: #ffffff
- لون خلفية الزر: # 000000
- عرض حد الزر: 0px
- خط الزر: Work Sans
مباعدة
ثم انتقل إلى إعدادات التباعد وقم بتطبيق قيم مخصصة للهامش والحشو على أحجام شاشات مختلفة.
- الهامش العلوي: 3vw (المكتب) ،
- الهامش الأيسر: 20vw (مكتب والكمبيوتر اللوحي) ، 15vw (الهاتف)
- الحشو العلوي: 1.2vw (سطح المكتب) ، 2vw (الكمبيوتر اللوحي) ، 4vw (الهاتف)
- الحشو السفلي: 1.2vw (مكتب) ، 2vw (tablet) ، 4vw (هاتف)
- الحشوة اليسرى: 1.8vw (سطح المكتب) ، 3vw (الكمبيوتر اللوحي) ، 6vw (الهاتف)
- الحشوة اليمنى: 1.8vw (مكتب) ، 3vw (قرص) ، 6vw (هاتف)
الرسوم المتحركة
تخصيص إعدادات الرسوم المتحركة كذلك.
- نمط الرسوم المتحركة: قلب
- اتجاه الحركة: لأسفل
- تأخير الحركة: 2000 مللي ثانية
- كثافة الرسوم المتحركة: 100٪
- تعتيم بدء الرسوم المتحركة: 100٪
- منحنى سرعة الرسوم المتحركة: سهولة في الخروج
- تكرار الرسوم المتحركة: مرة واحدة
إضافة القسم رقم 2
تابع بإضافة قسم منتظم جديد أسفل القسم السابق مباشرة.
مباعدة
افتح إعدادات القسم وإزالة الحشو العلوي الافتراضي.
- الحشو العلوي: 0px
أضف سطرًا جديدًا
هيكل العمود
متابعة إضافة صف جديد باستخدام بنية العمود التالي:
التحجيم
دون إضافة المزيد من الوحدات النمطية ، افتح معلمات الخط واجعل الخط يشغل عرض حاوية المقطع بالكامل.
- العرض: 100٪
- أقصى عرض: 100 ٪
إضافة وحدة نمطية النص إلى العمود
إضافة محتوى
بعد ذلك، أضف وحدة نصية تحتوي على ملف محتويات وصف اختيارك.
لون الخلفية
إضافة لون خلفية بيضاء.
- لون الخلفية: #ffffff
إعدادات النص
قم بالتبديل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات النص وفقًا لذلك:
- خط النص: العمل بلا
- لون النص: # 9b9b9b
- حجم النص: 1vw (سطح المكتب) ، 2vw (قرص) ، 3vw (الهاتف)
- ارتفاع سطر النص: 2.6em
مباعدة
أضف أيضًا قيم مسافات مخصصة على أحجام شاشات مختلفة.
- الهامش العلوي: -5vw (سطح المكتب) ، -20vw (الكمبيوتر اللوحي) ، -27vw (الهاتف)
- الهامش الأيسر: 20 فولت (مكتب) ، 13 فولت (كمبيوتر لوحي) ، 8 فولت (هاتف)
- الهامش الأيمن: 20vw (سطح المكتب) ، 13vw (الكمبيوتر اللوحي) ، 8vw (الهاتف)
- الحشو العلوي: 5vw (سطح المكتب) ، 7vw (الجهاز اللوحي والهاتف)
- الحشو السفلي: 5vw (مكتب) ، 7vw (الكمبيوتر اللوحي والهاتف)
- الحشوة اليسرى: 3vw (سطح المكتب) ، 5vw (الكمبيوتر اللوحي) ، 6vw (الهاتف)
- الحشوة اليمنى: 3vw (مكتب) ، 5vw (قرص) ، 6vw (هاتف)
صندوق الظل
وأكمل إعدادات الوحدة بتطبيق ظل مربع دقيق. هذا هو!
- مربع الظل طمس القوة: 50px
- لون الظل: rgba (0,0,0,0,1،XNUMX،XNUMX،XNUMX،XNUMX)
مسح
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على كيفية ظهورها على أحجام الشاشات المختلفة.
الأفكار النهائية
في هذه المقالة ، أوضحنا لك كيفية إضافة رسوم متحركة لكتل نص CSS إلى العنوان الخاص بك. من المهم التأكد من أن العنوان الخاص بك مرئي وقراءته من البداية ، فإن إضافة الرسوم المتحركة إلى العنوان الخاص بك يمكن أن يساعد بالتأكيد! يمكنك أيضًا تنزيل ملف التنسيق JSON مجانًا. إذا كان لديك أي أسئلة أو اقتراحات ، فلا تتردد في ترك تعليق في قسم التعليقات أدناه.
ترجمت من: ElegantThemes
