Сделать подсветку (highlight) в CSS можно с помощью свойства box-shadow
. Это свойство позволяет добавлять тень вокруг элемента, которая может использоваться для создания эффекта подсветки.
Вот пример CSS-кода для создания подсветки для кнопки:
.button {
background-color: #007bff;
color: white;
padding: 10px;
border-radius: 5px;
box-shadow: 0px 0px 10px #007bff;
}
.button:hover {
box-shadow: 0px 0px 20px #007bff;
}
Здесь мы задали стиль для кнопки, используя свойства background-color
, color
, padding
, border-radius
. Затем мы добавили свойство box-shadow
, чтобы создать эффект подсветки вокруг кнопки. Это свойство имеет три параметра:
x-offset
— горизонтальное смещение тени от элемента (0 в нашем случае).y-offset
— вертикальное смещение тени от элемента (0 в нашем случае).blur-radius
— радиус размытия тени (10px в нашем случае).
При наведении на кнопку мы меняем параметр blur-radius
с 10px до 20px, чтобы увеличить радиус размытия тени и создать эффект увеличенной подсветки.
.button:hover {
box-shadow: 0px 0px 20px #007bff;
}
Также можно использовать свойство text-shadow
для создания подсветки текста. Вот пример CSS-кода для создания такой подсветки:
.text {
color: #333;
text-shadow: 1px 1px #ccc;
}
Здесь мы добавили свойство text-shadow
, которое имеет два параметра:
x-offset
— горизонтальное смещение тени от текста (1px в нашем случае).y-offset
— вертикальное смещение тени от текста (1px в нашем случае).color
— цвет подсветки (#ccc в нашем случае).
Таким образом, мы создали эффект затемнения текста, который может быть использован для создания более выразительных заголовков или подзаголовков страницы.