با این روش، رنگ پس‌ زمینه متن انتخاب شده در سایت را عوض کنید – تا حالا دقت کردی وقتی تو یه سایت، متنی رو انتخاب می‌کنی، پس‌زمینه‌اش همیشه آبیه؟! این رنگ پیش‌فرض اکثر مرورگرهاست، ولی چرا از این فرصت برای خاص‌تر کردن سایتت استفاده نکنی؟ 😉 تو این مقاله، میخام بهت یاد بدم چطور با چند خط کد CSS، رنگ‌ پس زمینه متن انتخاب شده رو شخصی‌سازی کنی و سایتت رو خاص و شیک تر کنی. آماده‌ای؟ بزن بریم! 🌟

رنگ پس‌ زمینه متن انتخاب شده یعنی چی؟

وقتی کاربر با موس یا کیبورد متنی رو توی سایت انتخاب می‌کنه، مرورگر به طور پیش‌فرض یه رنگ پس‌زمینه آبی براش می‌ذاره. به این حالت می‌گن “انتخاب متن” (Text Selection) و اون رنگ آبی‌ هم “رنگ پس‌زمینه متن انتخاب شده” (Text Selection Background Color) هست.

خب، حالا چرا این موضوع مهمه؟ چون می‌تونیم با تغییر این رنگ، حس بهتری به کاربرامون بدیم و سایت‌مون رو حرفه‌ای‌تر نشون بدیم.

🤔چطور رنگ پس‌ زمینه متن انتخاب (سلکت) شده رو تغییر بدیم؟

آماده‌ای یه حرکت خفن تو طراحی وب یاد بگیری؟ 🤩 برای اینکه رنگ پس‌زمینه متن انتخابی رو تغییر بدی، از یه ابزار خیلی باحال تو CSS به اسم ::selection استفاده می‌کنیم. این ابزار بهت اجازه می‌ده هم رنگ پس‌زمینه و هم رنگ متن رو دقیقاً به همونی که دوست داری تغییر بدی. حالا بریم سراغ جزئیات!

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

• وارد پیشخوان وردپرس بشو.

• روی بخش “نمایش” در منوی سمت چپ کلیک کن.

• روی “سفارشی‌سازی” (Customize) بزن.

• در بخش سفارشی‌سازی، گزینه “CSS اضافی” را پیدا کن.

• کد CSS زیر رو در قسمت مربوطه وارد کن.

• تغییرات رو ذخیره و منتشر کن 🙂

پس از انجام این مراحل، تغییرات به صورت خودکار در سایتت اعمال میشه.

/* Change Text Selection Background Color by RayaWp.ir */
*::selection {
    background: #FFD700; 
    color: #000000; 
}
*::-moz-selection {
    background: #FFD700; 
    color: #000000; 
}
*::-webkit-selection {
    background: #FFD700; 
    color: #000000; 
}

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

توضیحات کد:

• *::-moz-selection: این سلکتور به طور خاص برای مرورگر موزیلا فایرفاکس (Mozilla Firefox) است.
• *::-webkit-selection: این سلکتور برای مرورگرهاییه که از موتور WebKit استفاده میکنن، مانند Google Chrome، Safari و برخی دیگر.
• این کد CSS باعث میشه که زمانی که کاربر متنی رو در صفحه سایت انتخاب میکنه پس‌زمینه انتخاب به رنگ زرد (#FFD700) تغییر و رنگ متن انتخاب‌شده به رنگ مشکی (#000000) تغییر کنه.

شاید برات سوال باشه!

جمع بندی

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

اگه سوالی داشتی یا ایده‌ای خفن برای این موضوع داری، توی کامنت‌ها باهامون درمیون بذار. موفق باشی طراح خلاق! 🙌

ساخت دکمه کپی لینک کوتاه مطلب در وردپرس بدون افزونه

مطالعه

تعداد بازدید پست ها در وردپرس رو بدون افزونه نمایش بده!

مطالعه

آموزش ساخت چایلد تم (Child Theme) برای قالب وردپرس

مطالعه