Плавное подчеркивание ссылки при наведении: Эффект подчёркивания при наведении на ссылку

Содержание

Эффект подчёркивания при наведении на ссылку

Здравствуйте, дорогие друзья!

В данной статье я покажу вам как сделать плавное подчёркивание ссылки при наведении.
Этот интересный эффект можно использовать как для ссылок, находящихся внутри определённого блока, так и для всех ссылок на сайте. Данный эффект при наведении создаётся при помощи CSS.

Навигация по статье:

И будет он состоять всего из нескольких строчек кода.

Для того чтобы посмотреть как выглядит плавное подчёркивание ссылки при наведении просто наведите курсор на одну из ссылок ниже:

Как создать эффект плавного подчёркивания ссылки при наведении?

Предположим у Вас есть блок с классом «link» и внутри него есть ссылки, для которых нужно применить данный эффект при наведении.

<div>
<a href=»#»>Ссылка 1</a>
<a href=»#»>Ссылка 2</a>
<a href=»#»>Ссылка 3</a>
</div>

<div>

<a href=»#»>Ссылка 1</a>

<a href=»#»>Ссылка 2</a>

<a href=»#»>Ссылка 3</a>

</div>

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

.link a {
text-decoration:none; /*Убираем стандартное подчёркивание ссылки если оно ещё не убрано*/
display: inline-block; /*делаем чтобы наша ссылка из строчного элемента превратилась в строчно-блочный*/
line-height: 1; /*Задаём высоту строки (можно в пикселях)*/
color:#2F73B6;/*Задаём цвет ссылки*/
}

.link a {

text-decoration:none; /*Убираем стандартное подчёркивание ссылки если оно ещё не убрано*/

display: inline-block; /*делаем чтобы наша ссылка из строчного элемента превратилась в строчно-блочный*/

line-height: 1; /*Задаём высоту строки (можно в пикселях)*/

color:#2F73B6;/*Задаём цвет ссылки*/

}

Теперь для того чтобы создать плавное подчёркивание ссылки при наведении нам нужно при помощи CSS добавить псевдоэлемент after. Именно этот элемент и будет представлять собой плавно появляющуюся линию подчёркивания. Для него нам нужно прописать следующие свойства:

.link a:after {
display: block; /*превращаем его в блочный элемент*/
content: «»; /*контента в данном блоке не будет поэтому в кавычках ничего не ставим*/
height: 3px; /*задаём высоту линии*/
width: 0%; /*задаём начальную ширину элемента (линии)*/
background-color: #225384; /*цвет фона элемента*/
transition: width 0.4s ease-in-out; /*данное свойство отвечает за плавное изменение ширины. Здесь можно задать время анимации в секундах (в данном случае задано 0.4 секунды)*/
}

.link a:after {

    display: block; /*превращаем его в блочный элемент*/

    content: «»; /*контента в данном блоке не будет поэтому в кавычках ничего не ставим*/

    height: 3px; /*задаём высоту линии*/

    width: 0%; /*задаём начальную ширину элемента (линии)*/

    background-color: #225384; /*цвет фона элемента*/

    transition: width 0.4s ease-in-out; /*данное свойство отвечает за плавное изменение ширины. Здесь можно задать время анимации в секундах (в данном случае задано 0.4 секунды)*/

}

И на последнем этапе создания плавного подчёркивания ссылки нужно задать для песевдоэлемента after ширину 100% при наведении, а также при установленном курсоре. В этом нам помогут псевдоклассы :hover и :focus.
Выглядеть это будет так:

.link a:hover:after,
.link a:focus:after {
width: 100%;
}

.link a:hover:after,

.link a:focus:after {

    width: 100%;

}

То есть изначально наш псевлоэлемент имеет ширину 0%, а при наведении она плавно становится 100%.
Также можно сделать так чтобы при наведении на ссылку помимо эффекта плавного подчёркивания происходила также смена цвета ссылки.

Для этого дописываем следующее:

.link a:hover{
color:#225384;
}

.link a:hover{

color:#225384;

}

Если вы хотите чтобы данный эффект применялся для всех ссылок на вашем сайте, то вместо «.link a» нужно будет писать «а».

Чтобы не сбивать вас с толку даю весь код вместе. В этом коде эффект плавного подчёркивания применится ко всем ссылкам на сайте:

a {
text-decoration:none; /*Убираем стандартное подчёркивание ссылки если оно ещё не убрано*/
display: inline-block; /*делаем чтобы наша ссылка из строчного элемента превратилась в строчно-блочный
line-height: 1; /*Задаём высоту строки (можно в пикселях)*/
color:#2F73B6;/*Задаём цвет ссылки*/
}
a:after {
display: block; /*превращаем его в блочный элемент*/
content: «»; /*контента в данном блоке не будет поэтому в кавычках ничего не ставим*/
height: 3px; /*задаём высоту линии*/
width: 0%; /*задаём начальную ширину элемента (линии)*/
background-color: #225384; /*цвет фона элемента*/
transition: width 0.4s ease-in-out; /*данное свойство отвечает за плавное изменение ширины. Здесь можно задать время анимации в секундах (в данном случае задано 0.4 секунды)*/
}
a:hover:after,
a:focus:after {
width: 100%;
}
a:hover{
color:#225384;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

a {

text-decoration:none; /*Убираем стандартное подчёркивание ссылки если оно ещё не убрано*/

display: inline-block; /*делаем чтобы наша ссылка из строчного элемента превратилась в строчно-блочный

line-height: 1; /*Задаём высоту строки (можно в пикселях)*/

color:#2F73B6;/*Задаём цвет ссылки*/

}

 

a:after {

    display: block; /*превращаем его в блочный элемент*/

    content: «»; /*контента в данном блоке не будет поэтому в кавычках ничего не ставим*/

    height: 3px; /*задаём высоту линии*/

    width: 0%; /*задаём начальную ширину элемента (линии)*/

    background-color: #225384; /*цвет фона элемента*/

    transition: width 0.4s ease-in-out; /*данное свойство отвечает за плавное изменение ширины. Здесь можно задать время анимации в секундах (в данном случае задано 0.4 секунды)*/

}

 

a:hover:after,

a:focus:after {

    width: 100%;

}

 

a:hover{

  color:#225384;

}

После добавления данного кода просто сохраняете файл и всё! Всё очень просто не правда ли?! Вот за что я люблю CSS3! С его помощью можно за несколько минут создать очень интересные эффекты и при этом не нужно подключать дополнительных библиотек и т.д.

Куда вставлять весь этот код?

CSS код со всеми прописанными свойствами нужно вставить в CSS файл вашего сайта или вашей темы (если сайт работает на CMS)

Для WordPress этот файл будет находиться по адресу:

wp-content/themes/название темы/style.css

Для Opencart этот файл находится по адресу:

catalog/view/theme/название темы/stylesheet/stylesheet.css

Данный CSS код нужно вносить в самый конец CSS файла.

Надеюсь, что вам понравилась данная статья! Если это так, то я буду очень вам очень признательна, если вы поделитесь ссылкой на неё в соцсетях. Для вам просто нужно нажать на одну из кнопок соцсетей, которые находятся под этой статьей. Так вы поможете мне в развитии моего блога.
На этом у меня всё! Желаю вам успешной реализации данного эффекта у себя на сайте! До встречи в следующих статьях!

С уважением Юлия Гусарь

Плавное подчеркивание ссылки при наведении на чистом CSS — WEB Головоломки

В это статья я расскажу, как можно сделать плавное подчеркивание ссылки на ховере. Все будет реализовано на css, без использования сторонних библиотек.

Предположим, у вас есть ссылка:

<a href="#">Как сделать плавное подчеркивание</a>
По умолчанию, это обычная ссылка, стили для которой задает браузер. Давайте это исправим.
Наш план заключается в том, что с помощью псевдоэлемента :before мы создадим линию, которая будет располагаться чуть ниже ссылки. И этой линией мы и будем в дальнейшем управлять.
Добавим вот такие стили:
a {
	position: relative;
	color: #484848;
	font-size: 1.25rem;
	text-decoration: none;
}
a::before {
	content: '';
	position: absolute;
	left: 0; bottom: -5px;
	width: 100%;
	height: 1.5px;
	background-color: red;
}
У вас должна была появиться красная линия под ссылкой. Это и есть наш псевдоэлемент before.
Изменим ширину этой линии. Вместо 100% зададим 0 — то есть, ее теперь не будет видно.
А затем, когда пользователь будет наводить курсор на ссылку, мы будем менять свойство width у нашего псевдоэлемента. Давайте, пропишем это:
a:hover:before {
	width: 100%;
}
Итак, при наведении на ссылку появляется наша линия. Давайте зададим плавность — укажем какое свойство мы будем менять и пропишем время перехода.
a::before {
	transition: width 0.35s;
}
Здесь мы указали, что переход состояния width с нуля до 100% будет длиться 0.35 секунд.
Итак, итоговый код выглядит следующим образом:
 See the Pen
 Как сделать плавное подчеркивание для ссылки by Pelegrin (@pelegrin2puk)
 on CodePen.
Я показал принцип, по которому можно создавать плавное подчеркивание. Вы можете экспериментировать и менять значения. Или менять свойства. Например, вместо того, чтобы менять width с нуля до 100% поставьте значение width: 100%, но задайте, например, transform: scaleX(0), а при наведении меняйте его на scaleX(1). Пробуйте!
У нас на канале есть видео на эту тему, советуем посмотреть, если остались вопросы.
Плавное подчёркивание ссылки при наведении
Все темы имеют скучную анимацию при наведении на ссылки, это просто подчеркивание, давайте ка это чуток разукрасим и разнообразием эффек, а сделаем это плавным появление подчёркиванием ссылки
Для этого нам в стилях шаблона- style.css нужно найти a
и дописать следующей код
 a {
 line-height: 1;
 display: inline-block;
 color:#0085ba;
 text-decoration:none;
 cursor: pointer;
 }
 a:after {
 display: block;
 content: &quot;&quot;;
 height: 2px;
 width: 0%;
 background-color: #0085ba;
 transition: width .3s ease-in-out;
 }
 a:hover:after,
 a:focus:after {
 width: 100%;
 }



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

a {
    line-height: 1;
    display: inline-block;
    color:#0085ba;
    text-decoration:none;
    cursor: pointer;
}
a:after {
    display: block;
    content: &quot;&quot;;
    height: 2px;
    width: 0%;
    background-color: #0085ba;
    transition: width .3s ease-in-out;
}
a:hover:after,
a:focus:after {
    width: 100%;
}
Немного поясню код
text-decoration:none; — мы избавляемся от стандартного подчеркивание ссылки
Псевдоэлемент :after, добавляет дополнительный элемент, в нашем случае это линия, и определим простенький эффект перехода в свойстве transition:. Ширину линии изначально выставим с нулевым значением width: 0%;, высоту определим в 2px. Цвет линии может быть любым, в примере не стал особо фантазировать и выставил в соответствии цвета текста ссылки.
transition:. время\скорость анимации
Псевдоклассы:hover и :focus. Первый будет определяет стиль ссылки при наведении, второй сработает когда на ссылке курсор. Здесь мы изменим значение ширины в 100%.
Выглядит это будет так
Вот и все, сохраняем файл и обновляем, наводим курсор на ссылку и наша ссылка подчеркивается медленно выплывающей линей. Такай эффект можно добавить не только к ссылкам, но и меню, но об этом в следующей раз
Как изменить вид ссылки при наведении на нее курсора мыши?
Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+
Задача
Изменить цвет  текстовой ссылки, когда на неё наводится курсор мыши и вернуть цвет обратно при уведении курсора.
Решение
Псевдокласс :hover, который добавляется к селектору A, определяет состояние ссылки при наведённом на неё курсоре мыши. В стилях вначале указывается
 селектор A, потом :hover (пример 1).
Пример 1. Изменение вида ссылки
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цвет ссылок</title>
  <style>
   a {
    color: #008000; /* Цвет обычной ссылки */ 
    text-decoration: none; /* Убираем подчеркивание у ссылок */
   }
   a:visited {
    color: #800080; /* Цвет посещённой ссылки */
   } 
   a:hover {
    color: #800000; /* Цвет ссылки при наведении на нее курсора мыши */  
    text-decoration: underline; /* Добавляем подчеркивание */
   }
  </style>
 </head>
 <body>
  <p><a href="rome.html">Cras ingens iterabimus aequor</a> —
  завтра снова мы выйдем в огромное море.</p>
 </body>
</html>
В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда
 на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде
 идёт после :visited. Это имеет значение, иначе посещённые ссылки в данном случае
 не будут изменять свой цвет.
Рис. 1. Вид ссылки при наведении на неё курсора мыши
Аналогично можно изменить и цвет фона под ссылкой при её  наведении, добавив свойство background к селектору A:hover, как показано в  примере 2.
Пример 2. Изменение цвета фона ссылки
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фон под ссылками</title>
  <style>
   a {
    color: #000080; /* Цвет обычной ссылки */
    padding: 2px; /* Поля вокруг текста */
   }
   a:visited {
    color: #800080; /* Цвет посещенной ссылки */
   } 
   a:hover {
    text-decoration: none; /* Убираем подчеркивание */
    color: #fff; /* Цвет ссылки при наведении на нее курсора мыши */  
    background: #e24486; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <p><a href="rome.html">Audaces fortuna juvat</a> - 
     счастье покровительствует смелым.</p>
 </body>
</html>
Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону,  к селектору A добавлено свойство padding.
Рис. 2. Изменение цвета фона ссылки
Эффект плавного подчеркивания ссылки с помощью CSS3
 » Эффект плавного подчеркивания ссылки с помощью CSS3
Всем привет!
Позвольте вам продемонстрировать эффект для ссылок. При наведении на ссылку курсора, ссылка плавно подчеркнется слева направо или наоборот справа налево.
Эффект красивый и простой, так как используется CSS3.
Буду осуществлять эффект с помощью псевдоэлемента «:after»  и свойства «transition».
Предлагаю посмотреть демонстрацию эффекта:
[смотреть демонстрацию]
Как вам эффектик для ссылок?
=> эффект плавного подчеркивания ссылки слева направо
В HTML:
<a href="#">Наведи курсор!</a>
CSS:

.underline {
position: relative;
color: #ff3296;
cursor: pointer;
font-size: 24px;
}
.underline:after {
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 0;
height: 10px;
background-color: #980044;
content: "";
transition: width 0.2s;
}
.underline:hover {
color: #980041;
}
.underline:hover:after {
width: 100%;
}

=> эффект плавного подчеркивания ссылки справа налево
Достаточно заменить строку №10 «left: 0;» на «right: 0;»
CSS:

.underline {
position: relative;
color: #ff3296;
cursor: pointer;
font-size: 24px;
}
.underline:after {
display: block;
position: absolute;
right: 0;
bottom: -10px;
width: 0;
height: 10px;
background-color: #980044;
content: "";
transition: width 0.2s;
}
.underline:hover {
color: #980041;
}
.underline:hover:after {
width: 100%;
}

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: css, эффекты для сайта
Коллекция из 7 анимированных ссылок на CSS
Существует сотни способов для создания красивых ссылок на чистом CSS. Сегодня хотелось бы поделиться оригинальными способами их оформления. В этой коллекции я постарался собрать такие эффекты для ссылок, которые подходят для сплошных текстов, а не отдельных кнопок-ссылок. Кроме того, были отобраны варианты для ссылок стандартного вывода: <a href="url">Текст ссылки</a>, без добавления дополнительных тегов. Это позволит вам производить изменения в существующие сайты без дополнительного вмешательства в html разметку. Для работы со ссылками в спецификации CSS существует 4 псевдокласса:
  • :link — ссылка, по которой ещё не переходили.
  • :hover — ссылка, над которой сейчас находится курсор мыши.
  • :active — ссылка, которую в данный момент нажимает пользователь.
  • :visited — посещённая ссылка, то есть та, по которой уже переходили.
Underline Hover
 Анимация основана на плавном увеличении подчеркивания.
Демо
Скачать
Animate Underline Wavy
 Необычное волнистое подчеркивание, которое анимируется при наведении курсора. Для корректной работы, у ссылки должен присутствовать атрибут data-text. Этот вариант не очень подходит, если у вас уже существует множество ссылок.
Демо
Скачать
Follow Along Links
 При наведении курсором, ссылка оформляется фоновой заливкой. При переходе от ссылки к ссылке, фон также плавно переходит.
Демо
Скачать
Anchor Hover Effects
 Из этой коллекции, эта ссылка мне больше всего понравилась. Основана на использовании псевдоэлементов :after и :before
Демо
Скачать
Progress Link
 Эффект основан на планом изменении цвета текста.
Демо
Скачать
Ссылки которые открываются в новом окне
 Особенность этого оформления — появление подсказки. С помощью CSS у ссылки определяется наличие атрибута target, и через псевдоэлементы выводится уведомление пользователю. Очень удобно.
Демо
Скачать
Link hover effect
 Простой эффект, основанный на плавном появлении верхнего и нижнего подчеркивания.
Демо
Скачать
CSS Див ссылке подчеркивание текста при наведении
У меня есть такой простой div…
<a href="#">
  <div>
    <div>
     <h3>Heading here</h3>
     <p>Text content here.</p>
    </div>
  </div>
</a>

… что позволяет мне менять цвет фона при наведении div.
 Работает отлично,но в результате я получаю текст внутри ссылки, показывающий подчеркивание при наведении курсора.
 Я пробовал несколько способов нацелиться на h3 и p, но до сих пор не могу избавиться от текстового оформления при наведении курсора.
Есть идеи о том, на какой элемент html мне нужно нацелиться, чтобы применить text-decoration: none ?
CSS здесь…
.promo-box
{
text-align:center;
border-radius:5px;
padding:10px;
margin-bottom:20px;
min-height:240px;
}
h3
{
font-family:Lato, Arial, Helvetica, sans-serif;
font-weight:700;
color:#FFF;
font-size:20px;
text-decoration: none;
}
.promo-box p
{
font-family:'Open Sans', Arial, Helvetica, sans-serif;
font-weight:400;
color:#FFF;
font-size:16px;
line-height:16px;
}
.promo-1
{
background-color:#125595;
}
div.promo-1:hover;
}

 html
 css
 hyperlink
 hover
 Поделиться
 Источник

 lowercase    
 21 января 2014 в 20:49
 3 ответа
 
  •  CSS переход подчеркивание показать
     Я пытаюсь сделать переход CSS, в котором подчеркивание появляется снизу вверх, когда вы наводите курсор на элемент href. Я нашел этот пример,который создает подчеркивание, появляющееся слева направо при наведении курсора. a { text-decoration: none; border-bottom: 1px solid blue; margin-right:…
  •  Как удалить подчеркивание текста (которое я установил сам) из  <span>  при наведении курсора?
     Я хочу иметь ссылку, но я хочу иметь событие jQuery fire onclick, поэтому я использую <span> с идентификатором вместо ссылки,чтобы я мог слушать событие click. Я хочу, чтобы <span> выглядел как ссылка, так что: Курсор должен показывать руку при наведении <span> <span>…

6
вам нужно применить текстовое оформление к ссылке, а не к h3 или p , как это:
a{
    text-decoration:none;
}

вы не можете применить стиль text-decoration:none к элементу внутри строки.
 
Вы можете назначить класс ссылке, если вы не хотите применять это правило ко всем ссылкам, для этого созданы классы.
Пример
 вставьте класс внутри css
.not-underline{
        text-decoration:none;
    }

обновите свой html, добавив класс в свою ссылку
 <a href="#"promo-box promo-1">
    <div>
     <h3>Heading here</h3>
     <p>Text content here.</p>
    </div>
  </div>
</a>

 DEMO 
 Поделиться

 Alessandro Minoccheri    
 21 января 2014 в 20:53

2
Вы можете добавить имя родительского селектора перед тегом привязки в CSS.
<div>
  <a href="#">
    <div>
      <div>
        <h3>Heading here</h3>
        <p>Text content here.</p>
      </div>
    </div>
 </a>
</div>

CSS:
.display a{
    text-decoration:none !important;
}

Вот  демо — версия
 Поделиться

 Sagar Awasthi    
 27 марта 2014 в 11:02

0
И чтобы избежать подчеркивания текста при наведении курсора, добавьте это в свой css:
a:hover{
  text-decoration:none;
  }

 Поделиться

 Faysal Ahmed    
 21 января 2014 в 20:57
Похожие вопросы:
Как удалить подчеркивание при наведении курсора?
 Я не могу удалить подчеркивание при наведении курсора на этой странице: http:/ / www.studyroomguides.net/?page_id=19 Я пробовал добавлять: .a:hover{ text-decoration: none; } Я бы хотел, чтобы…
Удалить подчеркивание при наведении курсора в firefox
 Я добавил на свой сайт ховерборд, который переворачивается, чтобы показать больше текста. Он хорошо работает только с хромом, поэтому я попробовал отключить его в Firefox. Он больше не…
CSS: почему у меня есть красное подчеркивание на ссылках изображений при наведении курсора?
 На моем веб-сайте у меня есть следующее CSS: a:hover{color:red;border-bottom:1px solid} Это показывает красное подчеркивание на текстовых ссылках при наведении курсора, что желательно. Однако это…
CSS переход подчеркивание показать
 Я пытаюсь сделать переход CSS, в котором подчеркивание появляется снизу вверх, когда вы наводите курсор на элемент href. Я нашел этот пример,который создает подчеркивание, появляющееся слева направо…
Как удалить подчеркивание текста (которое я установил сам) из  <span>  при наведении курсора?
 Я хочу иметь ссылку, но я хочу иметь событие jQuery fire onclick, поэтому я использую <span> с идентификатором вместо ссылки,чтобы я мог слушать событие click. Я хочу, чтобы <span>…
Сделать подчеркивание стрелять по ссылке при наведении курсора
 Я ищу способ сделать так, чтобы подчеркивание стреляло под ссылкой при наведении курсора и снова исчезало, когда мышь не зависала. Я не уверен, что хорошо объясняю, поэтому, пожалуйста, скажите мне,…
Как сделать пунктирное подчеркивание ссылки при наведении курсора?
 У меня есть ссылка <a class=link-articles href=#articles>My Articles</a> и мой css .link-articles { text-decoration: underline; color: blue; } Однако при наведении курсора Я хотел бы…
Дисплей див при наведении тег привязки
 Я хочу, чтобы отобразить див при наведении на тег привязки, используя css. Ниже приведен мой код html <td class=cellStyle> <a href=# class=linkStyle> <div>Home</div> <div…
CSS эффект при наведении курсора (пунктирное подчеркивание + изменение цвета текста)
 Я совершен CSS нуб Не могли бы вы уделить мне минутку и помочь создать пунктирное подчеркивание (с пробелом) с изменением цвета текста при наведении мыши? Я был бы очень признателен вам за помощь!…
CSS подчеркивание исчезает при использовании непрозрачности
 В текущем стабильном Chrome при использовании следующего CSS, где установлена некоторая непрозрачность, подчеркивание текста исчезает. Когда непрозрачность установлена на 1 или удалена,…
 Как выделить текстовые ссылки с помощью анимации наведения! ▪️ Запустить Проклятую Вещь! 
 Надоело традиционное подчеркивание ссылок на Squarespace? Я тоже, поэтому я удалил его, скорректировал цвет ссылки, и это было нормально.
 Я был удовлетворен тем, что традиционный связанный текст был просто сплошным, ровным цветом, пока я не нашел этот маленький драгоценный камень на чьем-то сайте WordPress!
 Я решил посмотреть, смогу ли я «заставить это работать» на моем собственном веб-сайте с помощью Squarespace, потому что что бы вы ни думали обо мне, пожалуйста, знайте, что я не (и не считаю себя) разработчиком.😄
 Тем не менее, может (вероятно, есть) более чистый / лучший способ сделать это, если вы не похожи на меня, если вы разработчик и вам не нужно взламывать свой путь, создавая подобный фрагмент. Но этот фрагмент подходит мне и, надеюсь, сработает и для вас!
  Я также должен отметить, что я использую это на своем собственном сайте 7.1 (только) и еще не пробовал его ни на каких сайтах 7.0, поэтому я понятия не имею, как и если он работает на 7.0. Часто код между ними будет отличаться в двух версиях Squarespace.
 Эти оговорки в сторону, давайте углубимся!
 Как установить CSS на 
 ваш сайт 
 Во-первых, обязательно ознакомьтесь с этим постом, чтобы узнать, как удалить подчеркивание ссылки на всем сайте в версии 7.1 (потому что это недавно изменилось). Чтобы этот фрагмент работал, это подчеркивание должно быть удалено, поэтому возьмите этот фрагмент и вставьте его прямо над этим и убедитесь, что он помечен, чтобы вы знали, что делает каждый фрагмент.
 Теперь, войдя в систему, перейдите на страницу вашего веб-сайта, которая, как вы знаете, уже содержит текстовые ссылки.Если вы это сделаете, вы сможете видеть обновления в реальном времени, редактируя этот фрагмент, и вносить изменения намного проще.
 Шаг 01 — Скопируйте приведенный ниже код: 
  // низкое выделение и анимация для текстовых ссылок //
/ * стиль статического связанного текста * /
.sqs-block-html a {
  цвет фона: прозрачный;
  box-shadow: rgba (255,255,255, .3) 0 -7px 0 0 вставка;
  размер коробки: рамка-рамка;
  цвет: #XXXXXX;
  курсор: указатель;
  наброски: 0;
  текстовое оформление: нет;
  отступ слева: 5 пикселей;
  отступ справа: 5 пикселей;
}
/ * анимация наведения * /
.sqs-block-html a: hover {
  цвет фона: #XXXXXX;
  цвет: rgba (255,255,255,1)! important;
  тень коробки: нет;
}
// КОНЕЦ стилизации текстовых ссылок //  
 Шаг 02 — Перейдите в Design 
 Если у вас уже есть какой-то код, установленный вами или кем-то другим, я бы посоветовал вам создать там некоторое разделение, нажав несколько раз Enter или что-то еще, что вам нужно сделать, чтобы убедиться, что код организован и прост в использовании. Сортировать по.Вот почему у меня есть начало и конец заголовка в / * mine * /, чтобы я мог видеть, к чему конкретно относится этот сегмент.
 Шаг 03 — Теперь настройте цвета! 
 Везде, где вы видите  #XXXXXX , замените его на один из шестнадцатеричных кодов цвета вашего бренда.
 Везде, где вы видите  rgba (255,255,255,1)  или  rgba (255,255,255, .3) , это просто белый цвет без или с небольшой прозрачностью. Если вам нужна помощь в создании этого стиля цветового кода, используйте бесплатный инструмент, например Coolors.co, чтобы найти эквивалент в шестнадцатеричном цветовом коде вашего бренда. Часть, определяющая степень прозрачности, — это последняя цифра или десятичная точка. 1 — сплошной, 0 — прозрачный, а все, что находится между десятичными знаками, — прозрачное, что означает, что .3 будет примерно 30% прозрачности.
 Когда вы закончите редактирование,…
 Шаг 04 — Нажмите «Сохранить» 
 Готово!
 А теперь полюбуйтесь или похвастайтесь своим новым стилем текстовых ссылок и отметьте меня на IG с изображением вашего нового стиля! @launchthedamnthing
 Кнопка | Webflow University 
 В этом видео используется старый интерфейс.Скоро появится обновленная версия!
 Кнопка служит вашим призывом к действию (CTA) и ссылками на страницы, формы, ресурсы и многое другое.
 ‍
  В этом уроке: 
  1.  Основные сведения о кнопках
  2.  Состояния кнопок
  3.  Анимированные переходы
  4.  Несколько кнопок
  5.  Пользовательские блоки ссылок
 Основные сведения о кнопках 
 Вы можете добавить кнопку из  Добавить панель  (A)> вкладка  Элементы >  Базовый раздел .Отредактируйте текст кнопки, дважды щелкнув кнопку или выбрав кнопку и нажав  Введите .
 Чтобы добавить цвет фона, щелкните панель  «Стиль» справа, прокрутите до  «Фон » и выберите цвет в палитре цветов.
 ‍
 Шрифт кнопки и все стили оформления унаследованы от тега  Body (All Pages) . Чтобы внести изменения, перейдите к тегу  Body (All Pages)  на панели  Style , чтобы установить и переопределить типографические параметры по умолчанию.
 ‍
 Когда вы вносите изменения в новый элемент, автоматически создается класс. Классы позволяют управлять стилями и переопределять их. Чтобы повторно использовать стиль, щелкните метку класса и переименуйте его.
 ‍
 Размер кнопки определяется текстом внутри (длина текста, размер шрифта, высота строки) и отступом (пространство внутри кнопки).
 Чтобы переопределить значения отступов по умолчанию, на панели  стиля  в разделе  Интервал >  Отступ , удерживайте  Option (на Mac)  или  Alt (на Windows) , затем щелкните и перетащите курсор.Это отрегулирует оба значения заполнения одновременно (либо по бокам, либо сверху и снизу).
 ‍
 Вы можете настроить размер кнопки, изменив ее  Ширина  и  Высота  на панели  Стиль  до  Размер .
 ‍
 Кнопка может ссылаться на URL-адрес, внутреннюю или внешнюю страницу, раздел страницы, загрузку файла, а также может запускать электронное письмо или телефонный звонок.
 ‍
 Вы можете либо щелкнуть значок шестеренки на элементе кнопки на холсте, либо открыть панель настроек   справа, чтобы настроить параметры кнопки.
 Подробнее о настройках ссылок.
 Состояния кнопок 
 Если вы щелкните поле  Selector  на панели  Style , вы увидите все состояния кнопок. По умолчанию на кнопке нет стиля наведения курсора. Вы можете щелкнуть состояние  Hover  в раскрывающемся списке, чтобы изменить внешний вид кнопки при наведении на нее курсора.
 ‍
 Здесь вы также можете установить цвет фона, который будет изменяться при наведении курсора. Если вы добавите свой выбор цвета в качестве глобального образца, вы можете повторно использовать его в своем проекте.
 ‍
 Вы можете установить любой из других стилей при наведении курсора под  Эффекты , например, добавив преобразование. Например, выберите  Move , чтобы кнопка двигалась при наведении курсора.
 Подробнее о:
 Чтобы поэкспериментировать с другими свойствами кнопки, переключитесь из состояния  Hover  на  None  в раскрывающемся меню обратно в  Selector . Вы можете сделать такие вещи, как скругление углов, изменив  Radius  в разделе  Borders .
 ‍
 Чтобы добавить тень к вашей кнопке, перейдите в раздел  Effects  на панели  Style , щелкните значок плюса рядом с  Box shadows,  и настройте параметры (например, смягчите  Blur  на установите его на 20 пикселей и установите угол  Угол  на 180). Поскольку это не состояние наведения, вы можете установить для параметров  Distance  и  Color ,  opacity  значение 0. Позже мы добавим тень блока, которая смещает эти значения и делает эффект наведения более драматичным.
 ‍
 Теперь, когда вы снова переходите в состояние  Hover , вы можете изменить ту же тень, которую вы только что создали (настроить ее, чтобы она изменялась при наведении курсора). Вы можете увеличить непрозрачность (например, установить непрозрачность до 20%) и изменить расстояние (например, до 3 пикселей).
 ‍
 Вернитесь в состояние  Нет , чтобы проверить, как ваша кнопка работает при наведении курсора.
 Подробнее об использовании теней блоков.
 Анимированные переходы 
 Анимированный переход делает перемещение между состоянием «нет» и состоянием наведения более плавным.
 Чтобы добавить переход, убедитесь, что вы находитесь в состоянии  None  (всегда добавляйте переходы из состояния None) на панели Style. В разделе «Эффекты  » щелкните значок «плюс» рядом с полем «Переходы  ». Щелкните в меню рядом с  Тип  и выберите  Цвет фона . По умолчанию установлена ​​длительность 200, что означает переход более 200 миллисекунд. Наведите курсор на кнопку, чтобы проверить это.
 ‍
 Чтобы анимировать тень, примените переход к свойству  Box shadow  и измените кривую плавности.По умолчанию используется «легкость», но вы можете попробовать более драматичное начало и более постепенное окончание («круговое замедление» — хороший выбор). Поскольку начало настолько драматично, вы можете увеличить время до 1000 мс.
 ‍
 Наведите курсор, чтобы просмотреть свою работу.
 Вы всегда можете нажать Escape (на Mac и Windows), чтобы отменить выбор элемента, но граница элемента (синий контур при наведении курсора для проверки) может отвлекать. Рядом со значками точек останова вы можете выбрать  Скрыть края элементов.
 ‍
 Чтобы переместить кнопку при наведении, вернитесь в состояние  Hover  в  Selector  на панели Style, в разделе  Effects  щелкните значок плюса рядом с  2D & 3D Transforms . Добавьте значение вашего хода (например, 3PX вверх).
 ‍
 Также можно добавить переход преобразования. Вернитесь в состояние  None  для вашей кнопки. Прокрутите вниз до раздела «Эффекты» и снова щелкните значок «плюс» рядом с полем « Transforms ».Рядом с Type выберите Transform из меню и измените  Easing  (например, на «круговое замедление») и  Duration  (например, на 1000 MS).
 ‍
 Оцените свою работу в режиме предварительного просмотра.
 Несколько кнопок 
 Чтобы разместить несколько кнопок рядом друг с другом, скопируйте и вставьте первую кнопку. Удерживая нажатой клавишу Alt при перетаскивании стрелок полей, вы создадите пространство с обеих сторон кнопки и сохраните ее выравнивание по центру. Помните, что изменения стиля, которые вы вносите в любую кнопку с этим классом, повлияют на все кнопки с этим классом.
 ‍
 Вместо добавления специального класса к кнопкам в разделе вашего героя вы можете добавить блок div, назвать его (например, оболочка кнопок) и перетащить каждую кнопку внутрь. Это позволяет вам управлять одним классом кнопок и устанавливать отрицательное поле для идеального выравнивания.
 Это работает со всем — вы можете использовать обертку кнопки (с отрицательным полем), чтобы сместить любое симметричное поле, которое вы установили на кнопках в любом месте. Вам не придется управлять разными группами кнопок только потому, что их выравнивание отличается.
 Пользовательские блоки ссылок 
 Блок ссылок похож на блок div — это поле, в которое мы можем помещать элементы. Перетащите блок  Link  на холст с панели  Add  под  Basic  и назовите его, чтобы применить класс.
 ‍
 ‍
 ‍ 
 Из панели  Добавить  под  Типографика  перетащите текстовый блок   на холст внутри блока  Link  и дважды щелкните, чтобы отредактировать текст. Чтобы избавиться от подчеркивания, щелкните  X  рядом с  Style  в разделе  Typography  на панели  Style .Вы можете изменить цвет ссылки на этой же панели.
 Вы можете добавить значок (например, стрелку), перетащив его прямо внутри блока ссылок. Если вы используете панель стилей для ввода значения вместо того, чтобы щелкать и перетаскивать угол для изменения размера значка, автоматически созданный класс позволит вам изменять размер стрелки каждый раз, когда вы повторно используете этот блок ссылок в вашем проекте.
 ‍
 Чтобы выровнять значок внутри кнопки, измените настройки на панели  Style  в разделе  Layout  (e.грамм.  Display : center,  Align : center) и отрегулируйте поля под  Spacing .
 ‍
 И поскольку вы добавили гибкость к классу кнопки Main, ваши две кнопки наверху займут всю ширину блока div оболочки Button. Чтобы исправить это, выберите  Обертку кнопок  в  Navigator,  и на панели  Style  в  Layout , установите  Display  по центру.
 Это только начало — вы так много можете сделать.Особенно с взаимодействиями и анимацией. У нас есть полный курс и множество видео и статей по этим темам, так что посмотрите их в Webflow University, если вы еще этого не сделали.
 В этом видео используется старый интерфейс. Скоро появится обновленная версия!
 Image Hover Effects — Elementor Addon — плагин WordPress 
 
 Image Hover Effects Addon для Elementor Page Builder — лучший в своем классе аддон, который позволяет вам устанавливать индивидуальные эффекты наведения для вашего изображения.Он уделяет внимание деталям, позволяя выравнивать текст, изменять фон, устанавливать границы и предлагает ряд других функций. Этот бесплатный плагин имеет более 40 эффектов наведения изображения, начиная от затухания и нажатия до масштабирования и размытия. Также доступна предустановленная комбинация двух или более эффектов. Он создает интерактивное пространство для пользователей вашего сайта.
 Добавьте заголовок и описание к своему изображению, установите тег заголовка, добавьте значки, ссылку на страницу или веб-сайт и многое другое. Всякий раз, когда вы прокручиваете курсор по изображению, выполняется эффект наведения для отображения заголовка и описания.
 Надстройка виджета предназначена для использования как новичками, так и продвинутыми пользователями. Вы можете изменить внешний вид эффекта нажатием нескольких кнопок или добавить собственные атрибуты HTML или CSS.
 Характеристики 
  •  Простота настройки параметров.
  •  40+ эффектов наведения на изображение.
  •  Границы круга и квадрата имеют все эффекты.
  •  Центрировать текст по горизонтали.
  •  Управляйте промежутками между элементами.
  •  Совместимость с WPML
  Фон : установите цвет фона для эффекта.Вы также можете выбрать установку прозрачного фона.
  Горизонтальное выравнивание : Выровняйте заголовок и описание по левому краю, по центру, по правому краю с горизонтальным выравниванием.
  Вертикальное выравнивание : Выровняйте заголовок и описание по верхнему, среднему или нижнему краю с вертикальным выравниванием.
  Padding : установите отступ для содержимого поверх эффекта.
  Радиус границы : Вы можете использовать эту функцию, чтобы обрезать острые края изображения, чтобы придать ему более плавный вид.
  Заголовок : Установите цвет заголовка, который дополняет фон. Используя опцию «Типографика», вы можете выбрать шрифт, размер шрифта, толщину, регистр, стиль (курсив, полужирный и т. Д.), Оформление (надстрочный, подчеркнутый и т. Д.), Высоту строки и межбуквенный интервал в заголовке.
  Описание : Точно так же вы можете выбрать цвет и типографику для вашего описания в этой опции.
  Значок : установите цвет значка, его размер и расстояние между значком и заголовком.
 Настройки 
 Image Hover Effects for Elementor поставляется со стилями CSS3, которые добавляют потрясающие, но мягкие и приятные эффекты наведения к вашим изображениям. Позвольте вашим изображениям постепенно увеличиваться или уменьшаться, сдвигаться, переворачиваться, затворяться, масштабироваться, складываться, вращаться и т. Д. Одним щелчком мыши. Никакого кодирования. Эффекты наведения изображения делают вещи простыми и элегантными. Если у вас есть несколько изображений для отображения, вы можете просто скопировать стиль и вставить его на другое изображение. У вас также есть возможность дублировать изображение.Эффекты наведения от Image Hover Effects полностью адаптивны и подходят для очень маленьких и очень больших устройств. Они созданы с использованием гибкого и надежного CSS.
 Поисковая оптимизация 
 С точки зрения SEO, без добавления тегов заголовков, заголовков и описаний к изображениям не обойтись. Теги заголовков и описания почти всегда вызывают щелчок у пользователя, тогда как ключевые слова в заголовках и заголовках могут помочь вашему веб-сайту занять более высокое место в результатах поиска.
 Image Hover Effects для Elementor позволяет делать все это и многое другое всего за несколько секунд.Просто добавьте заголовок вашего изображения в поле Заголовок и установите тег (h2-H6, абзац, диапазон). Затем добавьте описание в поле Описание. Вот и все. Теперь вы можете настроить внешний вид своего текста, сделав его аккуратным и четким, диким и художественным, или выбрать из множества других вариантов.
 Еще одним важным фактором являются ссылки на определенные страницы или ссылки для увеличения трафика. Image Hover Effects предоставляет возможность связать ваше изображение с указанным URL-адресом. Вы можете скопировать ссылку, на которую должны быть перенаправлены ваши пользователи (при нажатии на изображение), и вставить ее в поле под разделом «Ссылка на».
 Где можно использовать 
 На любом веб-сайте WordPress, поддерживающем Elementor! Будь то сайт блогов, новостной сайт или даже сайт электронной коммерции или электронного обучения, Image Hover Effects работает безупречно. Поскольку существует более 40 эффектов наведения, вы можете использовать комбинацию стилей, чтобы творить чудеса с вашими изображениями. Но почему вы должны останавливаться на достигнутом? Попробуйте нашу версию Pro. Версия Pro предлагает более 150+ эффектов наведения, а также ряд других преимуществ.
 Emage Hover Effects для Elementor (Pro) 
  •   150+ эффектов наведения 
    •  От
  •  Basic до  advanced  Эффекты наведения изображения
  •  Применение  отдельных эффектов  к изображению, наложению и содержимому
  •   9 центровок  опций
  •  Практически  неограниченный эффект  комбинаций
  •  Настроить контент с помощью ссылок, кнопок, цветов и типографики
  •   Post Grid  Эффекты наведения
  •  Динамические поля (с Elementor Pro)
 Полезные ссылки 
 Демонстрация эффектов наведения | Emage Hover Effects (Pro) | Купить Emage Hover Effects
 Общие — База знаний Impreza 
 Обновлено 4 месяца 2 недели назад
 Режим обслуживания # 
 Включите эту опцию, чтобы перевести сайт в режим обслуживания.Определенная страница (выбранная из списка страниц) будет отображаться для всех не авторизованных посетителей.
 Включить статус «503 Служба недоступна» # 
 Включите этот параметр, чтобы настроить сервер на отправку заголовков 503 (Служба недоступна). Это может помочь избежать индексации этой страницы обслуживания роботами поисковых систем. Используйте эту опцию только на короткий период времени.
 Иконка сайта # 
 Выберите изображение, которое будет использоваться в качестве значка браузера и приложения для вашего сайта.Иконки должны быть квадратными, иметь ширину и высоту не менее 512 пикселей. Этот вариант просто повторяет функциональность WordPress для большего удобства.
 Экран предварительной загрузки # 
 Выберите один из предустановленных предварительных загрузчиков или назначьте свой собственный.
 Эффект пульсации # 
 Включает отображение эффекта пульсации при нажатии на следующие элементы:
  •  Пункты меню в заголовке
  •  «Во весь экран» Искать в заголовке
  •  Кнопка «В начало»
  •  Кнопка со ссылкой
  •  Изображение со ссылкой
  •  Колонка со ссылкой
  •  Интерактивный баннер со ссылкой
  •  IconBox со ссылкой и иконкой «Сплошной круг»
  •  Социальные ссылки
  •  Кнопки общего доступа
  •  Значок закрытия окна сообщения
  •  Вкладки
  •  Вертикальные выступы
  •  Сообщение Назад / Следующее Навигация с «двусторонней» раскладкой
  •  Элементы сетки, если для параметра «Переопределение ссылки» установлено значение «Опубликовать ссылку»
  •  Фильтровать элементы в сетке
 Посмотрите, как это выглядит на http: // impreza2.us-themes.com/ и http://impreza8.us-themes.com/.
 Закругленные углы # 
 Включает / выключает закругленные углы для всех элементов темы, которые не имеют собственной аналогичной опции (например, элемент «Социальные ссылки» имеет выбор «Форма значков»).
 Ссылки, подчеркивание # 
 Включает / выключает подчеркивание текстовых ссылок при наведении курсора.
 Специальные возможности для клавиатуры # 
 Включает / выключает визуальную подсветку интерактивных элементов (кнопки, пункты меню, ссылки, поля формы), чтобы указать их состояние в фокусе.
 Кнопка «Вернуться к началу» # 
 Включите этот параметр, чтобы отобразить кнопку, которая позволяет прокручивать страницу обратно вверх и настраивать ее внешний вид.
 Уведомление о файлах cookie № 
 Включите эту опцию, чтобы показывать уведомление новым посетителям сайта. Может быть полезно из-за политики GDPR.
 Длительность плавной прокрутки # 
 Установить продолжительность анимации плавной прокрутки.
 Растущее подчеркивание ссылки, в Tailwind CSS 
 Сегодня я узнал, что Learn 11ty From Scratch открывается бесплатно.В поисках новостей я нашел статью Бена Майерса «Я наконец понимаю каскад данных Eleventy», которая напомнила мне, насколько мне нравятся некоторые его стили, включая ссылки, чьи подчеркивания коренастые и растут до полного фона, когда вы наводите курсор или сосредотачиваетесь на их.
 В последнее время я много использовал Tailwind на сайтах с целевыми страницами, чтобы можно было копировать компоненты других людей, но я не нашел стиля ссылок, который меня устраивал, поэтому я перенес работу Бена в Tailwind. Посмотрите его на Tailwind Play или продолжайте читать, чтобы просто увидеть исходный код здесь.
 Вам необходимо использовать градиент от цвета к самому себе, чтобы ваш фон был «фоновым изображением», а не «цветом фона».
  
 Я текст,  я ссылка , и все. 

  
 Войти в полноэкранный режимВыйти из полноэкранного режима
 Остальные трюки для вечеринок вы можете завершить, создав себе новый класс Tailwind в своем файле  tailwind.css   (или как вы его называете) :
  @ база хвостового ветра;
компоненты @tailwind;
@tailwind утилиты;

@layer utilities {
  .bg-size-2em {
    размер фона: 100% 0.2em;
  }
  .bg-100 {
    размер фона: 100% 100%;
  }
  .bg-near-bottom {
    background-position: 0 88%;
  }
  .bg-grow-underline {
    @apply bg-no-repeat bg-near-bottom bg-size-2em transition-all duration-200 hover: bg-100 focus: bg-100;
  }
}
  
 Войти в полноэкранный режимВыйти из полноэкранного режима
 В качестве альтернативы, если вы чувствуете себя чище, не раскрывая себе промежуточные концепции, такие как  bg-size-2em ,  bg-100  и  bg-near-bottom , для повторного использования в другом месте вашего HTML  (см. Tailwind Play)  :
  @ база хвостового ветра;
компоненты @tailwind;
@tailwind утилиты;

@layer utilities {
  .bg-grow-underline {
    размер фона: 100% 0.2em;
    background-position: 0 88%;
    @apply bg-no-repeat transition-all duration-200;
  }
  .bg-grow-underline: hover {
    размер фона: 100% 100%;
  }
  .bg-grow-underline: focus {
    размер фона: 100% 100%;
  }
}
  
 Войти в полноэкранный режимВыйти из полноэкранного режима
 Обратите внимание, что вы не можете использовать  bg-cover  для наведения / фокуса, даже если он выглядит так же, как  background-size: 100% 100% , потому что плавный переход размера фона работает только с явным размером.
 Обновление
: Бен говорит, что получил код от Моргана Веземанна.
 глобальных стилей | Oxygen — Visual Site Builder для WordPress 
 Глобальные стили
 позволяют вам устанавливать стили для всех элементов на ваших страницах. Это дает вам простой способ изменить внешний вид вашего дизайна для всего веб-сайта сразу.
 Если элемент не имеет стилей, созданных специально для него, будут использоваться глобальные стили.
 Глобальные стили
 можно редактировать в  «Управление»> «Настройки»> «Глобальные стили ».
 Цвета 
 Определите палитры цветов для всего сайта. Редактирование цвета здесь обновит его везде, где он используется.
 Подробности см. В разделе «Глобальные цвета».
 Шрифтов 
 Выберите шрифты, используемые на вашем сайте.
 См. Подробности в разделе «Глобальные шрифты».
 Заголовки 
 Вы можете указать глобальные стили для заголовков ( h2, h3, h4, h5, h5,  и  h6). 
 Для каждого тега заголовка можно настроить следующее:
  •   Размер шрифта 
  •   Вес шрифта 
  •   Высота линии 
  •   Цвет 
 Основной текст 
 Основной текст — это весь текст на вашем сайте.Установленные для заголовков настройки имеют приоритет над стилями основного текста.
 Для основного текста можно настроить следующее:
  •   Размер шрифта 
  •   Вес шрифта 
  •   Высота линии 
  •   Цвет 
 Ссылки 
 В Oxygen есть три элемента ссылки:  Text Link, Link Wrapper  и  Button .
 Настройки в пределах  Все  применяются ко всем типам элементов ссылок, а также к ссылкам, созданным вне Oxygen, например, ссылкам в содержимом сообщений блога.
 Текстовая ссылка и настройки оболочки ссылок 
  •   Цвет 
  •   Вес шрифта 
  •   Оформление текста (подчеркивание) 
  •   Цвет при наведении 
  •   Оформление текста при наведении 
 Настройки кнопок 
  •   Толщина шрифта 
  •   Радиус границы 
 Ширина и точки останова 
 Ширина страницы: установите ширину страницы для сайта.См. Подробности в разделе «Ширина страницы».
 Таблетка: Установите точку останова планшета.
 Пейзаж: установите точку останова в альбомной ориентации.
 Книжная: установите точку останова книжной (мобильной).
 После изменения этих точек останова необходимо повторно создать кеш CSS Oxygen через Oxygen> Настройки> Кэш CSS.
 Разделы 
 Контроль заполнения контейнеров для элементов   Section  . По умолчанию это 75 пикселей для верхнего и нижнего краев и 20 пикселей для левого и правого краев.
  Header Builder Элемент  будет использовать левое и правое заполнение, но игнорирует верх и низ.
 Анимация на свитке 
 Настройте анимацию, запускаемую при прокрутке, с помощью библиотеки Animate on Scroll. Выбранные здесь настройки станут настройками анимации по умолчанию для любого элемента, для которого включена анимация. Эти глобальные настройки анимации можно переопределить для каждого элемента.
  •   Тип анимации —  Определяет тип анимации, которая будет использоваться, например переворот, скольжение или затухание.
  •   Продолжительность анимации —  Определяет количество миллисекунд, в течение которых выполняется анимация.
  •   Якорь анимации —  Определяет, какое положение элемента относительно области просмотра должно запускать анимацию.
  •   Animation Easing —  Определяет кривую скорости анимации. Например, при простом выходе анимация будет медленнее в начале и в конце и быстрее в середине.
  •   Смещение триггера анимации —  Определяет смещение точки триггера анимации (относительно положения прокрутки области просмотра) в пикселях.Положительное значение может использоваться, чтобы гарантировать, что весь элемент находится в области просмотра до запуска анимации, тогда как отрицательное значение может использоваться для запуска анимации до того, как элемент войдет в область просмотра.
  •   Задержка анимации —  Определяет промежуток времени между запуском анимации и началом анимации.
  •   Анимировать только один раз —  По умолчанию элемент, покидающий область просмотра, повторно устанавливает анимацию и вызывает ее повторный запуск, когда элемент повторно входит в область просмотра.Вы можете отключить это поведение, выбрав «Да».
  •   Disable On —  Позволяет выбрать ширину области просмотра, ниже которой анимация будет отключена. Для повышения производительности рекомендуется отключить анимацию для мобильных устройств.
 Скрипты 
 Включите дополнительные функции с помощью скриптов.
 Плавная прокрутка хешированных ссылок 
 Сценарий Smooth Scroll to Hash Links вызывает хэш-ссылки, которые представляют собой ссылку, в которой URL-адрес ссылается на идентификатор элемента на вашей странице, для плавной прокрутки области просмотра к целевому элементу.Чтобы включить его, установите флажок «Smooth Scroll to Hash Links».
  •   Время прокрутки  — количество миллисекунд, которое требуется области просмотра для прокрутки к целевому элементу.
 Растущее подчеркивание ссылки, в Tailwind CSS 
 15 июн 2021
 🔖
 Веб-разработка
 💬 EN
 Сегодня я узнал, что Learn 11ty From Scratch открывается бесплатно. В поисках новостей я нашел статью Бена Майерса «Я наконец понимаю каскад данных Eleventy», которая напомнила мне, насколько мне нравятся некоторые его стили, включая ссылки, чьи подчеркивания коренастые и растут до полного фона, когда вы наводите курсор или сосредотачиваетесь на их.
 В последнее время я много использовал Tailwind на сайтах с целевыми страницами, чтобы можно было копировать компоненты других людей, но я не нашел стиля ссылок, который меня устраивал, поэтому я перенес работу Бена в Tailwind. Посмотрите его на Tailwind Play или продолжайте читать, чтобы просто увидеть исходный код здесь.
 Вам необходимо использовать градиент от цвета к самому себе, чтобы ваш фон был «фоновым изображением», а не «цветом фона».
  
 Я текст и  Я ссылка , вот и все. 

  
 Остальные трюки для вечеринок вы можете завершить, создав себе новый класс Tailwind в своем файле  tailwind.css   (или как вы его называете) :
  @ база хвостового ветра;
компоненты @tailwind;
@tailwind утилиты;

@layer utilities {
  .bg-size-2em {
    размер фона: 100% 0.2em;
  }
  .bg-100 {
    размер фона: 100% 100%;
  }
  .bg-near-bottom {
    background-position: 0 88%;
  }
  .bg-grow-underline {
    @apply bg-no-repeat bg-near-bottom bg-size-2em transition-all duration-200 hover: bg-100 focus: bg-100;
  }
}
  
 В качестве альтернативы, если вы чувствуете себя чище, не раскрывая себе промежуточные концепции, такие как  bg-size-2em ,  bg-100  и  bg-near-bottom , для повторного использования в другом месте вашего HTML  (см. Tailwind Play)  :
  @ база хвостового ветра;
компоненты @tailwind;
@tailwind утилиты;

@layer utilities {
  .bg-grow-underline {
    размер фона: 100% 0.2em;
    background-position: 0 88%;
    @apply bg-no-repeat transition-all duration-200;
  }
  .bg-grow-underline: hover {
    размер фона: 100% 100%;
  }
  .bg-grow-underline: focus {
    размер фона: 100% 100%;
  }
}
  
 Обратите внимание, что вы не можете использовать  bg-cover  для наведения / фокуса, даже если он выглядит так же, как  background-size: 100% 100% , потому что плавный переход размера фона работает только с явным размером.
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *