عنوان شما یکی از مهمترین قسمتهای صفحه اصلی شما است. این معمولاً همان چیزی است که شما ابتدا می بینید و بنابراین اولین تأثیر را تعیین می کند. مثل هر برداشت اول دیگر ، شما می خواهید خوب باشد. اکنون ، اگر به دنبال یک روش خلاقانه برای ارائه عنوان خود هستید ، از این آموزش لذت خواهید برد زیرا ما به شما نشان خواهیم داد چگونه انیمیشن های بلوک متنی CSS را به عنوان خود اضافه کنید و همچنین می توانید فایل طرح JSON را به صورت رایگان بارگیری کنید!
بررسی
قبل از اینکه به آموزش برویم ، بیایید نگاهی به نتیجه در اندازه های مختلف صفحه بیندازیم.
بیایید طراحی را شروع کنیم
بخش شماره 1 را اضافه کنید
پیشینه شیب
با افزودن یک بخش عادی به یک صفحه جدید یا صفحه ای که در آن کار می کنید ، شروع کنید. تنظیمات بخش را باز کرده و پس زمینه شیب زیر را اعمال کنید:
- رنگ 1: # f0f2b
- رنگ 2: # c10b1a
- نوع شیب: خطی
- جهت شیب: 63deg
فاصله
به برگه طراحی بخش بروید و مقادیر پرکننده بالا و پایین سفارشی زیر را در اندازه های مختلف صفحه اعمال کنید:
- بالشتک بالایی: 7vw (دسک تاپ) ، 20vw (رایانه لوحی) ، 25vw (تلفن)
- بالشتک پایین: 7vw (میز) ، 20vw (رایانه لوحی) ، 25vw (تلفن)
مرز
همچنین یک مرز به بخش اضافه کنید.
- عرض مرز: 2vw (بالا ، چپ ، راست)
- عرض مرز پایین: 0vw
- رنگ حاشیه: #ffffff
یک خط جدید اضافه کنید
ساختار ستون
با اضافه کردن ساختار ستون زیر ، اضافه کردن یک خط جدید به بخش ادامه دهید:
اندازه
پارامترهای خط را باز کرده و پارامترهای بعدی را بر این اساس اصلاح کنید:
- عرض: 100٪
- حداکثر عرض: 100٪
ماژول متن را به ستون اضافه کنید
محتوای H1 را اضافه کنید
سپس ماژول متن را با عنوان H1 مورد نظر خود اضافه کنید.
برچسب های Div به هر کلمه در عنوان H1 اضافه کنید
به برگه متن کپی عنوان خود بروید و به هر کلمه در عنوان خود یک تقسیم بندی متفاوت اضافه کنید. شناسه CSS باید برای هر کلمه متفاوت باشد.
آماده
در
ساختن
زیبا
وب سایت ها؟
تنظیمات متن H1
به برگه طراحی ماژول بروید و متناسب با آن تنظیمات متن H1 را تغییر دهید:
- فونت عنوان: Sans Work
- وزن فونت عنوان: متوسط
- رنگ متن سربرگ: #ffffff
- اندازه متن سربرگ: 4vw (دسکتاپ) ، 5vw (تبلت) ، 6vw (تلفن)
- ارتفاع خط سر: 1,4 em
فاصله
سپس مقادیر حاشیه را در اندازه های مختلف صفحه تغییر دهید.
- حاشیه سمت چپ: 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
- قلم دکمه ای: Sans Work
فاصله
سپس به تنظیمات فاصله بروید و مقادیر حاشیه و padding سفارشی را در اندازه های مختلف صفحه اعمال کنید.
- حاشیه برتر: 3vw (office) ،
- حاشیه سمت چپ: 20vw (میز و رایانه لوحی) ، 15vw (تلفن)
- بالشتک بالایی: 1.2vw (دسک تاپ) ، 2vw (رایانه لوحی) ، 4vw (تلفن)
- بالشتک پایین: 1.2vw (میز) ، 2vw (رایانه لوحی) ، 4vw (تلفن)
- بالشتک سمت چپ: 1.8vw (دسک تاپ) ، 3vw (رایانه لوحی) ، 6vw (تلفن)
- بالشتک مناسب: 1.8vw (میز) ، 3vw (رایانه لوحی) ، 6vw (تلفن)
انیمیشن
تنظیمات انیمیشن را نیز سفارشی کنید.
- سبک انیمیشن: تلنگر
- جهت انیمیشن: پایین
- تأخیر انیمیشن: 2000 میلی ثانیه
- شدت انیمیشن: 100٪
- تیرگی شروع انیمیشن: 100٪
- منحنی سرعت انیمیشن: ورود آسان
- تکرار انیمیشن: یکبار
بخش شماره 2 را اضافه کنید
در ادامه با اضافه کردن یک بخش منظم جدید درست زیر قسمت قبلی ادامه دهید.
فاصله
تنظیمات بخش را باز کرده و بالشتک پیش فرض بالایی را حذف کنید.
- بالشتک بالایی: 0px
یک خط جدید اضافه کنید
ساختار ستون
با استفاده از ساختار ستون زیر ، اضافه کردن یک ردیف جدید:
اندازه
بدون اضافه کردن ماژول های بیشتر ، پارامترهای خط را باز کنید و بگذارید خط تمام عرض قسمت قسمت را اشغال کند.
- عرض: 100٪
- حداکثر عرض: 100٪
ماژول متن را به ستون اضافه کنید
اضافه کردن محتوا
بعد، یک ماژول متنی با a اضافه کنید محتویات شرح انتخاب شما
رنگ پس زمینه
یک رنگ زمینه سفید اضافه کنید.
- رنگ زمینه: #ffffff
تنظیمات متن
به برگه طراحی ماژول بروید و متناسب با آن تنظیمات متن را تغییر دهید:
- فونت متن: بدون کار
- رنگ متن: # 9b9b9b
- اندازه متن: 1vw (دسک تاپ) ، 2vw (رایانه لوحی) ، 3vw (تلفن)
- ارتفاع خط متن: 2.6em
فاصله
همچنین مقادیر فاصله سفارشی را در اندازه های مختلف صفحه اضافه کنید.
- حاشیه برتر: -5vw (دسک تاپ) ، -20vw (رایانه لوحی) ، -27vw (تلفن)
- حاشیه سمت چپ: 20vw (میز) ، 13vw (تبلت) ، 8vw (تلفن)
- حاشیه سمت راست: 20vw (دسک تاپ) ، 13vw (رایانه لوحی) ، 8vw (تلفن)
- بالشتک بالایی: 5vw (دسک تاپ) ، 7vw (رایانه لوحی و تلفن)
- بالشتک پایین: 5vw (میز) ، 7vw (رایانه لوحی و تلفن)
- بالشتک سمت چپ: 3vw (دسک تاپ) ، 5vw (رایانه لوحی) ، 6vw (تلفن)
- بالشتک مناسب: 3vw (میز) ، 5vw (رایانه لوحی) ، 6vw (تلفن)
جعبه سایه
و تنظیمات ماژول را با استفاده از سایه جعبه ظریف انجام دهید. خودشه!
- قدرت سایه جعبه مقاومت: 50 پیکسل
- رنگ سایه: rgba (0,0,0,0,1،XNUMX،XNUMX،XNUMX،XNUMX)
بررسی
اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.
آخرین افکار
در این مقاله ، ما به شما نشان دادیم که چگونه انیمیشن های بلوک متنی CSS را به عنوان خود اضافه کنید. مهم است که مطمئن شوید عنوان شما از ابتدا قابل مشاهده و خوانده شده است ، قطعاً افزودن انیمیشن به عنوان شما می تواند کمک کند! همچنین می توانید فایل طرح JSON را به صورت رایگان بارگیری کنید. اگر س anyال یا پیشنهادی دارید ، در صورت تمایل در قسمت نظرات زیر نظر دهید.
ترجمه شده از: ElegantThemes
