آدرس دفتر: تهران، خیابان ولیعصر، بالاتر از پارک ساعی، کوچه مهر، پلاک ۱۲، واحد ۴
تغییر رنگ پس زمینه متن انتخاب شده در سایت!
📎 لینک کوتاه این مقاله: https://catalyzeweb.ir/s/0fp
تا حالا توجه کردهاید وقتی در یک سایت متنی را انتخاب میکنید، پسزمینه آن همیشه آبی است؟ این رنگ پیشفرض اکثر مرورگرهاست. اما چرا از این ویژگی برای ایجاد یک جلوه خاصتر و جذابتر در سایتتان استفاده نکنید؟ 😉 در این مقاله، قصد دارم به شما نشان دهم چطور با چند خط کد CSS، رنگ پسزمینه متن انتخابشده را شخصیسازی کنید و ظاهر سایت خود را شیکتر و متفاوتتر کنید. آمادهاید؟ شروع کنیم! 🌟
رنگ پس زمینه متن انتخاب شده چیست؟
هنگامی که کاربر با ماوس یا صفحهکلید متنی را در سایت شما انتخاب میکند، مرورگر بهطور پیشفرض یک رنگ آبی بهعنوان پسزمینه برای آن در نظر میگیرد. این حالت به انتخاب متن (Text Selection) معروف است و آن رنگ آبی نیز بهعنوان رنگ پسزمینه متن انتخاب شده (Text Selection Background Color) شناخته میشود.
چرا تغییر رنگ پس زمینه متن انتخاب شده مهم است؟
این تغییر کوچک میتواند تأثیر بزرگی روی تجربه کاربری داشته باشد! با انتخاب رنگی مناسب، نهتنها سایت خود را حرفهایتر نشان میدهید، بلکه میتوانید حس بهتری به کاربران منتقل کنید.
🤔 چطور رنگ پس زمینه متن انتخاب شده را تغییر دهیم؟
آمادهاید یکی از جذابترین تکنیکهای طراحی وب را یاد بگیرید؟ 🤩
برای تغییر رنگ پس زمینه متن انتخاب شده، میتوانید از ویژگی قدرتمند :selection در CSS استفاده کنید. این ابزار فوقالعاده به شما اجازه میدهد رنگ پس زمینه و رنگ متن انتخاب شده را مطابق با سلیقه خود شخصیسازی کنید.
نحوه اعمال کد CSS برای تغییر رنگ پس زمینه متن انتخاب شده
برای ایجاد تغییرات در رنگ پس زمینه و رنگ متن انتخاب شده در سایت، مراحل زیر را انجام دهید:
- وارد پیشخوان وردپرس شوید.
- در منوی سمت چپ، به بخش نمایش > سفارشیسازی بروید.
در صفحه سفارشیسازی، آخرین گزینه (CSS اضافی (Additional CSS)) را انتخاب کنید.
کد زیر را در بخش CSS اضافی کپی و پیست کنید:
/* Change Text Selection Background Color by roshanaiedanaie.ir */
*::selection {
background: #FFD700;
color: #000000;
}
*::-moz-selection {
background: #FFD700;
color: #000000;
}
*::-webkit-selection {
background: #FFD700;
color: #000000;
}
توضیحات کد
- :selection: برای مرورگرهای استاندارد (Chrome ،Edge و Safari) استفاده میشود.
- :-moz-selection: بهطور خاص برای مرورگر Mozilla Firefox به کار میرود.
- :-webkit-selection: برای مرورگرهایی که از موتور WebKit استفاده میکنند، مانند Google Chrome و Safari.
تأثیر کد
- با این کد، زمانی که کاربر متنی را در سایت شما انتخاب کند:
- رنگ پس زمینه انتخاب شده به زرد (#f7ba31) تغییر میکند.
- رنگ متن انتخاب شده به مشکی (#۰۰۰۰۰۰) تغییر میکند.
- در نهایت، روی دکمه انتشار کلیک کنید تا تغییرات ذخیره و در سایت اعمال شود.
سخن پایانی
دیدی چقدر ساده بود؟ حالا با همین چند خط کد CSS میتونی سایتت رو حرفهایتر و جذابتر کنی. یادت نره که همین جزئیات کوچک، مثل تغییر رنگ پس زمینه متن انتخابشده، میتونه سایتت رو از رقبا متمایز کنه. پس همین الان دست به کار شو و امتحانش کن! ✨
اگه سوالی داری یا ایدهای خلاقانه برای این موضوع به ذهنت رسیده، حتماً توی کامنتها برامون بنویس. موفق باشی، طراح خلاق! 🙌
سوالات متداول
آخرین بهروزرسانی: مرداد ۱۵, ۱۴۰۴
