• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Оформление подчеркивание ссылок на CSS (Создать красивое подчеркивание текста и ссылок на сайте)
Оформление подчеркивание ссылок на CSS
Kosten
Дата: Вторник, 2020-06-30, 02:08 | Сообщение 1
Оффлайн
Администраторы
Сообщений:29729
Награды: 62


Давайте рассмотрим оригинальное и простое подчеркивание ссылок или текста, которое начинается по центру, где по ширине идет в один пиксель с темном оттенке. Здесь представлены классы, где вы можете сами все выставить в соответствии вашего дизайна на сайте. Вам только нужно прописать стили, и разместить классы по месту, где вы хотели видеть эффект подчеркивание при наведении клика.



HTML

Код
<div class="penctuas">
  <div class="upasig">Главная страница</div>
  <div class="upasig">Раздел сайта</div>
  <div class="upasig">Категория портала</div>
</div>

CSS

Код
.penctuas {
  display: flex;
}
.upasig {
  padding: 5px 5px;
  margin: 0 5px;
  position: relative;
  cursor: pointer;
}
.upasig:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 2px;
    width: 0;
    transition: all 0.03s linear;
    background-color: #de0a0a;
}
.upasig:hover:after {
  width: 100%;
  left: 0;
}

На этом установка завершена, так как она создана, чтоб посмотреть в demo формате.

Демонстрация
Прикрепления: 3242608.png(74.8 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 2020-06-30, 23:20 | Сообщение 2
Оффлайн
Администраторы
Сообщений:29729
Награды: 62


Пользовательские подчеркивания исполнены на чистом CSS, где изначально ключевые слова идут под одним цветом гаммы, но при наведении цветовая гамма меняется.



HTML

Код
<p>Этот <a href="/">абзац содержит ссылку в стиле стандартного способа</a>.</p>

<p>Этот <a class="background" href="/">абзац</a> содержит ссылку в стиле <a class="background" href="/">Lea Verou.</a>.</p>

<p>Этот <a class="box-shadow" href="/">абзац</a> содержит ссылку в стиле на примере <a class="box-shadow" href="/">Уолтера Эберта</a>.</p>

<p>Этот <a class="border-bottom" href="/">содержит ссылку в стиле границы внизу</a>.</p>

CSS

Код
p {
  font-family: 'source-sans-pro', sans-serif;
  font-size: 250%;
  font-smoothing: antialiased;
  line-height: 1.4;
  text-rendering: optimizeLegibility;
}

a.background {
  background: linear-gradient(currentColor, currentColor) no-repeat;
    background-size: 100% 2px;
    background-position: 0 1.12em;
  color: gray;
    text-shadow: .05em 0 white, -.05em 0 white;
  text-decoration: none;
  transition: color 0.3s ease-out;
}

a.box-shadow {
  box-shadow: inset 0 -1px 0 0 #fff, inset 0 -3px 0 0 currentColor;
  color: #070;
  text-decoration: none;
  text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff;
  transition: color 0.3s ease-out;
}

a.border-bottom {
  border-bottom: 2px solid;
  color: blue;
  text-decoration: none;
  transition: color 0.3s ease-out;
}

a:hover,
a:focus {
  color: black;
}

На этом все!

Также изначально можно демонстрацию этих эффектов посмотреть.
Прикрепления: 6911450.png(63.8 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 2020-06-30, 23:22 | Сообщение 3
Оффлайн
Администраторы
Сообщений:29729
Награды: 62


Текст с подчеркнутыми ссылками при наведение


See the Pen
Text with underlined links
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Оформление подчеркивание ссылок на CSS (Создать красивое подчеркивание текста и ссылок на сайте)
  • Страница 1 из 1
  • 1
Поиск: