xandeadx.ru Блог музицирующего веб-девелопера

CSS → Линии с помощью linear-gradient

Опубликовано в

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

Пример подчёркнуто текста:

.underline {
  background-image: linear-gradient(black, black);
  background-size: 100% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
}

Демо

Пример двойного подчёркивания:

.double-underline {
  background-image: linear-gradient(black, black), linear-gradient(black, black);
  background-size: 100% 1px, 100% 1px;
  background-position: left bottom, left bottom 3px;
  background-repeat: no-repeat;
}

Демо

Пример dotted подчёркивания:

.dotted-underline {
  background-image: linear-gradient(to right, black 1px, transparent 1px);
  background-size: 3px 1px;
  background-repeat: repeat-x;
  background-position: 0 bottom;
}

Демо

Пример диагональной линии:

.diagonal-line {
  background-image: linear-gradient(145deg, transparent 50%, black 50%, transparent 52%);
  background-repeat: no-repeat;
}

Демо

Способ создания анимированных полосок.

Похожие записи

Комментарии RSS

Я для этого использую box-shadow: http://jsfiddle.net/3qbo8e1u/2/

смысл в том, чтобы не использоваться лишних элементов :)
ну и у box-shadow заметно меньше возможностей

Для полосочек его за глаза хватает :)
Про лишние элементы не понял.

Пост о линиях а не о полосочках. Попробуй сделать зачёркнутый текст на box-shadow с любой неоднородной картинкой в фоне.

Если есть доступ к html коду и возможность плодить теги, то никакого смысла в box-shadow как и в linear-gradient нет, любые линии выводятся дивом с бэкграундом.

Линии с прозрачностью тенью не сделать, факт. Но и редко надо.

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании