Стилізація виділення тексту
За допомогою css стилізуємо виділення тексту сайту.
1. Змінення кольору тла виділеного тексту
Якщо ви хочете змінити кольору тла виділеного тексту, ви можете використовувати псевдоклас ::selection. Наприклад, для того, щоб змінити колір фону виділеного тексту на зелений, можна використати наступний код:
::selection {
background-color: green;
}
Спробуйте виділити текст на сторінці і ви побачите дію цього коду (не стандартний синій колір виділення, а колір стилю цього сайту.
2. Змінення кольору тексту виділеного тексту
Якщо ви хочете змінити кольору тексту виділеного тексту, ви можете використовувати псевдоклас ::selection та властивість color. Наприклад, для того, щоб змінити колір тексту виділеного тексту на білий, можна використати наступний код:
::selection {
background-color: blue;
color: white;
}
3. Додавання анімації до виділеного тексту
Якщо ви хочете додати анімацію до виділеного тексту, ви можете використовувати псевдоклас ::selection та властивості animation та transition. Наприклад, для того, щоб змінити колір фону виділеного тексту на зелений та додати анімацію “пульсації”, можна використати наступний код:
::selection {
background-color: green;
animation: pulse 1s infinite;
transition: background-color 0.5s ease;
}
@keyframes pulse {
0% {
background-color: green;
}
50% {
background-color: lightgreen;
}
100% {
background-color: green;
}
}