Как сделать вертикальную линию с градиентом в CSS?

Mahol
На сайте с 20.11.2016
Offline
59
363

Всем доброго вечера.

Как сделать такую вертикальную линию с градиентом в CSS?

jpg a.jpg
S
На сайте с 01.12.2017
Offline
114
#1

а девелопером (Developer Tools) что, не умеете пользоваться, это же Элементарно Ватсон (с), смотрите код того что понравилось на любом сайте и переносите в свой css со своими фантазиями

правая кнопа крысы 🚬

Mahol
На сайте с 20.11.2016
Offline
59
#2

smurf, обведенное на скрине выполнено картинкой...

VP
На сайте с 28.09.2017
Offline
21
#3

Лучше бы вы вместо картинки, адрес страницы указали чтобы можно было код посмотреть по быстрому и сказать как ;)

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

Как-то так вот, наверное )...


<style>
.Блок с текстом {
border-left: 10px solid transparent;
-moz-border-image: -moz-linear-gradient(top left, #DC2903 , #F4F955, #0625F9);
-webkit-border-image: -webkit-linear-gradient(top left, #DC2903 , #F4F955, #0625F9);
border-image: linear-gradient(to bottom right, #DC2903 , #F4F955, #0625F9);
border-image-slice: 1;
}
</style>
<div class="Блок с картинками">Картинки</div>
<div class="Блок с текстом">Текст про стоматологию</div>

Цвета там не такие, первые попавшиеся нагуглил)

Вот что получилось на скорую руку ... ссылка на скрин http://prntscr.com/ppt5s2

S
На сайте с 30.09.2016
Offline
459
#4
Mahol:
smurf, обведенное на скрине выполнено картинкой...

Да хоть видео. Возьмите, да посмотрите, как оно реализовано.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
S
На сайте с 01.12.2017
Offline
114
#5

ладно, пока кофе пью, можно поликбезничать :)

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

Направление градиента можно задать ключевыми словами:

to left top, to top, to right top, to left, to right, to left bottom, to bottom (по умолчанию), to right bottom.

div {

width: 20px;

height: 600px;

background: linear-gradient(to top right, #def, #7ac);

}

дальше думаю сообразите, если немного дружите с css,

SV
На сайте с 03.11.2008
Offline
1385
#6
Sitealert:
Возьмите, да посмотрите, как оно реализовано.

ТС и говорит что там реализовано КАРТИНКОЙ.

Вот этой

А он хочет сделать также, но с пом. css

Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Топики помощи с ⓌordPress (https://searchengines.guru/ru/forum/1032910 ) и основы безопасности сайтов ( https://searchengines.guru/ru/forum/774117 ). *** Помощь\консультации в топиках форума - БЕСПЛАТНО. Платные услуги ( https://wp.me/P3YHjQ-3 ) - с бюджетом от 150$ ***
S
На сайте с 30.09.2016
Offline
459
#7
SeVlad:
А он хочет сделать также, но с пом. css

Да я уже потом это понял, так-то картинка тоже стилизуется, но я не сразу въехал, что он хочет без картинки обойтись.

skapunker
На сайте с 15.01.2014
Offline
141
#8

отдельный блок делай для линии и все.

либо не делай вообще, так как толку от него никакого и смотрится не очень

Скидка 5% на все услуги reg.ru по промокоду B5A1-2430-5C32-1D70

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий