Как в css сделать подчеркивание: Как сделать подчеркивание через CSS

Содержание

Как сделать подчеркивание в стиле волны в навигации (CSS)?

Таким образом, в большинстве случаев подчеркивание (как выделение) текущего навигационного элемента-это просто строка. Есть ли способ сделать его волнистым (как волны под текстом меню)? А можно ли сделать несколько слоев волн (так это выглядит как прилив)?

html

css

Поделиться

Источник


Bitsnapper    

31 октября 2015 в 11:50

4 ответа


  • CSS подчеркивание

    Чтобы подчеркнуть текст в CSS, мы можем сделать: h4 {text-decoration:underline;} Однако это только подчеркивает текст, заключенный в тег h4. Что делать, если вы хотите, чтобы подчеркивание шло по всей странице? Спасибо

  • Пользовательское подчеркивание тега в css

    У меня есть div, внутри которого есть заголовок, и я хочу подчеркнуть заголовок таким образом, чтобы подчеркивание покрывало приблизительно 80% div с отступом 10% с обеих сторон. Кроме того, я хочу, чтобы подчеркивание было на несколько пикселей ниже заголовка. Я пытаюсь это сделать В части html…



1

Волнистое подчеркивание определено в спецификациях CSS, но на данный момент (октябрь 2015 года) Firefox- единственный браузер , который его поддерживает :

.error {
    color: inherit;
    text-decoration: underline;  /* All browsers */
    text-decoration-color: red;  /* Firefox only */
    text-decoration-style: wavy; /* Firefox only */
}
Have you seen the <a href="#">laetst</a> Star Wars movie yet?

Для решения , которое работает во всех браузерах, вы можете использовать фоновое изображение :

.error {
    color: inherit;
    text-decoration: none;
    background: url(http://www.phpied.com/images/underline.gif) bottom repeat-x;
}
Have you seen the <a href="#">laetst</a> Star Wars movie yet?

Поделиться


John Slegers    

31 октября 2015 в 11:57



1

Просто используйте data:image/png;base64 , формируя одну волну на сетке (например) 10×10 пикселей.
Настройка размера фона для желаемого волнового эффекта.

Работа Fiddle здесь
работа над ним в течение некоторого времени должна достичь желаемого эффекта.

a {
  line-height: 15px;
  font-size: 15px;
  text-decoration: none;
  position: relative;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAH0lEQVQYlWNgGObgPxQTVISNjVMRTjF8Vv0nRhFcDQDv1Qn3IBa3OQAAAABJRU5ErkJggg==) repeat-x;
  background-position: bottom;
  background-size: 10% 30%;
}
<a href="#null">text of the anchor</a>

Поделиться


holden    

31 октября 2015 в 13:32



0

То, что вы пытаетесь сделать, может быть достигнуто с помощью графики SVG.
Моя рекомендация была бы:

  • Создайте кривую в нужной вам форме. Включите элемент
    SVG непосредственно после ссылки меню в свою разметку.
  • Расположите его абсолютно под ссылкой.
  • Скрыть элемент SVG от пользователя, вы можете использовать для этого visibility:hidden или display:none в зависимости от вашего макета и того, что будет работать в вашей ситуации.
  • Используйте CSS для создания правила, чтобы при наведении указателя мыши на ссылку для элемента SVG было установлено значение display:block или display:inline-block (в зависимости от вашего макета).

Это имеет некоторые преимущества по сравнению с использованием графики в том, что легко изменить цвет, применить хороший градиент к цвету или изменить его размер.

Для получения информации о создании кривых SVG перейдите по этой ссылке (см. раздел PATHS):
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes

Возможно, вам будет проще использовать графический инструмент SBG, а не пытаться написать свою собственную разметку! Один из таких инструментов можно найти в Интернете здесь:
http://svg-edit.googlecode.com/svn- history/r1771/trunk/editor/svg-редактор.html

Поделиться


Phil Blunt    

31 октября 2015 в 12:24


  • Подчеркивание круглой крышки в CSS

    Можете ли вы сделать подчеркивание круглой крышки (как на приведенном выше рисунке) с помощью CSS? Как? Есть ли способ сделать это с border-bottom ? Вместо этого border-radius производит этот стильный эффект:

  • Что означает подчеркивание «_» в CSS?

    Я только что нашел следующий фрагмент в файле CSS: position: fixed; _position: absolute; Что означает это подчеркивание перед вторым утверждением position ?



0

Еще один способ сделать то же самое. Для этого можно использовать текстовое оформление .

text-decoration-skip-ink: none; можно нарисовать по всей длине текстового содержимого.

.highlight-1 {
  text-decoration: red wavy underline;
  text-decoration-skip-ink: none;
}

.highlight-2 {
  text-decoration: blue wavy underline overline;
  text-decoration-skip-ink: none;
}
<p>
  The <span>Pixel 4</span> is right around the corner.
</p>

<p>
  The <span>Qualcomm Snapdragon 855</span> is expected to be the chipset of choice for the Pixel 4 devices, with reports of 6GB of RAM support.
</p>

Поделиться


Penny Liu    

19 сентября 2019 в 14:40


Похожие вопросы:

CSS переход подчеркивание показать

Я пытаюсь сделать переход CSS, в котором подчеркивание появляется снизу вверх, когда вы наводите курсор на элемент href. Я нашел этот пример,который создает подчеркивание, появляющееся слева направо…

Как отправить более одного объекта между контроллерами в иерархическом стиле навигации в Apple watch?

Я разрабатываю приложение для Apple watch. Я толкаю контроллер интерфейса от другого контроллера интерфейса ,как отправить более одного объекта между контроллерами в иерархическом стиле навигации?

Как создать двойное пунктирное подчеркивание для текста в css

Как мы можем создать двойное пунктирное подчеркивание в CSS ? Я использую свойство border-bottom. border-bottom: 1px dotted #oof Но появляется только одно пунктирное подчеркивание. Как мы можем…

CSS подчеркивание

Чтобы подчеркнуть текст в CSS, мы можем сделать: h4 {text-decoration:underline;} Однако это только подчеркивает текст, заключенный в тег h4. Что делать, если вы хотите, чтобы подчеркивание шло по…

Пользовательское подчеркивание тега в css

У меня есть div, внутри которого есть заголовок, и я хочу подчеркнуть заголовок таким образом, чтобы подчеркивание покрывало приблизительно 80% div с отступом 10% с обеих сторон. Кроме того, я хочу,…

Подчеркивание круглой крышки в CSS

Можете ли вы сделать подчеркивание круглой крышки (как на приведенном выше рисунке) с помощью CSS? Как? Есть ли способ сделать это с border-bottom ? Вместо этого border-radius производит этот…

Что означает подчеркивание «_» в CSS?

Я только что нашел следующий фрагмент в файле CSS: position: fixed; _position: absolute; Что означает это подчеркивание перед вторым утверждением position ?

CSS подчеркивание меньше ширины заголовка?

Можно ли с помощью CSS сделать подчеркивание заголовка менее широким, чем текст заголовка? У меня есть следующий стиль для заголовка h2: h2 { font-weight: 300; display: inline-block; padding-bottom:…

Подчеркивание с угловатыми краями в CSS

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

Не удается удалить подчеркивание linkbutton

В моей веб-форме у меня есть кнопка linkbutton, определенная как…. <asp:LinkButton Visible=True style=text-decoration:none;color:blue; Font-Underline=false runat=server ID=lnkEditCarOrderNumber…

CSS — Подчеркивание текста, но игнорирование пробелов

У меня есть пара ссылок с левым краем 3px. Эти ссылки подчеркнуты и выглядят так:

<a href='#'>
    test
</a>

К сожалению, внутри ссылки есть пробелы, и я не могу удалить их, так как у меня нет доступа к коду HTML. Эти пробелы также подчеркнуты, что меня не устраивает. Есть ли способ удалить их, не меняя HTML?

Вот fiddle, который показывает мою проблему: http://jsfiddle.net/e8quz /

Обновление:

Вот картинка, как я хочу, чтобы она выглядела:

css

space

underline

Поделиться

Источник


Matt3o12    

20 апреля 2014 в 13:16

3 ответа


  • CSS проблема оформления текста

    У меня есть текстовое поле, которое было гиперссылкой, и проблема в том, что я пытаюсь удалить подчеркивание из текста гиперссылки. Параметр text-decoration:none; должен удалить его, но он, похоже, не работает. Как я могу удалить это подчеркивание из текста с гиперссылкой? HTML : <a…

  • CSS эффект при наведении курсора (пунктирное подчеркивание + изменение цвета текста)

    Я совершен CSS нуб Не могли бы вы уделить мне минутку и помочь создать пунктирное подчеркивание (с пробелом) с изменением цвета текста при наведении мыши? Я был бы очень признателен вам за помощь! http://i.imgur.com/2JjFYWT.jpg http://codepen.io/anon/pen/lIjDp (пожалуйста, не обращайте внимания на…



6

Пробелы берутся из разрывов строк (хорошо известных из display:inline-block проблемных).

Поэтому сделайте свои a элементов display: block и переместите их влево.

DEMO

PS: display:block -это «redundant», так как float обычно уже устанавливает свойство отображения соответствующего элемента в «block». Но это не повредит …!

Поделиться


Netsurfer    

20 апреля 2014 в 13:36



2

Смотрите здесь: http://jsfiddle.net/BWc2U/2/

Это также решит проблему. Нет необходимости делать их поплавками, с поплавками вам нужно очистить поплавки, иначе все содержимое после этого также будет плавающим и т. Д…

a {
  margin-left: 5px;
  display: inline-block;
}

Поделиться


JohanVdR    

20 апреля 2014 в 13:42



1

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

a {
    margin-left: 5px;
    float: left;
}

http://jsfiddle.net/e8quz/2/

Поделиться


Anshul Sao    

20 апреля 2014 в 13:43


Похожие вопросы:

Как создать двойное пунктирное подчеркивание для текста в css

Как мы можем создать двойное пунктирное подчеркивание в CSS ? Я использую свойство border-bottom. border-bottom: 1px dotted #oof Но появляется только одно пунктирное подчеркивание. Как мы можем…

Ограничьте подчеркивание текста

Я хотел бы иметь подчеркивание только для текста и в то же время сохранить часть изображения ссылки: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN…

CSS слишком длинное подчеркивание текста при применении интервала между буквами?

Всякий раз, когда letter-spacing применяется к чему-то с подчеркиванием или нижней границей, кажется, что подчеркивание выходит за пределы текста справа. Есть ли какой-нибудь способ сделать так,…

CSS проблема оформления текста

У меня есть текстовое поле, которое было гиперссылкой, и проблема в том, что я пытаюсь удалить подчеркивание из текста гиперссылки. Параметр text-decoration:none; должен удалить его, но он, похоже,…

CSS эффект при наведении курсора (пунктирное подчеркивание + изменение цвета текста)

Я совершен CSS нуб Не могли бы вы уделить мне минутку и помочь создать пунктирное подчеркивание (с пробелом) с изменением цвета текста при наведении мыши? Я был бы очень признателен вам за помощь!…

CSS подчеркивание меньше ширины заголовка?

Можно ли с помощью CSS сделать подчеркивание заголовка менее широким, чем текст заголовка? У меня есть следующий стиль для заголовка h2: h2 { font-weight: 300; display: inline-block; padding-bottom:…

CSS: удалить подчеркивание из текста

У меня есть следующее HTML <div style=text-decoration: underline;> outer text <div style=text-decoration: none;>inner text</div> </div> Несмотря на то, что я использовал none…

CSS подчеркивание исчезает при использовании непрозрачности

В текущем стабильном Chrome при использовании следующего CSS, где установлена некоторая непрозрачность, подчеркивание текста исчезает. Когда непрозрачность установлена на 1 или удалена,…

matplotlib подчеркивание текста

Я пытаюсь добавить подчеркивание к одному из символов в plt.text. plt.text(.5,.5,r’\underline{O}H’) Это, кажется, не работает , я попытался использовать \overline{O} , который работает просто…

Python — PDFTables синтаксический анализ игнорирование пробелов между столбцами

Я пытаюсь разобрать таблицы pdf с помощью библиотеки pdftables python. Но это объединение столбцов и игнорирование пробелов. Вот мой код: pdf_page = get_pdf_page(fileobj, page) tables =…

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

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

Instantly share code, notes, and snippets.

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

.pseudo
{
text-decoration: none;
position: relative;
}
.pseudo:after
{
border-bottom: 1px dotted blue;
content: »;
position: absolute;
top: 0;
bottom: 15%;
left: 0;
right: 0;
}
<p><a href=»/»>обычная ссылка</a> просто текст <a href=»/»>ссылка</a> еще текст</p>
{«view»:»separate»,»fontsize»:»100″,»seethrough»:»»,»prefixfree»:»1″,»page»:»all»}

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.

Подчеркнуть текст CSS: как подчеркнуть текст в CSS?

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

Хотя снаружи есть новый мир, и старые вещи улучшаются, по крайней мере, в несколько этапов. Элементы ссылок больше не нужно подчеркивать, а строка под текстом сегодня — это не просто идентификация ссылки.Этот краткий курс в основном посвящен опции подчеркивания text-decoration CSS и «связанным» параметрам.

Перво-наперво — если вам нужно быстрое, простое, регулярное подчеркивание, всегда есть HTML-элемент для него . Он собирается сделать строку в цвет текста на позиции по умолчанию из текста. Фактически, элемент просто добавляет текстовое оформление: подчеркивание текста с помощью встроенного в браузер CSS.

Хорошо, как вам это, вероятно, не понадобилось, следующие примеры включают решения CSS и, безусловно, решение вашей проблемы.

Есть два основных варианта добавления строки под текстом с помощью CSS.
Первый — это свойство text-decoration , которое определяет украшение, добавленное к тексту. Возможные значения этого свойства: подчеркивания, надстрочного и сквозного . Свойство text-decoration должно быть сокращенным свойством для text-decoration-line, text-decoration-color и text-decoration-style, но это пока плохо поддерживается. На данный момент у нас есть текстовое оформление, и с его помощью мы можем добавить строку под, поверх или через текст, с text-decoration-color мы можем раскрасить эту строку и с text-decoration-style , мы можем сделать это двойной, пунктирный, штриховой или волнистый.

Второе решение — своего рода взлом, подразумевающее использование border-bottom . Свойство display в этом случае должно быть inline . С помощью этого решения мы можем контролировать положение линии с помощью свойства padding-bottom , толщины линии с border-bottom-width , стиля с border-bottom-style и цвета с border-bottom- цвет . Border-bottom-style имеет те же параметры, что и text-decoration-style, и некоторые параметры 3D-эффекта.Эта опция предлагает больше опций и переменных, но ее сложнее использовать.

Сделать точечно-волнистое подчеркивание еще невозможно. Жду его 🙁

Этот пост изначально был опубликован в блоге Kolosek.

Как подчеркивать заголовки с помощью CSS | Учебник | Пример | Октябрь 2021 г.

Возможны два решения:

1. Вы можете использовать свойство text-decoration. Этот метод позволяет подчеркнуть текст тем же цветом, что и сам текст.В этом случае вы можете использовать следующий код.

Файл Test.css

h3 {

шрифт: 16px Arial, Geneva, Helvetica, без засечек;

оформление текста: подчеркивание;

}

Файл Test.html

Как подчеркнуть заголовки с помощью CSS

<мета http-эквив = «тип-контента» контент = »текст / html; charset = utf-8 ″ />

Акции падают, поскольку Сэнди закрывает рынки США

Акции во всем мире упали, а бензин вырос из-за урагана «Сэнди», который угрожал U.Нефтеперерабатывающие заводы восточного побережья и закрытые торги акциями. Двухлетние итальянские облигации упали шестой день подряд, а евро ослаб.

На следующем рисунке показан результат:

Добавление подчеркивания к заголовку с помощью оформления текста

2. Вы можете добавить нижнюю границу к заголовку. Это решение более гибкое, потому что вы можете разделить подчеркивание и заголовок с помощью отступов, и вы можете изменить цвет подчеркивания, чтобы он отличался от текста. Примечание. Эффект может немного отличаться в разных браузерах, и вам следует его протестировать. Следующий код иллюстрирует этот подход.

Файл Test.css

h3 {

шрифт: 16px Arial, Geneva, Helvetica, без засечек;

отступ: 2 пикселя;

нижняя граница: сплошная 1px #aaaaaa;

}

На следующем рисунке показан результат:

Добавление подчеркивания к заголовку с помощью нижней границы

Двойное подчеркивание и двойной текст с надчётом с помощью CSS

В этом уроке мы покажем, как сделать текст с двойным подчеркиванием и двойным надчётом с помощью CSS.

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

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

Двойной подчеркнутый текст

Двойной подчеркнутый текст

Метод 1

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

<стиль>
. двойное подчеркивание {
нижняя граница: 4 пикселя двойной;
}

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

Причина, по которой мы отображаем наш текст в элементе span , заключается в том, что вы можете использовать элементы span в любом другом элементе, таком как подразделения (div) или абзацы (p).

Вы можете изменить ширину (4 пикселя) границы по своему желанию.Наименьшая ширина в пикселях, которую вы можете использовать, составляет 3 пикселя, так как при 2 пикселях линии соприкасаются друг с другом, в результате получается одна линия. Ниже вы можете увидеть двойные подчеркивания разных размеров:

Двойной подчеркнутый текст — ширина 3 пикселя

Двойной подчеркнутый текст — ширина 4 пикселя

Двойной подчеркнутый текст — ширина 5 пикселей

Чтобы создать двойную верхнюю линию с помощью этого метода, просто замените свойство border-bottom на свойство border-top .

Метод 2

Во втором методе мы используем свойства border-bottom / border-top и text-decoration для создания этого эффекта.Пожалуйста, проверьте приведенный ниже код, чтобы увидеть его в действии.

<стиль>
. двойное подчеркивание {
нижняя граница: сплошная 1px;
текст-оформление: подчеркивание;
}

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

Вот результат кода выше:

Двойной подчеркнутый текст

Для создания двойной линии с помощью этого метода используйте следующий код:

<стиль>
.двойной надстрочный {
padding-top: 1px;
border-top: сплошной 1px;
текст-оформление: надстрочный;
}

Двойной текст с надписями

Двойной подчеркнутый текст

Первый метод, кажется, дает лучший результат, так как пространство между текстом и первой строкой выглядит лучше. Используйте тот метод, который, по вашему мнению, лучше всего подходит для вашего дизайна.

Как увеличить расстояние между текстом и подчеркиванием в CSS

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

В этом фрагменте мы покажем, как это сделать. Просто следуйте инструкциям ниже!

Создать HTML¶

  
Lorem Ipsum - это просто фиктивный текст полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный типограф взял камбуз шрифта и скремблировал его, чтобы сделать книгу образцов шрифта.

Добавить CSS¶

  div {
  ширина: 400 пикселей;
}

охватывать {
  padding-bottom: 10 пикселей;
  нижняя граница: 1px solid # 1f67db;
  высота строки: 48 пикселей;
}  

Здесь вы можете увидеть результат нашего кода.

Пример увеличения расстояния между текстом и его подчеркиванием: ¶

  

  
     Название документа 
    <стиль>
      div {
        ширина: 400 пикселей;
      }
      охватывать {
        padding-bottom: 10 пикселей;
        нижняя граница: 1px solid # 1f67db;
        высота строки: 48 пикселей;
      }
    
  
  
    
Lorem Ipsum - это просто фиктивный текст для полиграфической и наборной индустрии.Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный типограф взял камбуз и скремблировал его, чтобы сделать книгу образцов шрифта.

Попробуйте сами »

Результат

Lorem Ipsum — это просто фиктивный текст, используемый в полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный типограф взял камбуз шрифта и скремблировал его, чтобы сделать книгу образцов шрифта.

В этом примере мы увеличили расстояние между текстом и подчеркиванием с помощью границы снизу. Вы можете контролировать пространство, используя свойства line-height и padding-bottom.

Давайте посмотрим на другой пример, где мы используем элемент внутри

. В этом примере мы также используем те же свойства border-bottom и padding-bottom для , что и в предыдущем примере, а также устанавливаем для свойства display значение «inline-block».

Пример увеличения расстояния между текстом и его подчеркиванием с использованием только

: ¶

  

  
     Заголовок документа.
    <стиль>
      охватывать {
        дисплей: встроенный блок;
        нижняя граница: 1px solid # 000;
        padding-bottom: 10 пикселей;
      }
    
  
  
    

Lorem Ipsum - это просто фиктивный текст полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный типограф взял камбуз шрифта и скремблировал его, чтобы сделать книгу образцов шрифта.Lorem Ipsum - это просто фиктивный текст полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный типограф взял камбуз шрифта и скремблировал его, чтобы сделать книгу образцов шрифта.

Попробуйте сами »

Однако у вас могут возникнуть трудности с использованием border-bottom, поскольку он не может обеспечить полный контроль над подчеркиванием. Чтобы добиться большей точности пикселей, вы можете использовать псевдоэлемент: after.

  a {
  текстовое оформление: нет;
  положение: относительное;
}

a: after {
  содержание: '';
  ширина: 100%;
  позиция: абсолютная;
  слева: 0;
  внизу: 1px;
  ширина границы: 0 0 1px;
  стиль границы: сплошной;
}  

Вы можете разместить подчеркивание там, где хотите, изменив значение свойства bottom.

Пример увеличения расстояния между текстом и его подчеркиванием с помощью псевдоэлемента :: after: ¶

  

  
     Заголовок документа.
    <стиль>
      a {
        текстовое оформление: нет;
        положение: относительное;
      }
      a: after {
        содержание: '';
        ширина: 100%;
        позиция: абсолютная;
        слева: 0;
        внизу: 1px;
        ширина границы: 0 0 1px;
        стиль границы: сплошной;
      }
    
  
  
     W3docs 
    

Lorem Ipsum - это просто фиктивный текст полиграфической и наборной индустрии.Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный типограф взял камбуз шрифта и скремблировал его, чтобы сделать книгу образцов шрифта.

Попробуйте сами »Невозможно увеличить расстояние между текстом и его подчеркиванием, если вы используете свойство text-decoration, установленное на« подчеркивание ».

Анимированное подчеркивание только для CSS.

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

Я столкнулся с некоторыми из этих недостатков, когда хотел «позаимствовать» стиль из ссылок в блоге Кэсси Эванс.

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

Проблема, с которой я столкнулся: ссылки в моем блоге часто переносятся на другую строку, а это означает, что часть ссылки не будет подчеркнута 😢.

Круто не только ссылки на сайте Кэсси. Весь сайт, от кода до содержания.

Цель

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

Ссылки, которые переходят на новые строки, должны иметь подчеркивание под всеми строками.

Использовать фон

Есть много разных способов подчеркнуть фрагмент текста.Метод, который я в итоге использовал, который отвечал всем требованиям, был: Использование CSS-свойства background-image .

Фоновое изображение может быть сплошным цветом, определяя его как linear-gradient, переходящий от одного цвета к тому же цвету.

Почему я использую background-image , а не background-color , если я собираюсь использовать сплошной цвет?

Потому что многие свойства для управления фоном работают, только если используется background-image .

вставить CSS — это жесткий мем здесь

Размер фона ограничен по высоте и занимает всю ширину элемента привязки путем установки background-size от до 2px и 100% соответственно.

Это все равно закроет весь фон, потому что теперь оно повторяется снова и снова, пока не покроет весь фон. Поэтому я остановил его, установив background-repeat на no-repeat .

Линия находится наверху анкерного элемента! Позиционирование с background-position , установленным на 0 100% , помещает его на левый край и на 100% от верхнего края элемента привязки.
Другими словами, внизу … Теперь внизу.

Два фона

Чтобы использовать и управлять несколькими фоновыми изображениями, установите несколько значений для свойств background- * , разделенных запятыми.

Первая запись в списке, разделенном запятыми, находится наверху, а каждая следующая запись находится на уровне позади нее.

Фон следующего элемента привязки будет полностью черным ( # 000000 ). Белый ( #FFFFFF ) фон есть, но его не видно, потому что он закрыт черным.

 

a {

background-image: linear-gradient (# 000000, # 000000), linear-gradient (#ffffff, #ffffff);

}

В примере ниже установлены два фона. Оба внизу, так что одно перекрывает другое.

 

a {

цвет: # dfe5f3;

текстовое оформление: нет;

фоновое изображение: линейный градиент (RGB (176, 251, 188), RGB (176, 251, 188)),

linear-gradient (# feb2b2, # feb2b2);

размер фона: 100% 2 пикселя, 100% 2 пикселя;

background-position: 100% 100%, 0100%;

фоновый повтор: без повтора, без повтора;

}

Переход размера фона

Обратите внимание, чем отличается положение фона , хотя оно не имеет видимого значения?
Один крепится к левой стороне, другой — к правой.

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

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

 

a {

цвет: # dfe5f3;

текстовое оформление: нет;

фоновое изображение: линейный градиент (RGB (176, 251, 188), RGB (176, 251, 188)),

linear-gradient (# feb2b2, # feb2b2);

размер фона: 100% 2 пикселя, 0 2 пикселя;

background-position: 100% 100%, 0100%;

фон-повтор: без повтора;

переход: размер фона 2с, линейный;

}

a: hover {

background-size: 0 2px, 100% 2px;

}

Три фона

Это почти соответствует поставленным целям.Единственное, чего не хватает, — это пробела между двумя строками.

Это пространство можно подделать, переместив блок того же цвета, что и фон.
Что это за блок? Как вы уже догадались: другой фон.

Что лучше 2 фона? Три фона!

Три фона .. ah ah ah 🦇

Я помещу этот фон поверх двух других, указав его первым в значении, разделенном запятыми, для background-image .

Не забывайте!
Первое значение для других свойств background- * теперь также указывает на это недавно добавленное background-image .

Ширина и высота задаются размером background-size . В то время как высота установлена ​​на тот же размер, что и другие фоны ( 2px в этом примере). На этот раз ширина будет довольно маленькой 20px .

Переход позиции фона

Чтобы сделать блок цвета фона невидимым перед наведением курсора на элемент привязки, фону дается отрицательная позиция фона , которая помещает его слева от элемента, и, таким образом, полностью за экраном.

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

Функция calc () используется для вычисления обеих этих позиций.

 

a {

цвет: # dfe5f3;

текстовое оформление: нет;

фоновое изображение: линейный градиент (# 222b40, # 222b40), линейный градиент (

RGB (176, 251, 188),

RGB (176, 251, 188)

), линейный градиент ( # feb2b2, # feb2b2);

размер фона: 20 пикселей 2 пикселя, 100% 2 пикселя, 0 2 пикселя;

background-position: calc (20px * -1) 100%, 100% 100%, 0100%;

фон-повтор: без повтора;

transition: background-size 2s linear, background-position 2s linear;

}

a: hover {

background-size: 20px 2px, 0 2px, 100% 2px;

background-position: calc (100% + 20px) 100%, 100% 100%, 0100%;

}

Tada 🎉

Тег привязки работает и подходит для любых целей!

Большое спасибо Джею «Jh4y» Томпкинсу!

Он волшебник со всем, что связано с CSS / анимацией, и я очень рад, что обратился к нему.

Я задал ему вопрос, когда пытался в этом разобраться. Он не только ответил на него, но и научил меня упомянутой выше технике и позиции .
Он воспринял это как забавную задачу и сделал потрясающее доказательство своей концепции!

Я познакомился с Джеем на вечеринке корги.
Это потрясающее место, в котором полно талантливых людей, приходите пообщаться!

10 уникальных эффектов анимированного подчеркивания текста с помощью CSS

Изначально этот пост был опубликован здесь. Воспроизведено с разрешения.

Подчеркивание CSS по умолчанию отлично работает. Кто мог это ненавидеть?

Но всегда есть что улучшить. Вы можете подумать, что с подчеркиванием мало что можно сделать, но если вы углубитесь в CSS-анимацию, вы поймете, насколько много вы действительно можете!

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

1.Чередование подчеркивания

Если вы переместите курсор между этими ссылками, вы заметите что-то забавное. Эффект подчеркивания в навигационном меню фактически меняет стили между ссылками.

Не только это, но он динамически перемещается по навигации, создавая иллюзию, что это один единственный блок. Довольно круто, правда?

Вы можете сделать все это самостоятельно с помощью небольшого количества CSS, добавив блок подчеркивания в элемент HTML. Удивительно просто, учитывая, как мало кода вам нужно (около 60 строк CSS).

2. Объединение нескольких строк

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

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

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

3. Скользящее подчеркивание

Разработчик Райан Морс создал этот очень простой эффект скользящего подчеркивания, опираясь исключительно на CSS. Это довольно элегантное решение, учитывая, что для него даже не требуется дополнительный элемент HTML.

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

4. Лучшее подчеркивание текста

На первый взгляд вы можете не заметить ничего особенного в этом подчеркивании.Но если вы сравните его с демонстрацией «по умолчанию» ниже на странице, вы увидите, что это действительно выглядит намного лучше.

В улучшенном подчеркивании текста Лукаса Хорака вы заметите, что полоса под текстом лучше вписывается в нисходящие элементы. При этом учитываются такие формы букв, как «g» и «p», где строки опускаются ниже обычной высоты строки.

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

5.Стили анимации

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

Он может похвастаться четырьмя очень специфическими стилями подчеркивания, основанными на некоторых распространенных переходах CSS:

  • Справа налево
  • Слева направо
  • Анимация наружу
  • Анимация внутрь

Вы заметите, что это работает на общие переходы CSS3, которые работают как при наведении курсора на ссылку, так и при перемещении курсора за пределы ссылки.

Определенно несколько классных эффектов, и все они довольно легко переносятся в свои собственные проекты.

6. Другие стили анимации

Вот еще один пакет настраиваемых анимаций подчеркивания, созданных разработчиком Ксесо.

Они идут немного более экстремально с помощью стилей подчеркивания, подталкивающих тени CSS3 для эффектов свечения. Вы, вероятно, можете использовать это как шаблон для создания классного дизайна светового меча из «Звездных войн», если у вас есть время (или вы просто любите «Звездные войны»).

7. Just Dropping In

Я видел этот эффект на нескольких веб-сайтах, и это, наверное, один из моих любимых.В раскрывающемся подчеркивании используется чистый CSS, и линия отображается в виде анимации с эффектом перехода.

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

Если вам нужен настоящий минималистский подход к подчеркиванию эффектов, вам обязательно стоит попробовать поработать с этим кодом.

8. Расширяющаяся анимация

Расширяющийся стиль подчеркивания можно найти в пакете подчеркивания, о котором я упоминал ранее.Но это конкретное подчеркивание немного отличается, потому что в нем используется настраиваемая синхронизация анимации.

Обратите внимание, что функция cubic-bezier () используется для создания уникальной анимации при наведении курсора.

Это выполняется немного быстрее, чем «линейный» переход по умолчанию, поэтому дает совсем другой эффект. И вы даже можете попробовать настроить анимацию Безье самостоятельно, чтобы создать уникальный стиль подчеркивания.

9. Пользовательские подчеркивания CSS

Вот еще один стиль, который действительно может работать на любом веб-сайте.Разработчик Тристан Уилсон создал эти простые подчеркивания, которые обрамляют линию на несколько пикселей ниже текста.

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

Если вы хотите, чтобы ваши подчеркивания действительно выделялись среди всего стада, этот набор — отличное место для начала.

10. Подгонка между нижними выносными элементами

Ранее я упоминал о настройке стилей подчеркивания для соответствия нижним нижним элементам шрифта.Эта ручка Джонатана Нила именно это и делает, и в ней не используются ничего, кроме HTML5 и CSS3.

Весь эффект зависит от пары свойств CSS3: box-shadow и text-shadow , если быть точным.

Это создает иллюзию того, что сбоку от спусковых элементов есть пространство, и придает подчеркиванию более стильный вид.

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

11. Пользовательские градиенты

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

Градиент проходит через CSS3, поэтому вы можете изменить цвета на все, что захотите. И если вы можете в это поверить, эта штука не требует для работы никакого дополнительного HTML . Просто настройте таргетинг на любые ссылки привязки, которые вы хотите, и скопируйте / вставьте коды CSS, чтобы получить свои собственные градиентные подчеркивания.

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

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

Сообщение «10 уникальных анимированных эффектов подчеркивания текста с помощью CSS» впервые появилось в журнале Speckyboy Web Design.

Ссылка на создание подчеркнута на Medium | автор: Marcin Wichary

Если мы насмехаемся над faux жирным и курсивом, почему мы не можем рассмотреть правильный отдельный шрифт с подчеркиванием , с подчеркиванием, являющимся частью каждого глифа?

Можно мечтать?

Это потенциально многообещающий, но в нашем случае ошибочный подход:

  • Обслуживание отдельного шрифта повлечет за собой большую задержку (а файлы шрифтов уже являются самой тяжелой частью начальной средней нагрузки).
  • Так как линия «вшита» в шрифт, мы не можем сдвинуть ее или изменить ее ширину в зависимости от размера шрифта… и изменение цвета также запрещено.
  • Проблемы с лицензированием шрифтов и их обслуживанием могут слишком усложнить задачу.
  • Кернинг это может быть сложно.

5. Рисование с помощью

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

Если мы хотим провести линию, почему бы нам просто не нарисовать линию ? HTML , в конце концов, предназначен для управления отдельными пикселями. Это позволит нам настраивать ширину, цвет и даже рисовать нижние элементы. Однако сложность заключается в отсутствии поддержки, позволяющей узнать, когда ссылки разрываются — инструментов для точного измерения обернутого текста не существует или они очень дороги в JavaScript.

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

6. Фоновые изображения и градиенты

Итак, мы пришли к нашему неинтуитивному спасителю: фоновому изображению. На первый взгляд кажется, что фоновые изображения не имеют ничего общего с подчеркиванием. Однако у них есть интересное свойство поддержки обернутого текста (мы уже используем фон для выделения заметок — нажмите на всплывающее окно справа от вас), и за последние годы они приобрели достаточно возможностей, чтобы быть чрезвычайно гибкими.

С помощью современного CSS можно точно позиционировать и масштабировать фоновые изображения, включая поддержку пикселей сетчатки.И они даже не должны быть отдельными изображениями, требующими дополнительных веб-выборок: мы можем предоставить их встроенным, используя протокол данных, или, что еще лучше, синтезировать через градиентов (которые сами по себе невероятно эффективны).

Итак, это то, чем мы могли бы предположить: крошечный градиент; 1 или 2 пикселя в высоту; горизонтально растянута до упора; вертикально аккуратно позиционируется.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *