|
Изменить вид ссылки при наведении курсора
|
|
| Kosten | Среда, 27 Февраля 2019, 21:32 | Сообщение 1 |
| Вашему вниманию оригинальная подборка с эффектами наведения на ссылки или ключевых слов, которые установлены на переход и поставлен под ссылки. Здесь безусловно задействуем стилистику, но также можем сделать что-то вроде линейного градиента фона или даже фонового изображения. Ведь основном по умолчанию можно наблюдать подчеркивание, но здесь будет совершенно уникальные эффекты, которые вы как веб мастер можете задействовать на своем сайте.
И этим безусловно ресурс станет более оригинальная, таким как изначально можно ключевое слово определить под другую палитру цвета, чтоб ее сразу заметили, но при наведении удивитесь, как красивые эффекты могут играть на этом ключевом слове, вот как раз этим займемся, где постараемся выставить самые оригинальные подходы для наведения курсора в последующем эффектом.
Здесь нужно подчеркнуть, что анимация любой из моих первоначальных идей была бы сложной, особенно для кросс-браузерной поддержки.
Но оказывается с SVG можно сделать волнистый путь и оживить его довольно легко. Где при работе ссылкой можно использовать SVG на background-image свойстве.
Первый вариант:
HTML
Код <a href="http://zornet.ru">ZorNet - портал для вебмастера</a>
CSS
Код a {
border-bottom: 1px solid #378cbf;
color: #3e53c7;
padding-bottom: .3em;
text-decoration: none;
}
a:hover {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/squiggle.svg);
background-position: bottom;
background-repeat: repeat-x;
background-size: 12%;
border-bottom: 0;
padding-bottom: .3em;
text-decoration: none;
}
Демонстрация
Тем не менее, мы можем встроить CSS непосредственно в SVG при свойстве background-image. Мы не можем просто скопировать и вставить код SVG в свойство, но мы можем сделать это с помощью правильной кодировки
HTML
Код <a href="http://zornet.ru">ZorNet - портал для вебмастера</a>
CSS
Код a {
border-bottom: 1px solid #6654bf;
color: #4a5cb9;
padding-bottom: .23em;
text-decoration: none;
}
a:hover {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E %3Cpath fill='none' stroke='%23453886' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
background-position: bottom;
background-repeat: repeat-x;
background-size: 12%;
border-bottom: 0;
padding-bottom: .3em;
text-decoration: none;
}
SVG может содержать свои собственные стили в разметке, анимация может быть добавлена прямо в background-imageсвойство, так же, как мы сделали бы это с помощью CSS в заголовке документа HTML или встроенного CSS в HTML.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Среда, 27 Февраля 2019, 21:42 | Сообщение 2 |
|
| В материале собрано воедино концепцию системы проектирования, от компонентов до шаблонов и всего того, что могло бы порадовать любого разработчика в плане подчеркивание ссылки и при наведение, что производится в оригинальном виде.
Если в первой вариаций эта была простая волна, то здесь идет с анимацией.
HTML
Код <a href="http://zornet.ru">ZorNet - портал для вебмастера</a>
CSS
Код a {
border-bottom: 1px solid #2e3c84;
color: #383696;
padding-bottom: .24em;
text-decoration: none;
}
a:hover {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23453886' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
background-position: bottom;
background-repeat: repeat-x;
background-size: 12%;
border-bottom: 0;
padding-bottom: .3em;
text-decoration: none;
}
See the Pen
Squiggle -5 by Kocsten (@kocsten)
on CodePen.
Но это немного глупо, потому что мы не можем оживить это. Нам нужны лучшие ценности для этого. Однако мы можем встроить CSS непосредственно в SVG в свойстве background-image. Мы не можем просто скопировать и вставить код SVG в свойство, но мы можем сделать это с помощью правильной кодировки.
| | Страна: (RU) |
| |
| Kosten | Среда, 27 Февраля 2019, 21:48 | Сообщение 3 |
|
| Также есть много вариаций по оформлению, где мы можем оформить его немного по-другому, если захотим. Любой веб-разработчик знает, как применять правила CSS для стилизации элементов веб-страницы. Включая ссылки. Включая эффекты при при наведении мыши. Но я думаю, что большинство никогда не заходило достаточно далеко, чтобы исследовать границы этого стиля.
HTML
Код <p>Вашему вниманию эффекты на <a href="#">сайте zornet.ru</a> плюс анимация</p>
CSS
Код :root {
--mainColor: #caa70c;
}
body {
align-items: center;
display: flex;
font-family: 'Montserrat', sans-serif;
font-size: 2em;
height: 100vh;
justify-content: center;
}
a {
background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%);
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 2px 2px;
color: #131212;
text-decoration: none;
}
a:hover {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ff9800' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
background-position: 0 100%;
background-size: auto 5px;
background-repeat: repeat-x;
text-decoration: none;
}
Если вы любите закорючка ссылку парения эффект, как показано на странице, то тогда этот эпический фрагмент кода CSS от Geoff Graham именно то, что вам нужно. Когда вы наводите курсор мыши на ссылку, подчеркивание превращается в анимированную линию кривых.
See the Pen
Ссылка Effectz - Squiggle by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Среда, 27 Февраля 2019, 22:03 | Сообщение 4 |
|
| Есть забавная идея с гладкой реализацией CSS, где стилях наведения мы можем сделать со ссылками, что должно получится красиво. Но здесь же отбрасываем юзабилити и безусловно все действие зададим в CSS.
Граница к фоновому эффекту
Возможно очень похожая нижняя граница ссылки по умолчанию может увеличиться и стать полным фоном ссылки при наведении курсора.
HTML
Код <p>Вашему вниманию эффекты на <a href="#">сайте zornet.ru</a> плюс анимация</p>
CSS
Код :root {
--mainColor: #da880f;
}
body {
align-items: center;
display: flex;
font-family: 'Montserrat', sans-serif;
font-size: 2em;
height: 100vh;
justify-content: center;
}
a {
background:
linear-gradient(
to bottom, var(--mainColor) 0%,
var(--mainColor) 100%
);
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 4px 4px;
color: #191818;
text-decoration: none;
transition: background-size .2s;
}
a:hover {
background-size: 4px 50px;
}
See the Pen
Ссылка Effectz - Фон при наведении by Kocsten (@kocsten)
on CodePen.
Аналогичным способом, мы можем сделать что-то подобное по горизонтали:
HTML
Вашему вниманию эффекты на сайте zornet.ru плюс анимация
CSS
Код :root {
--mainColor: #ff9800;
}
body {
align-items: center;
display: flex;
font-family: 'Montserrat', sans-serif;
font-size: 2em;
height: 100vh;
justify-content: center;
}
a {
background:
linear-gradient(
to right,
var(--mainColor) 0%,
var(--mainColor) 5px,
transparent 5px
);
background-repeat: repeat-x;
background-size: 100%;
color: #000;
padding-left: 10px;
text-decoration: none;
}
a:hover {
background:
linear-gradient(
to right,
var(--mainColor) 0%,
var(--mainColor) 5px,
transparent
);
}
See the Pen
Ссылка Effectz - Горизотональный фон by Kocsten (@kocsten)
on CodePen.
Выделенный текстовый эффект
Давайте выделим цвет шрифта и оставим контур позади.
HTML
Код <p>Вашему вниманию эффекты на <a href="#">сайте zornet.ru</a> плюс анимация</p>
CSS
Код :root {
--mainColor: #bf7b16;
}
body {
align-items: center;
display: flex;
font-family: 'Montserrat', sans-serif;
font-size: 2em;
height: 100vh;
justify-content: center;
}
a {
color: var(--mainColor);
text-decoration: none;
}
a:hover {
color: transparent;
-webkit-text-stroke: 2px var(--mainColor);
}
@supports not(-webkit-text-stroke: 2px red) {
a:hover {
text-shadow:
3px 3px 0 var(--mainColor),
-1px -1px 0 var(--mainColor),
1px -1px 0 var(--mainColor),
-1px 1px 0 var(--mainColor),
1px 1px 0 var(--mainColor);
}
}
See the Pen
Ссылка Effectz - Схема при наведении by Kocsten (@kocsten)
on CodePen.
Поднятый текстовый эффект
Другая идея состоит в том, чтобы поднять текст, как будто он вырастает из страницы при наведении:
HTML
Код <p>Вашему вниманию эффекты на <a href="#">сайте zornet.ru</a> плюс анимация</p>
CSS
Код :root {
--mainColor: #ff9800;
}
body {
align-items: center;
display: flex;
font-family: 'Montserrat', sans-serif;
font-size: 2em;
height: 100vh;
justify-content: center;
}
a {
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 4px 4px;
color: var(--mainColor);
text-decoration: none;
}
a:hover {
/*background-image:
linear-gradient(
to bottom, var(--mainColor) 0%,
var(--mainColor) 100%
);*/
text-shadow: 0px 0px 0 rgb(208,138,28),1px 1px 0 rgb(165,123,26),2px 2px 0 rgb(242,185,100),3px 3px 0 rgb(227,167,187),4px 4px 0 rgb(182,129,63),5px 5px 0 rgb(161,117,50),6px 6px 0 rgb(144,103,39),7px 7px 0 rgb(130,91,31),8px 8px 0
rgb(120,83,25),9px 9px 0 rgb(108,73,20),10px 10px 0 rgb(93,63,13),11px 11px 0 rgb(60,54,12),12px 12px 0
rgb(63,41,8),13px 13px 0
}
See the Pen
Ссылка Effectz - Поднятый текст при наведении by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
