Как сделать градиент с оранжевого на белый

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

Градиентная рамка — это элемент веб-дизайна, который представляет собой рамку с плавным переходом от одного цвета к другому (рис. 1) или в виде штриховки (рис. 2).

Рис. 1. Рамка с плавным градиентом

Рис. 2. Рамка в виде штриховки

Для создания подобных рамок применяется несколько методов.

Использование border-image

Свойство border-image устанавливает для рамки изображение, в качестве которого может выступать, в том числе, линейный (функция linear-gradient()), радиальный (функция radial-gradient()) или повторяющийся градиент (например, repeating-linear-gradient()).

Сперва устанавливается сплошная рамка заданной толщины через свойство border:

border: 15px solid red;

Цвет рамки можно поставить произвольный, в дальнейшем он будет переопределён градиентом, который добавляется к свойству border-image. К примеру, для градиента, идущего к правому нижнему углу, от чёрного до оранжевого цвета пишем следующее:

border-image: linear-gradient(to right bottom, black, orange);

Ниже добавляем свойство border-image-slice со значением, равным толщине нашей рамки. Обратите внимание, что число пишется без указания каких-либо единиц.

border-image-slice: 15;

Код для градиента в виде штриховки показан в примере 1.

Пример 1. Свойство border-image для создания штриховки

У этого метода есть небольшой недостаток — свойство border-radius, добавляющее скруглённые уголки, для подобной рамки не работает.

Использование псевдоэлементов

Псевдоэлементы ::before и ::after позволяют создать дополнительный пустой элемент, которым можно управлять с помощью свойств позиционирования.

Сперва для всего элемента в качестве фона ставится произвольный градиент. Затем поверх элемента накладывается псевдоэлемент чуть меньшего размера с белым фоном. Он перекрывает элемент, оставляя его часть по краям, тем самым имитируя рамку. Общий принцип становится понятнее, если оставить фон полупрозрачным (рис. 3).

Рис. 3. Псевдоэлемент располагается поверх самого элемента

В примере 2 показано, как с помощью ::after создать псевдоэлемент и позиционировать его.

Пример 2. Использование ::after для создания рамки

Данный метод позволяет делать скругление внешних и внутренних уголков, но требует заливки псевдоэлемента каким-либо цветом.

Использование background

Свойство background достаточно универсально и позволяет установить несколько фонов и задать их параметры. Так что делаем два фона: один с градиентом, другой сплошной белый и накладываем их друг на друга.

Белый цвет нельзя указать в виде слова (white) или шестнадцатеричного значения (#fff), потому как за цвет фона и градиента отвечают разные свойства:

background-color: white; background-image: linear-gradient(#f19a10, #25ac5e);

Чтобы скомбинировать эти значения в одном свойстве background , белый цвет можно задать в виде градиента следующим образом:

background-image: linear-gradient(#fff, #fff);

Для каждого из двух наших фонов надо установить ещё свойство background-clip:

background-clip: padding-box /* Для белого фона, чтобы он не рисовался под рамкой */ background-clip: border-box /* Для градиента, чтобы он начинался под рамкой */

Осталось соединить все параметры фона воедино в качестве значения свойства background :

background: linear-gradient(#fff, #fff) padding-box, linear-gradient(45deg, #f19a10, #25ac5e) border-box;

И добавить рамку желаемой толщины с прозрачным цветом:

border: 12px solid transparent;

Окончательный код показан в примере 3.

Пример 3. Градиентная рамка

См. также

• background-clip
• border
• border-image
• border-radius
• linear-gradient()
• Блочные элементы
• Градиенты в CSS
• Градиенты у
• Добавление треугольника
• Колесо для сокращённых свойств
• Круглые изображения
• Линейный градиент
• Открываем блочную модель
• Оформление кнопок
• Оформление ссылок
• Повёрнутые рамки
• Рамка вокруг изображений
• Свойство border
• Строчные элементы
• Установка фона и градиента

Линейный градиент

Градиентом называют плавный переход от одного цвета к другому, причём самих цветов и переходов между ними может быть несколько. С помощью градиентов создаются самые причудливые эффекты веб-дизайна, например, псевдотрёхмерность, блики, фон и др. Также с градиентом элементы смотрятся более симпатично, чем однотонные.

Отдельного свойства для добавления градиента нет, поскольку он считается фоновым изображением, поэтому добавляется через свойство background-image или универсальное свойство background , как показано в примере 1.

Пример 1. Градиент

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Линейный градиент для абзаца

В самом простом случае с двумя цветами продемонстрированном в примере 1 вначале пишется позиция, от которой будет начинаться градиент, затем начальный и конечный цвет.

Для записи позиции вначале пишется to , а затем добавляются ключевые слова top , bottom и left , right , а также их сочетания. Порядок слов не важен, можно написать to left top или to top left . В табл. 1 приведены разные позиции и тип получаемого градиента для цветов #000 и #fff, по другому от чёрного к белому.

Табл. 1. Типы градиента

Позиция	Угол	Описание	Вид
to top	0deg	Снизу вверх.
to left	270deg	Справа налево.
to bottom	180deg	Сверху вниз.
to right	90deg	Слева направо.
to top left	От правого нижнего угла к левому верхнему.
to top right	От левого нижнего угла к правому верхнему.
to bottom left	От правого верхнего угла к левому нижнему.
to bottom right	От левого верхнего угла к правому нижнему.

Вместо ключевого слова допускается задавать угол наклона градиентной линии, который показывает направление градиента. Вначале пишется положительное или отрицательное значение угла, затем к нему слитно добавляется deg.

Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке. Отсчёт угла наклона градиентной линии показан ниже.

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

Для создания сложных градиентов двух цветов уже будет недостаточно, синтаксис позволяет добавлять их неограниченное количество, перечисляя цвета через запятую. При этом можно использовать прозрачный цвет (ключевое слово transparent ), а также полупрозрачный с помощью формата RGBA, как показано в примере 2.

Пример 2. Полупрозрачные цвета

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

     body < background: url(images/celtic1.png); >div 
Генезис свободного стиха, несмотря на внешние воздействия, отталкивает словесный метаязык.
  

Результат данного примера показан на рис. 2.

Рис. 2. Градиент с полупрозрачными цветами

Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Для простоты крайние единицы вроде 0% и 100% можно не писать, они подразумеваются по умолчанию. В примере 3 показано создание градиентной кнопки, в которой положение второго цвета из трёх задано как 36%.

Пример 3. Градиентная кнопка

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

       Нажми меня нежно  

Результат данного примера показан на рис. 3.

Рис. 3. Градиентная кнопка

За счёт задания положения цвета можно получить резкие переходы между цветами, что в итоге даёт набор однотонных полосок. Так, для двух цветов надо указать четыре цвета, первые два цвета одинаковы и начинаются от 0% до 50%, оставшиеся цвета также одинаковы меж собой и продолжаются от 50% до 100%. В примере 4 полоски добавляются в качестве фона веб-страницы. Из-за того, что крайние значения подставляются автоматически их можно не указывать, так что достаточно написать всего-лишь два цвета.

Пример 4. Однотонные полоски

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

       
Типичная европейская буржуазность и добропорядочность изящно иллюстрирует официальный язык.
  

Результат данного примера показан на рис. 4. Обратите внимание, что один из цветов градиента задан прозрачным, поэтому он меняется косвенно через цвет фона веб-страницы.

Рис. 4. Фон из горизонтальных полосок

Это блог о творчестве, о хитростях и секретах разных художников

Цветовые растяжки акварелью, градиент, заливки и отмывки

Цветовая растяжка — это плавный переход от одного

цвета к другому, например от зеленого к синему.

Тоновая растяжка — это когда плавный переход идет от светлого тона к темному тону чаще всего одного цвета, например от светлого зеленого к темному зеленому. Или наоборот от темного к светлому.

Растяжки иногда называют градиентной заливкой или градиентной отмывкой.

Цветовую растяжку можно сделать из любых двух и более цветов. Почему я говорю и более цветов, да

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

четырех, пяти цветов.

В этой растяжке использовались всего два цвета: синий и зеленый

А в этой уже три цвета: красный, желтый и зеленый.

кажется, что цвет перетекает :-).

Надеюсь теория понятна. Переходим к практике.

Упражнение

Для упражнений нам нужна бумага формата А4 ( размер альбомного листа), гуашь

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

Поделите лист на четыре части, вот так:

Сделаем две растяжки (в верхних прямоугольниках) используя гуашь, и две

(в нижних) используя акварель, техника

нанесения этих красок немного отличается.

Начнем с гуаши

Выберите два цвета для первой растяжки. Я выбрала фиолетовый и

белила, это будет тоновая цветовая растяжка.

Выкладываем на палитру немного фиолетовой краски и разводим водой до консистенции сметаны,

рядом на палитру помещаем немного белил. Теперь набираем на кисть

фиолетовую краску и проводим полосу вдоль края бумаги в первом

маленьком прямоугольнике. После этого в фиолетовую краску на палитре

добавляем совсем немного белил, смешиваем, получается цвет чуть-чуть

светлее, чем был. Этим новым оттенком проводим следующую полосу,

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

добавляем в фиолетовую смесь еще белил, смешиваем и вновь проводим

полосу. И так продолжайте, пока не закончится прямоугольник.

Должно получится примерно так:

Теперь выберите два другие цвета, и выполните из них растяжку по такому же

Я выполнила растяжку от синего к красному, потом к оранжевому, вот что вышло:

Теперь выполним растяжку акварелью

Точно так же как и гуашью наведите на

палитре отдельно два выбранных цвета.

Я возьму желтый и зеленый. Краска

на палитре должна быть похожа на две цветных лужицы.

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

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

начинать наносить краску. Наносим сначала желтую краску, после каждого

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

наносим полосу. Делать надо это так, что бы края мазков не

подсыхали, тогда цветовой переход получится более плавный и нежный.

И последнее упражнение, это переход от белого к любому цвету в акварели.

Как его выполнить, если белила в акварели

Очень просто, за белый цвет возьмем сам лист, то есть первую полосу

напишем обыкновенной чистой водой, а потом к воде по чуть-чуть будем

добавлять выбранный цвет. Если же наоборот, требуется растяжка от цвета

к белому, то наводим на палитре нужный цвет и после каждого нанесения на

бумагу, немного разбавляем цвет водой.

Если акварельная растяжка наносится полосами, и не можете добиться плавности переходов, то скорее всего у вас тонкая бумага, которая быстро впитывает краску. Тогда увлажните бумагу мягкой кистью, подождите пока вода впитается, а бумага будет влажная но не мокрая (без луж) и по влажной бумаге делайте растяжку, по другой градиентную заливку.

Урок «Растяжка цвета для неба и барханов»

Для чего может пригодиться умение растягивать цвет?

Это долго и скучно объяснять, лучше давайте я покажу Вам на

Выполнив это упражнение, Вы сразу поймете, для чего

надо учиться выполнять растяжки :-).

Для упражнения нам понадобится бумага для акварели (чем плотнее, тем лучше),

акварель и мягкая колонковая или беличья кисть.

Прикрепите лист бумаги к мольберту или столу кнопками (или малярным скотчем),

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

Теперь представьте себе пустыню с барханами.

Легкими (без нажима) линиями карандаша нанесите

волнообразные линии. Сначала определите линию горизонта, а потом

рисуйте пустыню с барханами.

По правилам линейной перспективы, чем

дальше барханы, тем меньше они будут по размеру.

Нарисуем небо

Возле горизонта небо всегда светлее, чем над головой.

Сначала намочим бумагу, чтобы краска ложилась более ровно и

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

кистью всю область неба до горизонта. Подождите несколько секунд, надо,

чтобы влага проникла в бумагу, т.е. исчезли лужицы, а бумага

стала просто влажной, а не мокрой на вид. После этого возьмите

на кисть голубой краски размешайте на палитре и нанесите горизонтальную полосу вдоль

верхнего края бумаги.

Теперь, надо работать быстро, не позволяя мазкам высыхать по краям,

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

Просто макайте (не мойте, а именно обмакивайте кончик кисти в воду,

так чтобы к оставшейся на кисти краске добавлялась вода) и

проводите более разбавленным цветом новую горизонтальную полосу

чуть ниже. Но каждую новую горизонтальную линию проводите так,

чтобы она немного захватывала предыдущую,

чтобы они сливались в единое пространство.

Рисуем барханы

Когда небо подсохнет, точно так же рисуем пустыню.

Смачиваем дальние барханы, и делаем

растяжку желтого или оранжевого, охристого или красного

цвета, если Вам нравятся Марсианские пейзажи :-).

Только не так как мы писали небо от темного к светлому, а наоборот от светлого

тона к темному. Первый мазок делаем чуть окрашенной водой (очень

разбавленной краской), и в каждый последующий мазок добавляем

Написав барханы на горизонте, даем им просохнуть, и

смачиваем следующий ряд барханов и снова прописываем их с

помощью растяжки от светлого к темному тону.

Так же продолжаем писать каждый

следующий ряд холмов-барханов.

Не забывайте о правилах воздушной перспективы: то,

что ближе к нам прописываем более четко, то, что дальше от нас

пишем с меньшей четкостью, так сказать, не переживаем если

краска немного растеклась, это только усилит живописность

Вот что у нас должно получиться.

Красиво, но не совсем правдоподобно. Мы забыли про тени.

Например, если солнце будет светить слева, то тени будут с правых сторон

Опять напоминаю о правилах воздушной перспективы, то что

на переднем плане более контрастно, что находится на дальнем

плане менее контрастно, то есть на дальнем плане тени мягче, на

переднем более резкие)

Я никогда не была в пустыне, но сейчас поняла,

что при ярком солнце тени должны быть намного темнее, чем я нарисовала 🙂

Исправлять не буду 🙂

С помощью колонковой кисти №2 — наметим следы на песке, а

несколько вертикальных мазков создадут эффект ушедшего вдаль

Вместо каравана можно нарисовать кактус, или ящерку, или еще что-нибудь.

А если вы хотите рисовать свои картины, а не копировать чужие по мастер-классам, то у нас в нашей онлайн-школе для взрослых «Рисовать могут ВСЕ!» есть курсы для новичков с системно-поэтапным обучением рисованию своих картин:

Если вы хотите быстро начать рисовать.

Упражнения можно выполнять везде. Вы научитесь рисовать сразу от руки ручкой или маркером без карандаша и резинки.

До встречи на наших курсах 🙂

Как создать и Редактировать Градиенты в Adobe Illustrator

Если вы хотите начать работу с градиентами и ищите вступление для начинающих, то посмотрите это короткое видео с моего курса Освойте Дизайн Логотипа в Adobe Illustrator. Я покажу вам как создать разные типы градиентов и менять различные опции такие как цвет, позиция, прозрачность.

По окончанию тебе станет понятно как создать разнообразные типы градиентов и редактировать как вам необходимо.

Как Создать и Редактировать Градиенты в Adobe Illustrator

Как Создать Простой Градиент

Начните с Инструмента Прямоугольник, чтобы создать прямоугольник для работы. Далее вы можете открыть панель Градиента, кликнув на иконку на панели инструментов или перейти к Окно>Градиент.

Кликнув где-нибудь на слайдере градиента вы создадите черно- белый градиент по умолчанию. Иконка Обратный Градиент, что находится над слайдером, меняет направление градиента: слева-направо, или справа-налево. Вы также можете вручную изменить наклон Градиента, избрав значение в поле.

Здесь также много возможностей. Вы можете идти сверху — вниз или слева — направо, или можете использовать градиент для заливки или обводки. Если вы поменяете Тип с Линейного на Радиальный, градиент будет выходить от центра до края (но и это направление можно будет поменять).

Как Поменять Цвет Градиента

Вы можете поменять первоначальную позицию каждого цвета. Если вы хотите больше черного, потяните стрелку под слайдером вправо. Если вы потяните белый в противоположном направлении, то получите очень резкий переход цветов.

Для мягких же градиентов лучше всегда держать эти переключатели подальше.

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

Так давайте же, добавляйте здесь больше цветов. А если вы используете глобальные образцы, то переходите на панель Образцов и там можете поменять глобальный образец.

Как Поменять Позицию и Прозрачность Градиента

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

Вы можете расширить цвета, потянув переключатели, или быть более точным, и набрать значения Позиции. Для оранжевого вы можете набрать 50%, чтобы разместить его прямо по середине.

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

Между двумя разными переключателями можно сменить позицию маленькой иконки в виде ромба наверху слайдера. Это чем-то напоминает перемещение самого переключателя — вы можете ввести немного больше одного цвета и меньше другого изменив лишь позицию точки перехода в градиенте.

У переключателей имеется своя Позиция в процентах, и если нужно, то можно ввести точные значения.

Посмотрите Весь Курс

В полном курсе Освойте Дизайн Логотипа в Adobe Illustrator вы выучите необходимые инструменты для создания логотипа в Adobe Illustrator. Также как в этом видео, я пройдусь по важнейшим инструментами техникам в Illustrator, а в конце мы применим все, чему научились в практичному проекте дизайна логотипа.

Вы можете приобрести курс вместе с подпиской на Envato Elements. За незначительную одноразовую месячную плату вы получаете доступ не только к этому курсу но и к все увеличивающейся библиотеке, в которой свыше 1000 курсов и ведущих электронных книг на Envato Tuts+.

Также вы получаете доступ к безлимитному скачиванию с огромной библиотеки в более чем 300 000 креативных ресурсов. Создавайте с уникальными шрифтами, фото, графикою и шаблонами и поставляйте лучшие проекты в короткий срок.