возможно ли сделать слой с маской в css

@emin313 · Регистрация: 05.10.2010

Студворк — интернет-сервис помощи студентам

Здравствуйте css знаю не в совершенстве и вот возник такой вопрос допустим я сверстал сайт на photoshop сделал слой с маской залил градиентом в итоге получил закруглённые углы у полоски как такое сделать на чистом css потому что просто полоску делать картинкой уже наверное многие не используют

@FaqSid · 21.05.2017, 22:18

Да возможно, используя градиенты на css вот пример готового для тебя решения http://www.colorzilla.com/grad... 1+51,0+100

@emin313 · 21.05.2017, 22:35 **[ТС]**

FaqSid, не совсем понял как это поможет)

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

@FaqSid · 21.05.2017, 22:36

Если ты хочешь заменить полоску на картинке css стилями, то тебе поможет с этим градиенты на css, сделай 2 div - 1 полоска с градиентом который я выше указал, для второго дива сделай другой градиент который тебе нужен.

@emin313 · 21.05.2017, 22:38 **[ТС]**

FaqSid, полоске не нужен грандиенд ей просто укажу цвет

@FaqSid · 21.05.2017, 22:45

как хочешь, ты же просил как на картинке

@emin313 · 21.05.2017, 22:55 **[ТС]**

FaqSid, ну а примерный код не подскажите ?

@FaqSid · 21.05.2017, 23:58

Вот держи.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body
{
    padding:10px;
    background:#4a4a4a;
}
.row
{
    width:100%;
    height:4px;
    background: linear-gradient(to right, rgba(32,124,202,0) 0%,rgba(32,124,202,0.51) 26%,rgba(37,131,210,1) 51%,rgba(41,137,216,0.61) 70%,rgba(41,137,216,0) 100%); 
}
.under-row
{
    width:100%;
    height:100px;
    background: radial-gradient(ellipse at center, rgba(32,124,202,1) 0%,rgba(32,124,202,0.26) 37%,rgba(32,124,202,0) 66%,rgba(32,124,202,0) 100%) 0px -50px no-repeat; 
}

HTML5
1
2
<div class="row"></div>
<div class="under-row"></div>

@emin313 · 22.05.2017, 00:10 **[ТС]**

FaqSid, нет вы меня не правильно поняли я хочу сделать именно полоску она без всяких грандиендов но с помощью них она становится закругленную

@FaqSid · 22.05.2017, 00:16

Че? Я не понял, всмысле закругленая, давай свой код

@emin313 · 22.05.2017, 00:21 **[ТС]**

FaqSid,да кода пока нет я просто пишу ещё в фотошопе и тут же возник вопрос с полоской на картинке сама полоска которую нужно будет в css перевести

@FaqSid · 22.05.2017, 00:34

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

@fol · 22.05.2017, 01:03

Сообщение от emin313

Здравствуйте css знаю не в совершенстве и вот возник такой вопрос допустим я сверстал сайт на photoshop сделал слой с маской залил градиентом в итоге получил закруглённые углы у полоски как такое сделать на чистом css потому что просто полоску делать картинкой уже наверное многие не используют

где хоть одна запятая? ни черта не понятно же

Сообщение от FaqSid

Вот держи.

в этом посте то, что нужно

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@emin313 4 / 4 / 1 Регистрация: 05.10.2010 Сообщений: 426

	возможно ли сделать слой с маской в css 21.05.2017, 22:09. Показов 580. Ответов 12 Метки нет (Все метки) Здравствуйте css знаю не в совершенстве и вот возник такой вопрос допустим я сверстал сайт на photoshop сделал слой с маской залил градиентом в итоге получил закруглённые углы у полоски как такое сделать на чистом css потому что просто полоску делать картинкой уже наверное многие не используют Миниатюры 0

@FaqSid 0 / 0 / 1 Регистрация: 21.05.2017 Сообщений: 21
	21.05.2017, 22:18
	Да возможно, используя градиенты на css вот пример готового для тебя решения http://www.colorzilla.com/grad... 1+51,0+100 0

@emin313 4 / 4 / 1 Регистрация: 05.10.2010 Сообщений: 426
	21.05.2017, 22:35 [ТС]
	FaqSid, не совсем понял как это поможет) Добавлено через 7 минут FaqSid, допустим если я сделаю линию пропишу ей код этого бекраунда то результата не получу можно примерный код посмотреть где то 0

@FaqSid 0 / 0 / 1 Регистрация: 21.05.2017 Сообщений: 21
	21.05.2017, 22:36
	Если ты хочешь заменить полоску на картинке css стилями, то тебе поможет с этим градиенты на css, сделай 2 div - 1 полоска с градиентом который я выше указал, для второго дива сделай другой градиент который тебе нужен. 0

@emin313 4 / 4 / 1 Регистрация: 05.10.2010 Сообщений: 426
	21.05.2017, 22:38 [ТС]
	FaqSid, полоске не нужен грандиенд ей просто укажу цвет 0

@FaqSid 0 / 0 / 1 Регистрация: 21.05.2017 Сообщений: 21
	21.05.2017, 22:45
	как хочешь, ты же просил как на картинке 0

@emin313 4 / 4 / 1 Регистрация: 05.10.2010 Сообщений: 426
	21.05.2017, 22:55 [ТС]
	FaqSid, ну а примерный код не подскажите ? 0

@emin313 4 / 4 / 1 Регистрация: 05.10.2010 Сообщений: 426
	22.05.2017, 00:10 [ТС]
	FaqSid, нет вы меня не правильно поняли я хочу сделать именно полоску она без всяких грандиендов но с помощью них она становится закругленную 0

@FaqSid 0 / 0 / 1 Регистрация: 21.05.2017 Сообщений: 21
	22.05.2017, 00:16
	Че? Я не понял, всмысле закругленая, давай свой код 0

@emin313 4 / 4 / 1 Регистрация: 05.10.2010 Сообщений: 426
	22.05.2017, 00:21 [ТС]
	FaqSid,да кода пока нет я просто пишу ещё в фотошопе и тут же возник вопрос с полоской на картинке сама полоска которую нужно будет в css перевести Миниатюры Изображения 0

@FaqSid 0 / 0 / 1 Регистрация: 21.05.2017 Сообщений: 21
	22.05.2017, 00:34
	Я не знаю, если будет реальный код, то помочь мб и смогу. 0