ساخت نوار تزئینی چشم‌ نواز کنار باکس محتوا با CSS

امروز قراره یه آموزش جالب و خیلی ساده رو با هم یاد بگیریم. میخایم یه نوار تزئینی چشم‌نواز بسازیم که کنار باکس محتوا قرار می‌گیره و باعث می‌شه باکس های محتوامون زیباتر بشن 😎

حالا فکر کن، سایتت یه ظاهر جذاب و متفاوت پیدا می‌کنه با همین نوار کوچیک و دکوری! به نظرم این یکی از همون ترفندهای کوچیکیه که می‌تونه تاثیر بزرگی بذاره. 😉

خلاصه بگم، امروز قراره سایتت رو با یه نوار ساده، ولی فوق‌العاده جذاب، زیباتر کنیم! آماده‌ای؟ بیا با هم شروع کنیم! 🎉

چرا نوار تزئینی کنار باکس محتوا؟ 🤔

ممکنه بپرسی که چرا باید از این نوارها در طراحی سایتم استفاده کنم؟ خب، جوابش ساده است! نوارهای تزئینی و دکوری میتونن سایتت رو از سایر سایت‌ها متمایز و به تجربه کاربری کمک زیادی کنن.

× ✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD

در واقع، با استفاده از CSS میتونی چنین افکت های بصری جذابی رو بسازی که نه تنها زیبا هستن، بلکه کیفیت کارت رو هم بهتر و سایتتو از بقیه متمایز میکنن.

آماده‌ سازی محیط کار 🛠

تو این آموزش من از ویجت آیکون باکس استفاده می‌کنم، اما اصلاً نگران نباش! 😄 تو می‌تونی از هر ویجت دلخواهی که دوست داری استفاده کنی، چون محدودیتی نداری. می‌تونی محتوا رو داخل هر ویجتی که برات راحت‌تره نمایش بدی و با همون روش، نوار تزئینی رو کنار باکس‌ها بذاری. راحت و بدون دردسر! 👍

1. وارد پنل المنتور شو.
2. یک صفحه جدید ایجاد یا صفحه موجود رو ویرایش کن.
3. ویجت آیکون باکس (icon Box) رو به صفحه اضافه کن.
4. در بخش محتوای ویجت، میتونی یک عنوان و توضیحات دلخواه اضافه کنی.
5. حالا وقتشه به مرحله بعدی آموزش بری.

اضافه کردن کد CSS 🪶

حالا که محیط کار رو آماده کردی، وقتشه که کد CSS زیر رو وارد کنی. نوار تزئینی که می‌خواهیم بسازیم، یک نوار باریک با گرادیانت رنگی و سایه است که کنار باکس محتوا قرار می‌گیره و به طراحی‌ات جذابیت می‌ده.

این کد رو باید در بخش CSS سفارشی تب پیشرفته ویجت آیکون باکس وارد کنی.

قبل از اینکه کد رو وارد کنی، خوبه که یه کلاس اختصاصی به ویجت آیکون باکس بدی (از همون تب پیشرفته قسمت کلاس‌های CSS). مثلاً می‌تونی از کلاس “Raya2BOX” استفاده کنی.

/* Style for the main box with the custom class Raya2BOX by RayaWp.ir */
.Raya2BOX {
  background: #fff;
  box-sizing: border-box;
  border-radius: 15px;
  position: relative;
}

.Raya2BOX::before {
  content: "";
  background: linear-gradient(180deg, #FDC400 0%, #FDC400 100%); 
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
  height: 80px;
  margin-top: 20px;
  margin-right: -5px;
  border-radius: 20px; 
  box-shadow: 0px 2px 15px 0px rgba(253, 196, 0, 0.2); 
}

کار تمومه 🙂 و الان شما یه باکس محتوایی جذاب با نوار تزئینی نارنجی دارین. مرسی که تا پایان این پست منو با نگاه قشنگتون همراهی کردین 🙂