• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Увеличение с тенями текста при наведении (Создание рамки теней вокруг текста при помощи CSS)
Увеличение с тенями текста при наведении
Kosten
Дата: Понедельник, 2019-05-20, 22:26 | Сообщение 1
Администраторы
Сообщений:24298
Награды: 56


Создание эффекта теней при наведении на текст, где автоматически создается рамка с тенями на том тексте, где изначально прописали класс. Теперь можно выставить ключевое слова под ссылку, чтоб пользователь мог навести на нее и увидеть этот эффект, тем будет означать, что все правильно делает.

Сделать теневую рамку вокруг текста при наведении, которое отлично впишется под красивое оформление разной тематики сайта. Здесь можно поставить на любой фон, но если тени прописываем, то по умолчанию делает под светлый фон.

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) изменить масштаб, увеличив текст.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Увеличение с тенями текста при наведении (Создание рамки теней вокруг текста при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: