• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Стилизация подчеркиваний ссылок на CSS3 (Сделать красивое css подчеркивание элементов)
Стилизация подчеркиваний ссылок на CSS3
Kosten
Дата: Суббота, 2018-06-30, 19:56 | Сообщение 1
Администраторы
Сообщений:18463
Награды: 55


Этот способ подчеркивание попался в сети интернет, который был выстроен на SCSS, где заинтересовало перевести на чистые стили CSS. Как получилось, вам решать, но все по эффекту отлично показывает, вместо полосы, как привыкли идти другие элементы дизайн. Но для этого будет предоставлена Demo страница, где можете оценить этот момент.

Подчеркивание - это способ привлечь внимание к важному тексту. Существует два основных способа подчеркнуть текст на страницах, элементы и свойство text-decoration CSS. Другой может быть предоставлен по требованию, что упрощает изменение состояния подчеркивания, применяя класс CSS к тексту.



Приступаем к установке:

HTML

Код
<h3>ZOTNET.RU</h3>


CSS

Код
h3 {
    position: fixed;
    font-family: "Roboto Mono", monospace;
    font-size: 60px;
    color: #cfd8dc;
    top: calc(50vh - 40px);
    left: calc(50vw - 126px);
    cursor: pointer;
    transition: all 0.5s;
}

h3:hover {
    border-bottom: 6px dotted #cfd8dc;
    padding-bottom: 10px;
    top: calc(50vh - 50px);
}


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

Демонстрация
Прикрепления: 8632204.png(18.4 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Стилизация подчеркиваний ссылок на CSS3 (Сделать красивое css подчеркивание элементов)
  • Страница 1 из 1
  • 1
Поиск: