Эффект градиента и омбре в маникюре: фото-новинки дизайна 2021-2022

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

• Для этого не существует простого и очевидного CSS API.
• Я просто сделаю элемент-обертку с линейно-градиентным фоном, а затем внутренний элемент заблокирует большую часть этого фона, за исключением тонкой линии заполнения вокруг него.

Выглядеть это будет как-то так: HTML

 Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias. 

SCSS

body {    height: 100vh;    margin: 0;    display: grid;    place-items: center;    background: #222; }  .module-border-wrap {    max-width: 250px;    padding: 1rem;    position: relative;    background: linear-gradient(to right, red, purple);    padding: 3px; }  .module {    background: #222;    color: white;    padding: 2rem; }

результат

Вот пример Стивена Шоу, закрепляющий border-radius: HTML

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est.   

SCSS

.gradient-box {     display: flex;    align-items: center;    //width: 50vw;    width: 90%;    margin: auto;    max-width: 22em;     position: relative;    padding: 30% 2em;    box-sizing: border-box;     $border: 5px;    color: #FFF;    background: #000;    background-clip: padding-box; /* !importanté */    border: solid $border transparent; /* !importanté */    border-radius: 1em;     &:before {       content: '';       position: absolute;       top: 0; right: 0; bottom: 0; left: 0;       z-index: -1;       margin: -$border; /* !importanté */       border-radius: inherit; /* !importanté */       background: linear-gradient(to right, red, orange);    } }  html { height: 100%; background: #000; display: flex; } body { margin: auto; }

результат

Но не забывайте полностью о border-image, возможно, самом бестолковом свойстве CSS всех времен. Вы можете использовать его, чтобы получить градиентные границы даже на отдельных сторонах: HTML

 Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias. 

CSS

body {    height: 100vh;    margin: 0;    display: grid;    place-items: center;    background: #222; }  .module {    max-width: 250px;    padding: 1rem;    color: white;    border-width: 3px;    border-style: solid;    border-image:        linear-gradient(          to bottom,           red,           rgba(0, 0, 0, 0)       ) 1 100%; }

результат

Использование как border-image, так и border-image-slice, вероятно, является самым простым синтаксисом для создания градиентной границы, но, к сожалению, это просто несовместимо с border-radius. HTML

                      I have a gradient                                 I have a gradient                                 I have a gradient                                 I have a gradient             

SCSS

button {    background: none;    text-decoration: inherit;    font-family: system-ui;    font-size: 1rem;    padding: 1rem 2rem; }  .border-gradient {    border-image-slice: 1;    border-width: 2px; } .border-gradient-purple {    border-image: linear-gradient(to left, #743ad5, #d53a9d); } .border-gradient-green {    border-image: linear-gradient(to left, #00C853, #B2FF59); }  body {    height: 100vh;    margin: 0;    display: flex;    justify-content: center;    align-items: center;    > div {       width: 100%;       text-align: center;    }    > div > div {       width: 100%;       padding: 1rem;    } }  .on-dark {    background: #222;    button {       color: white;    } }

результат

На этом уроке мы не просто познакомимся с градиентами, но и узнаем, как их можно применять на практике. Вариантов применения градиентов в веб-дизайне, несчетное количество, но нас не интересует все и сразу. Будем двигаться постепенно и начнем мы с популярного дизайнерского приёма – это наложения градиента поверх большой фоновой картинки, используя CSS стили.

Сейчас вы наверное задумались, а зачем вообще что-то накладывать на картинку и почему в CSS, если есть Photoshop?

На первую половину вопроса я отвечу, демонстрируя два изображения. На первом нет наложения градиента, а на втором – используется градиент. Что смотрится интереснее по дизайну?

Первый вариант

Второй вариант

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

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

Демонстрация.

Photoshop или CSS?

Ответ будет разный, смотря, о ком мы говорим? Дизайнер рисует свой макет в Photoshop, вынося градиенты на отдельный слой. Верстальщик, анализируя макет, должен решить – объединять ли слой картинки с градиентом и сохранить их в одном jpg/png/gif файле или градиенты верстать на CSS?

Здесь нет чёткого правила, но одно мы знаем точно, что если по замыслу дизайнера, предполагается делать анимированный фон, то без CSS/JS уже не обойтись. И конечно не надо забывать, что картинка с градиентом будет больше весить, поэтому если градиент простой, то лучше написать его кодом.

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

HTML разметка

Тег header будет служить контейнером для фоновой картинки, а тег div с классом header_box – контейнером для двух заголовков.

       The Forest     where nature and people   

CSS код

В теге header опишем все свойства сразу для двух заголовков, поскольку стилизуем мы их одинаково и сознательно помещаем одну фразу в заголовки разных уровней. Здесь мы решаем вопрос переноса строки и вторая часть фразы меньше в размерах, так как находиться в теге h2. Разбивание одной фразы – это хороший дизайнерский приём, опять же делает фразу более значимой.

header {   font-family: sans-serif;   font-weight: 400;   font-size: 16px;   line-height: 1.7;   color: #fff;   text-transform: uppercase;   letter-spacing: 7px; }

Кроме стилизации текста, в теге header лежит наш градиент вместе с фоновой картинкой. Свойство cover растягивает картинку на всю ширину и высоту хедера.

background-size: cover;

Градиент поверх картинки

Для справки: Градиенты бывают линейные и радиальные, линейный тянется по прямой линии, от одного цвета к другому, как правило их используют для заполнения фигур с углами (прямоугольники, квадраты). Радиальный градиент тянется из центра окружности к краям и он хорошо подходит округлым фигурам (круг, овал), на сайтах это обычно кнопки.

Итак, у нас линейный градиент (linear-gradient), тянущийся снизу вверх (to top), от светлого-зеленого оттенка к темно-зеленому (rgba и цифры).

background-image: linear-gradient (to top, rgba (89,106,114, 0.6), rgba (206,220,23, 0.4)), url (fog.jpg);

Последние две цифры – 0.6/0.4 регулируют степень прозрачности градиента, без этих цифр, мы вообще не увидели бы картинки, а один сплошной градиент.

Градиент по высоте заполняет первый экран на 95 процентов, просто так лучше смотрится скошенная линия снизу.

height: 95vh;

Это не фотошоп, в реальности фотография целиковая, это мы виртуально её подрезали с помощью свойства clip-path. Пара цифр обозначает координаты X и Y, по которым строится кривая, маскирующая все лишнее. Данное свойство не поддерживается IE и Edge.

clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);

Позиционирование текста

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

.header_box {   position: absolute;   top: 35%;   left: 50%;   transform: translate(-50%, -50%);   text-align: center; }

Примеры градиентов

Оттуда можно скопировать код цвета и вставить в Photoshop или сразу в ваш CSS код.

See the Pen Gradient Overlay Image using Clip-path by porsake (@porsake) on CodePen.

• Создано 12.09.2018 10:45:08
• Михаил Русаков

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

Белый градиент

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

Голубой градиент

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

Зеленый градиент

Самый редкий вид градиента – это зеленый. Его не так часто используют, потому как к нему тяжело подобрать наряд. Чаще всего зеленый градиент будет хорошо подходить на летний сезон, когда вы поедете на море. Или для завершения вечернего образа, выпускного или тематической вечеринки.

Красный градиент

Яркий, сочный, красный градиент – эффектный выбор смелых и уверенных в себе женщин. Он запросто подойдет вам для рабочего времени, обычной повседневной жизни и даже на праздник. Красный можно комбинировать с черным, розовым, малиновым, а также фуксией. Особенно выгодно красный градиент будет смотреться на острых, длинных ноготках.

Фиолетовый градиент

Фиолетовый цвет всегда притягивает к себе внимание своим непревзойденным шармом, а также магнетизмом. Он насыщенный, яркий и в сочетании с другими цветами раскрывается по-новому. Фиолетовый и черный, фиолетовый и белый, фиолетовый и розовый. Фиолетовый градиент может быть совсем темным, а можно сделать его чуточку светлее.

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

Черный градиент поможет вам создать неповторимый и роскошный образ. Но такое покрытие достаточно темное, поэтому старайтесь подбирать данный вариант на особое мероприятие. Так как для повседневной жизни оно не подойдет. Черный цвет очень красиво будет гармонировать в тандеме с красным, вишневым, фиолетовым, серым, бежевым и желтым.

Разноцветный градиент

Разноцветный градиент очень веселое и красочное покрытие. Оно развеселит не только вас, но и окружающих вокруг. Такой градиент может наносится на каждые ногти по-отдельности, а может сочетаться на одной ногтевой пластине до трех и четырех оттенков сразу.

Матовый градиент

Матовый градиент самый удивительный из подборки. Хотя он и лишен блеска, как глянцевый, он не менее привлекательный и эффектный. Цветовая категория матового градиента может быть совершенно любой, ведь матовость достигается благодаря специальному топ-гелю.

04/02/2014

Содержание:

linear-gradient

Угол или направление градиента

Управление положением цветов

repeating-linear-gradient

Ограничения

CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами. Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter, также для IE9 можно использовать SVG.

Спецификация: w3.org/TR/css3-images/#gradients.

Градиенты могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image.

linear-gradient

Линейные градиенты достаточно просты в использовании. Для самого элементарного градиента достаточно задать начальный и конечный цвета:

background: linear-gradient(orangered, gold);

Цветов может быть любое количество больше двух. Также можно управлять направлением градиента и границами (точками остановки) цветов.

Угол или направление градиента

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

В градусах: от 0 до 360, например 270deg.

Ключевыми словами:

to top = 0deg;

to right = 90deg;

to bottom = 180deg — значение по умолчанию;

to left = 270deg.

Ключевые слова можно сочетать между собой, чтобы получить диагональный градиент, например to top left.

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

Вот код самого первого квадрата, для примера:

.top-left {    background: linear-gradient(to top left, purple, crimson, orangered, gold); }

Следует помнить, что to top right не то же самое, что 45deg. Цвета градиента располагаются перпендикулярно линии направления градиента. При to top right линия идет из нижнего левого в верхний правый угол, при 45deg — располагается строго под этим углом независимо от размеров фигуры.

Разница хорошо видна на прямоугольных фигурах:

Управление положением цветов

Значения точек остановки для цветов градиента задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.

Примеры задания значений в %, в em и значения, выходящие за границы элемента:

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

Так можно сделать, например, фон под боковую колонку, растянутый на всю высоту родительского элемента:

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

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

При отсутствии ограничений код может быть гораздо короче:

.light {   background: peachpuff linear-gradient(90deg,     rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50%   ) center center / 2em; }  .dark {   background: steelblue linear-gradient(     rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%   ) center center / 100% 1em; }

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

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

Также важно знать, что ключевое слово transparent означает прозрачный черный, а не прозрачный белый, поэтому при его использовании в Firefox можно получить вот такую неприятность:

Действующий пример (смотреть в Firefox): jsbin.com/OvOwEma/2/edit.

Чтобы этого избежать, используйте полностью прозрачные цвета нужного оттенка, например, белый: rgba(255, 255, 255, 0) или черный rgba(0, 0, 0, 0). Про разные способы задавать цвета можно почитать здесь.

Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться leaverou.github.io/css-colors, инструментом от Lea Verou.

repeating-linear-gradient

Помимо обычного linear-gradient можно сделать repeating-linear-gradient — повторяющийся градиент

Примерный код:

background: repeating-linear-gradient(   green, green .5em,   transparent .5em, transparent 1em );

К сожалению, повторяющиеся градиенты ведут себя как попало и подойдут только для узоров, которым не важна точность. Если нужна аккуратность, используйте linear-gradient в сочетании с background-size и background-repeat.

Upd. от 3.07.20: в данный момент повторяющиеся градиенты корректно отрисоваются в большинстве браузеров, и ими можно свободно пользоваться.

Ограничения

Градиенты имеют такое же ограничение, что и box-shadow: им нельзя задавать отдельно цвета или направление. Это приводит к дублированию кода и острой потребности воспользоваться препроцессорами в случае создания сложных градиентов.

Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти.

Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/. Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.

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

Ссылки по теме:

Ultimate CSS Gradient Generator

Презентация про градиенты от Lea Verou

leaverou.github.io/css-colors

Цвета в Css

←Крестики-нолики на CSSРадиальные градиенты→Наверх

Вы можете использовать множество вариантов градиентов заливки — от простых встроенных градиентов до созданных самостоятельно. Заливать градиентом можно обычные фигуры или текстовые поля, фигуры, входящие в диаграммы, а также графические элементы SmartArt и объекты WordArt. Вы можете быстро применить заготовку градиента или создать свой вариант, выбрав необходимые цвета и настроив яркость, прозрачность, а также направление и положение заливки.

Простейший способ применить градиентную заливку — выбрать фигуру, а затем открыть появившуюся вкладку Формат.

• Для фигур, текстовых полей и объектов WordArt вкладка Формат появляется в группе Средства рисования.

  

• Для диаграмм вкладка “Формат” появляется в группе Работа с диаграммами.

  

• Для графических элементов SmartArt вкладка Формат появляется в группе Работа с рисунками SmartArt.

  

На вкладке Формат нажмите кнопку Заливка фигуры, выберите пункт Градиентная и укажите необходимый вариант.

Совет:  Чтобы быстро применить такую же градиентную заливку к другим фигурам, используйте функцию Формат по образцу.

Не очень подходит? Можно выполнить еще несколько действий и применить заготовку градиента.

1. Выберите фигуру, а затем на вкладке Формат нажмите кнопку Заливка фигуры.

   

2. Последовательно выберите пункты Градиентная и Другие градиентные заливки.

3. В группе Заливка установите переключатель Градиентная заливка и выберите нужный вариант в списке Предустановленные градиенты.

Совет:  Используйте эти предустановленные градиенты в качестве отправной точки для создания собственной градиентной заливки.

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

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

Чтобы добавить градиент, нажмите кнопку Добавить точку градиента  . Чтобы изменить градиент, щелкните точку на ползунке, которую хотите изменить. Чтобы удалить градиент, нажмите кнопку Удалить точку градиента  .

1. Выберите фигуру, а затем на вкладке Формат нажмите кнопку Заливка фигуры.

   

2. Последовательно щелкните пункты Градиентная, Другие градиентные заливки и в появившемся окне выберите параметр Градиентная заливка.

3. Выберите Тип в списке.

4. Чтобы выбрать направление для градиента, щелкните Направление.

Для каждого цвета градиентной заливки выполните приведенные ниже действия.

• Чтобы применить цвет к точке градиента, щелкните ее на ползунке Точки градиента, а затем нажмите кнопку Цвет, чтобы выбрать нужный вариант.

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

• Если вы хотите точно задать положение определенной точки градиента, введите процентное значение в поле Положение.

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

  Примечания: 

  • Чтобы направление градиентной заливки совпадало с направлением поворота фигуры, установите флажок Повернуть вместе с фигурой.

  • Чтобы создать эффект заливки одним цветом с переходом от 100%-й непрозрачности до 100%-й прозрачности, установите одинаковое значение цвета для всех точек градиента.

Градиентная заливка — это заливка, постепенно изменяющая цвет поверхности фигуры.

Заливка фигуры, в которой три цвета плавно переходят друг в друга

При этом можно использовать оттенки одного цвета, как показано выше, или смешать несколько разных цветов, чтобы добиться более яркого эффекта (см. примеры ниже).

Заготовка градиентной заливки Горизонт

Произвольная градиентная заливка

Примечание:  Эта страница переведена автоматически, поэтому ее текст может содержать неточности и грамматические ошибки. Для нас важно, чтобы эта статья была вам полезна. Была ли информация полезной? Для удобства также приводим ссылку на оригинал (на английском языке).