Верстка border с градиентом?

Question

[Николай]

Есть макет, где вертикальные border у блоков прорисованы с градиентом. Как такое вообще реализовать, есть какое-то специальное свойство CSS?

Answer 1

[Vitali Borovik]

habrahabr.ru/post/140760/
css-tricks.com/examples/GradientBorder/

Comments

[Николай]

Спасибо, интересные варианты, стоит попробовать.

Answer 2

[Fyodor]

имхо тут этот градиент и нужно вставлять — картинкой. если блоки разной высоты или тянутся по высоте — засада. или спросить дизайнера как он предполагал это сверстать.

Comments

[Николай]

Это уже последний вариант, если ничего не получится :)

[Talyutin]

Картинкой.

если блоки разной высоты или тянутся по высоте —

, то 3-мя картинками, градиентный верх, низ и одноцветная растягиваемая середина.

[dom1n1k]

Если тянется по вертикали — картинка все равно будет одна. Фон же можно масштабировать.
Артефакты растяжения/сглаживания на плавных переходах заметны не будут.

Answer 3

[avalak]

Средствами CSS это можно реализовать примерно так.

Answer 4

[dom1n1k]

Либо картинки, либо вставлять дивы-разделители шириной 1px, и уже их заливать градиентом.

Comments

[Николай]

Ну в общем так и сделал, два однопиксельных дива с вертикальным градиентом. Можно было бы и картинками, но по мне так прошлый век :)

[Руслан]

Вместо div, можно псевдоэлементами.

[dom1n1k]

Ну кстати да. В реальной работе я бы наверняка именно так и сделал, задумавшись на лишнюю минуту.

Answer 5

[sayapinant]

Вот видео, в котором дословно рассказывается, как делать градиент у рамки. Только CSS3 и никакого JavaScript'a!