778

Міняємо фон і колір виділеного тексту (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)

Це все 🙂 Вчіть CSS – чудова річ, яка дозволяє робити з сайтів художні шедеври. І не тільки 😉

Читайте також: