Создание эффекта теней при наведении на текст, где автоматически создается рамка с тенями на том тексте, где изначально прописали класс. Теперь можно выставить ключевое слова под ссылку, чтоб пользователь мог навести на нее и увидеть этот эффект, тем будет означать, что все правильно делает.
Сделать теневую рамку вокруг текста при наведении, которое отлично впишется под красивое оформление разной тематики сайта. Здесь можно поставить на любой фон, но если тени прописываем, то по умолчанию делает под светлый фон.
HTML
Код
<p class="cukeconus_nogaledvun_kenipmed">Навести курсор</p>
CSS
Код
.cukeconus_nogaledvun_kenipmed {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
margin: 10px;
transition-duration: 0.3s;
transition-property: box-shadow, transform;
}
.cukeconus_nogaledvun_kenipmed:hover,
.cukeconus_nogaledvun_kenipmed:focus,
.cukeconus_nogaledvun_kenipmed:active {
box-shadow: 1px 10px 10px -10px rgba(38, 38, 39, 0.85);
transform: scale(1.2);
cursor:pointer;
}
Также при наведение шрифт начинает увеличиваться.
Демонстрация
1. display: inline-block установить ширину и длину для pэлемента, таким образом, делая его inline-block.
2. Установите transform: perspective(1px) чтобы дать элементу трехмерное пространство, влияя на расстояние между плоскостью Z и пользователем, и translate(0) переместить p элемент вдоль оси Z в трехмерном пространстве.
3. box-shadow: настроить коробку.
4. transparent сделать коробку прозрачной.
5. transition-property чтобы включить переходы для обоих box-shadowи transform.
6. :hover активировать весь CSS, когда зависание сделано до active.
7. transform: scale(1.2) изменить масштаб, увеличив текст.
