Міняємо фон і колір виділеного тексту (CSS)
Раніше на сайтах бачив, що при виділені тексту, фон виділення робився не стандартним блакитним, а зміненим під дизайн. Це дуже цікава властивість, бо дозволяє не лише підігнати під дизайн навіть таку дрібничку, як виділення тексту, але й дозволяє виділити ваш сайт поміж ішших. Як виявилося, змінити фон виділеного тексту не так вже й складно.
Для цього застосуємо два селектори “selection” і “-moz-selection”. А код в css, відповідно запишемо так:
.wrapper ::selection {
background: #2CA200;
color: #fff;
}
.wrapper ::-moz-selection {
background: #2CA200;
color: #fff;
}
Елемент .wrapper – це елемент, в якому текст, який виділяється повинен міняти колір. Можна туди поставити body, таким чином, весь текст на сторінці буде змінений. Або ж окремий блок (реклами наприклад).
Далі властивості background і color задають колір ону виділеного тексту і колір самого тексту відповідно.
І останнє, що потрібно пояснити це чому ми повторюємо запис. Тут все просто, селектор “selection” – спрацьовує у браузерах: Safari, Chrome, Opera; для того, щоби наші стилі працювали в Firefox, ми записуємо другий ідентичний запис, але з селектором “-moz-selection”.
Колір виділення тексту уже підбирається під дизайн індивідуально, в мене, наприклад, виглядає це так:
Це все 🙂 Вчіть CSS – чудова річ, яка дозволяє робити з сайтів художні шедеври. І не тільки 😉