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

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

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

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

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

.underlined {
  background-image: linear-gradient(to bottom, black, black);
  background-size: 1px 1px;
  background-repeat: repeat-x;
  background-position: 0 bottom;
}

Демо

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

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

Демо

Ограничение — можно выводить только горизонтальные и вертикальные линии.

Когда положение линии точно известно в пикселях, можно воспользоваться способом с прозрачностью:

.underlined {
  background-image: linear-gradient(
    to bottom,
    transparent 52px,
    black 52px,
    black 53px,
    transparent 53px
  );
  /* или background-image: linear-gradient(to top, black 1px, transparent 1px); */
}

Демо

Этот способ позволяет делать линии под любым углом.

Подсмотрено здесь.

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

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

Комментарии 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].

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