Содержание

Границы CSS используя градиент — оформление границы на CSS

Благодаря технологии CSS мы можем создавать сайты и использовать при этом меньше изображений. Я думаю вы прекрасно знаете, что изображения действительно замедляют загрузку сайта. Раньше, чтобы создать границы css в виде перехода одного цвета к другому необходимо было использовать именно изображения. Но в CSS3 есть такое новое свойство как linear-gradient, с помощью которого можно осуществить нашу задумку.

Я подобрал некоторые статьи, в которых вместо изображений можно и нужно использовать свойства CSS3:

Границы CSS — СПОСОБ 1

1) Градиент границы сверху вниз

Живой пример:

В HTML это просто блок:

1
<div></div>

А CSS с первого взгляда кажется громоздким:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.box {  
    margin: 50px auto; /* отступ сверху, снизу и центрирование по горизонтали */
    width: 250px; /* ширина */
    height: 250px; /* высота */
    border-top: 20px solid #3ACFD5; /* размер тип и цвет верхней границы */
    border-bottom: 20px solid #3a4ed5; /* размер тип и цвет нижней границы */
 
    /* свойства width и height включают в себя значения полей и границ, но не отступов */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 
    background-position: 0 0, 100% 0; /* положение фонового изображения */
    background-repeat: no-repeat; /* запрещаем повторение фонового изображения */
 
    /* размер фонового изображения */
    -webkit-background-size: 20px 100%;
    -moz-background-size: 20px 100%;
    background-size: 20px 100%;
 
    /* само фоновое изображение, где указываем в линейном градиенте что цвет начинает меняться сверху (top) */
    background-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    background-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    background-image: -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%), linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
}

2) Градиент границы слева направо

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

Как в и прошлый раз HTML очень простой:

1
<div></div>

А CSS сильно не изменился:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.box {  
    margin: 50px auto;
    width: 250px; /* ширина */
    height: 250px; /* высота */
    border-left: 20px solid #3ACFD5; /* размер тип и цвет левой границы */
    border-right: 20px solid #3a4ed5; /* размер тип и цвет правой границы */
 
    /* свойства width и height включают в себя значения полей и границ, но не отступов */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 
    background-position: 0 0, 100% 0; /* положение фонового изображения */
    background-repeat: no-repeat; /* запрещаем повторение фонового изображения */
 
    /* размер фонового изображения */
    -webkit-background-size: 100% 20px;
    -moz-background-size: 100% 20px;
    background-size: 100% 20px;
 
    /* фоновое изображение, где указываем в линейном градиенте что цвет начинает меняться СЛЕВА (left) */
    background-image: -webkit-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%), -webkit-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
    background-image: -moz-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%), -moz-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
    background-image: -o-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%), -o-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
    background-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%), linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
}

Границы CSS — СПОСОБ 2

Второй способ заключается в использовании CSS3 свойства border-image, которое нам значительно сократит и упростит код. Скоро вы сами в этом убедитесь.

Браузеры, которые поддерживают данное свойство: Chrome, Internet Explorer 11, Firefox, Safari, и Opera.

Также хочу сразу сказать что данное свойство работает только с «квадратными» блоками. То есть вы не сможете сделать закругленные углы границы с помощью свойства border-radius.

1) Градиент сверху вниз

Как видите, результат такой же (если ваш браузер поддерживает данное свойство):

В HTML также различий нет:

1
<div></div>

А вот CSS даже на глаз стал намного меньше:

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {  
    width: 250px; /* ширина */
    height: 250px; /* высота */
    margin: 50px auto; /* верхний и нижний отступы и горизонтальное выравнивание */
    background: #eee; /* цвет фона */
    border: 20px solid transparent; /* задаем сплошную прозрачную границу шириной в 20 пикселей */
 
    /* наша собственная граница */
    -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
    border-image-slice: 1; /* смещение фона границы */
}

2) Градиент слева направо

Также сделаем градиент границы CSS, где цвет меняется слева направо:

HTML:

1
<div></div>

CSS также значительно меньше, чем в прошлом способе:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box {  
    width: 250px; /* ширина */
    height: 250px; /* высота */
    margin: 50px auto; /* верхний и нижний отступы и горизонтальное выравнивание */
    background: #eee; /* цвет фона */
    border: 20px solid transparent; /* задаем сплошную прозрачную границу шириной в 20 пикселей */
 
    /* наша собственная граница */
    -moz-border-image: -moz-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%); 
 
    border-image-slice: 1; /* смещение фона границы */
}

3) Диагональный градиент

Еще один интересный способ — диагональное изменение цвета границы:

HTML:

1
<div></div>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box {  
    width: 250px; /* ширина */
    height: 250px; /* высота */
    margin: 50px auto; /* верхний и нижний отступы и горизонтальное выравнивание */
    background: #eee; /* цвет фона */
    border: 20px solid transparent; /* задаем сплошную прозрачную границу шириной в 20 пикселей */
 
    /* наша собственная диагональная граница, где мы указали что цвет начинает меняться от левого верхнего (top left) угла */
    -moz-border-image: -moz-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to bottom right, #3acfd5 0%, #3a4ed5 100%);
 
    border-image-slice: 1; /* смещение фона границы */
}

Вывод

Понравился ли вам этот способ оформления границы? Надеюсь что да! Потому что он экономит «килобайты» при загрузке. Я показал вам не только еще один способ как красиво оформить ваш сайт, но и как сделать его загрузку хоть чуточку быстрее 😉 !

 

Успехов!

С Уважением, Юрий Немец

Карманное руководство по написанию SVG. Глава 6 — CSS-LIVE

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Глава 6. Продвинутые функции: градиенты, паттерны, контуры обрезки

Градиенты

Существует два типа SVG-градиентов: линейные и радиальные. У линейных градиентов переход между цветами происходит вдоль прямой линии, а у радиальных — в круге.

Очень простой линейный градиент имеет вот такую структуру:

<svg>
    <defs>
        <linearGradient>
            <stop offset="<%>" stop-color="<color>" />
            <stop offset="<%>" stop-color="<color>" />
        </linearGradient>
    </defs>
</svg>

<svg> содержит элемент <defs>,позволяющий создавать повторно используемые определения, к которым можно обратиться позже. Эти определения не отображаются (визуально) до тех пор, пока они не будут вызваны по их уникальному id в атрибутах обводки и/или заливке для SVG-фигур или

<text>. Эти фигуры и/или текст также находятся в элементе <svg>, но снаружи <defs>.

Как только градиент создан и ему задано ID, к нему можно обратиться через атрибуты fill и/или stroke в SVG. Например: fill= "url(#gradientName)".

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

Линейные градиенты изменяют цвет равномерно вдоль прямой линии и каждая ключевая точка, которая определена на этой линии, будет представлять соответствующий цвет в пределах элемента <linearGradient>. В каждой точке цвет является на 100% чистым, в промежуточных точках — смесь в разном соотношении, а область между ними отображает переход от одного цвета к другому.

Элементы stop

Элементам <stop> также можно задавать прозрачность при помощи stop-opacity="<значение>"

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

<svg>
    <defs>
        <linearGradient x1="0" y1="0" x2="100%" y2="0">
            <stop offset="0%" stop-color="#BBC42A" />
            <stop offset="100%" stop-color="#ED6E46" />
        </linearGradient>
    </defs>
    <rect x="2" y="2" fill= "url(#Gradient1)" stroke="#333333" stroke-width="4px" />
</svg>

Посмотреть демо можно здесь

offset передаёт градиенту, в какой точке установить соответствующий stop-color.

x1, y1, x2, y2

Значения атрибутов x1, y1, x2 и y2 определяют начальные и конечные точки, к которым привязаны ключевые точки градиента. Эти процентные значения размещают градиенты как надо вдоль нужных осей.

Если атрибуту x2 задать значение «100%», а атрибуту y2 — «0», то мы получим горизонтальный градиент (при x1 и y1, равных нулю — прим. перев.), а если наоборот — вертикальный. Установив оба значения в «100%» (или в любое значение отличное от 0), мы получим наклонный градиент.

gradientUnits

Атрибут gradientUnits определяет систему координат для значений x1, x2, y1 и y2. Для него возможны два значения: «userSpaceOnUse» или «objectBoundingBox». userSpaceOnUse устанавливает систему координат градиента в абсолютных единицах, а objectBoundingBox (значение по умолчанию) создаёт эту систему в границах самой фигуры SVG, целевого объекта.

spreadMethod

Значение атрибута spreadMethod указывает, как распространится градиент по фигуре, если он начинается или заканчивается внутри границ объекта. Если градиенту указано не закрашивать фигуру целиком, то spreadMethod определяет, как должен распространиться градиент, покрывая эту пустую область. Для этого атрибута возможны три значения: «pad», «repeat» или «reflect».

Значение pad (по умолчанию) указывает первому и последнему цвету градиента распространиться по всей оставшейся непокрытой областью объекта. repeat указывает градиенту повторять паттерн, постоянно начиная заново. Значение reflect отражает паттерн градиента, повторяясь поочередно то от начала к концу, то от конца к началу.

Начальной и конечной точкой для градиента ниже является: x1=«20%» y1=«30%» x2=«40%» y2=«80%».

gradientTransform

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

xlink:href

Атрибут xlink:href позволяет обращаться к ID другого градиента, чтобы унаследовать его значения, но также можно включить различные значения.

<linearGradient xlink:href="#Gradient-1” spreadMethod="repeat" />

Этот градиент унаследовал значения первого градиента, который находится в начале этого раздела, но для него задано другое значение «spreadMethod».

Радиальные градиенты

Большинство атрибутов для <radialGradient> совпадают с атрибутами <linearGradient> кроме того, что для работы с ними существует другой набор координат.

cx, cy, r

Атрибуты cx, cy, и r определяют внешний край круга, а значение 100% stop-color градиента будет привязано к границе этого круга. cx и cy определяют координаты центра, а r устанавливает радиус градиента.

fx, fy

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

Несмотря на то, что по умолчанию фокальная точка радиального градиента будет в центре, атрибуты для фокальной точки могут изменить это поведение. Значениями центральной точки на изображении ниже являются fx="95%" fy="70%".

<svg>
    <defs>
        <radialGradient cy="60%" fx="95%" fy="70%" r="2">
            <stop offset="0%" stop-color="#ED6E46" />
            <stop offset="10%" stop-color="#b4c63b" />
            <stop offset="20%" stop-color="#ef5b2b" />
            <stop offset="30%" stop-color="#503969" />
            <stop offset="40%" stop-color="#ab6294" />
            <stop offset="50%" stop-color="#1cb98f" /> 
            <stop offset="60%" stop-color="#48afc1" />
            <stop offset="70%" stop-color="#b4c63b" />
            <stop offset="80%" stop-color="#ef5b2b" />
            <stop offset="90%" stop-color="#503969" />
            <stop offset="100%" stop-color="#ab6294" />
        </radialGradient>
    </defs>
    <text x="20%" y="75%" fill= "url(#Gradient2)" font-family= "'Signika', sans-serif" font-size="200">Cherry</text>
</svg>

Посмотреть демо можно здесь

В этом примере фокальная точка смещена к правому нижнему краю изображения.

Паттерны

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

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

<svg>
    <defs>
        <pattern x="10" y="10" patternUnits="userSpaceOnUse">
            <circle cx="20" cy="20" r="20" fill= "#BBC42A" />
        </pattern>
    </defs>
    <rect x="10" y="10"
                stroke="#333333" stroke-width="2px" fill="url(#basicPattern)" /> 
</svg>

Посмотреть демо можно здесь

Базовые атрибуты

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

x, y, width, height

Атрибуты x и y в элементе <pattern> определяют в какой точке начнётся паттерн внутри фигуры. Ширина и высота, используемые в элементе <pattern>, определяют фактическую ширину и высоту, отведённые для области паттерна.

Упомянутый выше «basicPattern» содержит следующие значения: x="10" y="10". В этом случае паттерн начнётся с 10px от начала оси х, 10px от начала оси y и создаст «холст» 40px ширины и такой же высоты.

patternUnits

Атрибут patternUnits определяет в каких координатах указываются значения x, y, ширина и высота. Здесь можно выбрать два значения: userSpaceOnUse и objectBoundingBox (по умолчанию).

При userSpaceOnUse система координат паттерна определяется системой координат элемента, ссылающегося на <pattern>, а objectBoundingBox берет в качестве системы координат для паттернов прямоугольник, описанный вокруг элемента, к которому паттерн применяется.

patternContentUnits

Значения атрибута patternContentUnits совпадают со значениями для patternUnits, за исключением того, что теперь система координат определяется для содержимого самого паттерна.

Для атрибута patternContentUnits, в отличие от patternUnits, значением по умолчанию является userSpaceOnUse, которое означает, что если не указаны один или оба из этих атрибутов, фигуры, отрисованные в <pattern>, рисуются не в той системе координат, которую использует <pattern>.

Определение patternUnits="userSpaceOnUse" в элементе <pattern> упрощает этот процесс и обеспечивает единообразную рабочую область.

Вложенные паттерны

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

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

<svg>
    <defs>
        <pattern
                 x="4" y="4"
                 patternUnits="userSpaceOnUse">
            <circle cx="12" cy="12" r="8"
                stroke="#ed6e46" stroke-width="3" fill="#765373" />
        </pattern>
        <pattern
                 x="10" y="10"
                 patternUnits="userSpaceOnUse">      
                <rect x="2" y="2"
                  stroke="#bbc42a" stroke-width="3" fill="url(#circlePattern)" />
        </pattern>
    </defs>
    <rect x="2" y="2"
          stroke="#333333" stroke-width="3" fill="url(#rectPattern)" /> 
</svg>

Элемент <defs> содержит оба паттерна. В <defs> паттерн для прямоугольника обращается к паттерну круга при помощи fill, а главный прямоугольник затем также обращается к паттерну прямоугольника через fill, закрашивая внутреннюю часть главной фигуры вложенным паттерном.

Посмотреть демо можно здесь

Контуры обрезки

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

Для демонстрации возможностей этой функции, давайте используем контур обрезки в виде текста «Apples», наложенный на прямоугольник цвета томата и зелёный круг.

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

А теперь давайте взглянем на код, позволяющий применить текст «Apples» к этому «холсту».

<svg>
    <clipPath>
        <text x="0" y="50%" fill="#f27678" font-size="120px" font-family=" 'Signika', sans-serif">Apples</text> 
    </clipPath>      
    <rect x="0" y="0" fill="#ed6e46" clip-path="url(#clip-text)" />  
    <circle cx="310" cy="100" r="135" fill="#bbc42a" clip-path="url(#clip-text)" />    
</svg>

Посмотреть демо можно здесь

Контур обрезки определяется в элементе <clipPath>, а затем вызывается обеими фигурами путём обращения к их уникальному id.

Заключение

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

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

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

За новостями и обновлениями, пожалуйста, заходите на сайт книги. Если у вас есть какие-то вопросы или комментарии насчет книги, вы можете связаться со мной в твиттере или по почте [email protected]

Публикуется под лицензией Attribution-NonCommercial-ShareAlike 4.0

P.S. Это тоже может быть интересно:

Создание красивых градиентов на CSS

Вот линейный градиент на CSS, идущий от чисто жёлтого до чисто синего цвета:

Заметили, что в центре он становится бледным и грязным?

Это явление Эрик Кеннеди назвал «мёртвой зоной серого». Если вы тщательно не выбираете цвета для своих градиентов, то в ваших градиентах на CSS часто возникает такая обесцвеченная часть посередине.

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

Как вычисляются градиенты

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

linear-gradient

в CSS? Как он вычисляет конкретное значение цвета для каждого пикселя вдоль спектра?

Он вычисляет его, беря математическое среднее для каждого из трёх цветовых каналов: Red, Green и Blue.





[Прим. пер.: в оригинале статьи все изображения интерактивны.]

В цветовом пространстве RGB мы создаём цвета смешением трёх каналов: красного, зелёного и синего. Каждый канал имеет диапазон значений от 0 до 255.

Если мы увеличим до максимума значения всех трёх каналов — 255 / 255 / 255, то получим чисто белый цвет. А если установим каждый канал на 0, то получим чёрный, отсутствие всех цветов.

На самом деле, если всем трём каналам присвоить одинаковое значение, то результат всегда будет цветом в оттенках серого:

В показанном выше виджете градиента мы начали с чисто жёлтого цвета (255/255/0). При перемещении по градиенту мы начинаем примешивать синий (0/0/255). К тому моменту, как мы достигнем самой середины, мы уберём половину жёлтого и добавим половину синего.

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

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

Альтернативные цветовые модели

Существует множество разных способов задания цвета. Пока мы использовали только модель R/G/B. И, честно говоря, эта цветовая модель довольно отстойная.

Давайте поговорим о другой цветовой модели: HSL.

HSL расшифровывается как Hue / Saturation / Lightness (тон, насыщенность и светлота). Если вы пользовались селектором цветов, то, вероятно работали с этой цветовой моделью.

Пример:

Вот что означает каждое значение:

  • Hue (тон) управляет тем, каким будет пигмент, где находится цвет на шкале цветов.
  • Saturation (насыщенность) управляет тем, насколько ярок будет цвет.
  • Lightness (светлость) управляет тем, насколько светлым или тёмным будет цвет.

Лично мне такой способ кажется

гораздо

более интуитивным способом восприятя цветов.

Но вот что по-настоящему волшебно: что если вместо усреднения значений RGB в наших градиентах мы будем усреднять значения HSL?





Мёртвой зоны серого больше нет, потому что теперь мы смешиваем не значения R/G/B, а значения H/S/L.

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

Вот ещё один пример, на этот раз смешение цветов с разной насыщенностью и светлостью. Ниже для сравнения показаны цвета со стандартным RGB-смешением:





Достаточно наглядная разница, правда?

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

Согласно цветовой модели HSL, оба этих цвета имеют одинаковую «светлость»:

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

К счастью, существуют другие цветовые модели, учитывающие восприятие человека. Например, HCL, похожая на HSL, однако смоделированная с учётом зрения человека:






Какая цветовая модель лучше всего?

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

Используем знания на практике

У меня есть хорошие и плохие новости. Давайте начнём с плохих.

CSS не позволяет нам выбирать цветовую модель. используемую в вычислении градиентов. Мы не можем выбрать интерполяцию HSL для конкретного градиента, по крайней мере, пока. Насколько я знаю, CSS Images Level 4 даёт возможность указания «способа интерполирования цветов», но он поддерживается не всеми браузерами.

Однако есть и хорошие новости: исхитрившись, мы можем обойти эти ограничения.

Градиенты в CSS не привязаны только к двум крайним цветам. Можно передавать 3 цвета, или 10 цветов, или даже 100 цветов.

Сначала нам нужно вручную вычислить набор промежуточных цветов. Мы можем сделать это с помощью JavaScript, чтобы можно было использовать любую нужную цветовую модель (благодаря полезной библиотеке наподобие chroma.js):




Далее мы берём этот набор цветов и передаём каждое значение функции градиента CSS:

.box {
        background-image: linear-gradient(
        to right,
        #ffff00,
        #f8ea47,
        #f0d465,
        #f0d465,
        #e7bf7c,
        #ddaa8f,
        #d095a1,
        #c280b2,
        #b26cc2,
        #9d56d2,
        #8440e1,
        #6028f0,
        #0000ff
        )
        }

(Здесь мы используем линейные градиенты, но тот же трюк работает с радиальными и коническими градиентами!)

Но постойте, разве движок CSS не использует RGB-интерполяцию для вычисления пространств между каждым из указанных цветов? Если мы не передаём сотни цветов, достаточные для каждого отдельного пикселя, то всё равно используем RGB-интерполяцию!

Да, это правда, но, к счастью, это не особо важно.

Когда два цвета очень схожи друг с другом, на самом деле не важно, какую цветовую модель мы используем. Градиент получится приблизительно одинаковым. Мы не получим сильно отличающееся «среднее» значение, как бы мы ни вычисляли это «среднее».

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


Цвета настолько близки, что RGB-интерполяция никак не может их испортить.

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

Ну а теперь самое интересное. Давайте поговорим о том, как генерировать эти градиенты.

Знакомство с генератором градиентов

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

Я в восторге от этого инструмента. В нём используются все элементы, о котором говорилось в посте, а также другие трюки (типа применения кривой для управления

распределением

цветов).

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

Генератор находится здесь: https://www.joshwcomeau.com/gradient-generator/

Предыдущие работы

На создание собственного генератора меня вдохновили эти два чудесных генератора градиентов:

linear-gradient() — CSS: каскадные таблицы стилей

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

Чтобы создать линейный градиент, который повторяется, чтобы заполнить его контейнер, вместо этого используйте функцию Repeating-Linear-Gradient() .

Поскольку s принадлежат к типу данных , их можно использовать только там, где можно использовать s.По этой причине linear-gradient() не будет работать с background-color и другими свойствами, использующими тип данных .

Линейный градиент определяется осью — линией градиента — и двумя или более точками остановки цвета . Каждая точка на оси имеет отдельный цвет; для создания плавного градиента функция linear-gradient() рисует ряд цветных линий, перпендикулярных линии градиента, каждая из которых соответствует цвету точки, в которой она пересекает линию градиента.

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

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

Настройка градиентов

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

  линейно-градиентный (красный, оранжевый, желтый, зеленый, синий);
линейный градиент (красный 0%, оранжевый 25%, желтый 50%, зеленый 75%, синий 100%);
  

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

  линейный градиент (красный 10%, 30%, синий 90%);
  

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

Остановки цвета должны быть перечислены в порядке возрастания. Последующие контрольные точки цвета с более низким значением переопределяют значение предыдущей контрольной точки цвета, создавая жесткий переход. Следующие изменения от красного к желтому на отметке 40%, а затем переходы от желтого к синему на 25% градиента

  линейно-градиентный (красный 40%, желтый 30%, синий 65%);
  

Допускается многопозиционная цветовая остановка. Цвет можно объявить как две смежные точки цвета, включив обе позиции в объявление CSS.Следующие три градиента эквивалентны:

  линейный градиент (красный 0%, оранжевый 10%, оранжевый 30%, желтый 50%, желтый 70%, зеленый 90%, зеленый 100%);
линейный градиент (красный, оранжевый 10% 30%, желтый 50% 70%, зеленый 90%);
линейный градиент (красный 0%, оранжевый 10% 30%, желтый 50% 70%, зеленый 90% 100%);
  

По умолчанию, если нет цвета с остановкой 0%, первый заявленный цвет будет в этой точке. Точно так же последний цвет будет продолжаться до отметки 100% или будет находиться на отметке 100%, если на этой последней остановке не была объявлена ​​​​длина.

 linear-gradient([<угол> | до <сторона-или-угол> ]? , <стоп-список цветов> ) 

где
<сторона-или-угол> = [ слева | справа ] || [ топ | снизу ]
<список остановки цвета> = [ <линейная остановка цвета> [, <подсказка линейного цвета>]? ]# ,

где
= ?
=

где
= | | | | | <шестнадцатеричный цвет> | <названный цвет> | текущий цвет |
= {1,2}
= | <процент>

где
= rgb( <процент>{3} [ / <альфа-значение> ]? ) | rgb(<число>{3} [/<альфа-значение>]?) | rgb(<процент>#{3}, <альфа-значение>?) | rgb(<число>#{3}, <альфа-значение>?)
= rgba(<процент>{3} [/<альфа-значение>]?) | rgba(<число>{3} [/<альфа-значение>]?) | rgba(<процент>#{3}, <альфа-значение>?) | rgba(<число>#{3}, <альфа-значение>?)
= hsl(<оттенок> <процент> <процент> [/<альфа-значение>]?) | hsl( <оттенок>, <процент>, <процент>, <альфа-значение>?)
= hsla( <оттенок> <процент> <процент> [ / <альфа-значение> ]? ) | hsla( <оттенок>, <процент>, <процент>, <альфа-значение>? )
= hwb( [<оттенок> | нет] [<процент> | нет] [<процент> | нет ] [ / [<альфа-значение> | нет] ]? )

где
<альфа-значение> = <число> | <процент>
<оттенок> = <число> |

CSS Gradient Generator — создание красивых градиентов

О градиентах CSS

Инструмент онлайн-генератора CSS Gradient — это удобная и простая в использовании утилита для быстрого создания линейных и радиальных цветовых градиентов.Вы можете создавать градиенты и экспортировать код CSS с цветами в формате HEX или RGB.

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

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

Совместимость CSS Gradients с браузером

ИЭ Край Firefox Хром Сафари Опера Сафари iOS Опера
Мини
Андроид
Браузер
Хром
Андроид
10+ 12+ 16+ 26+ 6.1+ 12 7.1+ х 4.4+ 46+

Что такое градиент CSS?

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

CSS определяет три типа градиентов:
— Линейные градиенты (направление вниз/вверх/влево/вправо/по диагонали)
— Радиальные градиенты (определяются их центром)
— Конические градиенты (поворот вокруг центральной точки)

Определение из W3Школы

Тип данных CSS <градиент> обозначает CSS <изображение>, состоящее из прогрессивного перехода между двумя или более цветами.CSS-градиент — это не CSS , а изображение без внутренних размеров; то есть он не имеет ни естественного или предпочтительного размера, ни предпочтительного соотношения. Его конкретный размер будет соответствовать размеру элемента, к которому он применяется.

Существует четыре вида цветовых градиентов:
— линейные градиенты, генерируемые функцией linear-gradient(), где цвет плавно сливается по воображаемой линии.
— радиальные градиенты, генерируемые функциейradial-gradient(). Чем дальше точка от начала координат, тем дальше она от исходного цвета.
— повторяющиеся градиенты, созданные с помощью функций Repeating-Linear-Gradient() и Repeating-Radial-Gradient(), которые представляют собой линейные или радиальные градиенты фиксированного размера, повторяющиеся столько раз, сколько необходимо для заполнения всего окна.
— конические градиенты, созданные с помощью функции conic-gradient(), которые постепенно переходят цвета по кругу.

Определение от MDN — Сеть разработчиков Mozilla

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

Что такое линейный градиент CSS?

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

Определение от W3C


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

Радиальные градиенты CSS

Что такое радиальный градиент CSS?

В радиальном градиенте цвета не плавно переходят от одной стороны поля градиента к другой, как в случае с линейными градиентами, а возникают из одной точки и плавно распространяются наружу в виде круга или эллипса.
Радиальный градиент задается путем указания центра градиента (где будет эллипс 0 %), а также размера и формы конечной фигуры (эллипса 100 %). Остановки цвета задаются в виде списка, как и для linear-gradient(). Начиная с центра градиента и продвигаясь к конечной форме (и, возможно, дальше) концентрические эллипсы с однородным масштабом рисуются и окрашиваются в соответствии с указанными цветовыми точками.

Определение от W3C


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

Повторяющиеся градиенты CSS

Что такое повторяющийся градиент CSS?

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

Определение от W3C


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

Конические градиенты CSS

Что такое конический градиент CSS?

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

Определение от W3C


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

Текстовые градиенты CSS

Что такое градиент текста CSS?

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

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

Дизайн Более богатые CSS-градиенты | Rock Paper Simple

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

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

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

В результате получается более насыщенный градиент, который позволяет избежать ненасыщенной середины и обходить другие цвета, прежде чем достичь целевого цвета. В свою очередь, улучшенная яркость повышает общее качество и привлекательность вашего веб-сайта. Дизайн ваших цветов будет полностью отличаться от градиента границы CSS, градиента фона и градиента текста. Ручное создание этих градиентов может занять много времени и чрезвычайно утомительно из-за цветовой модели RGB. Но, к счастью для нас, дизайнер Эрик Д.Кеннеди придумал инструмент градиента CSS, который делает именно это! Взгляните сюда и начните создавать более богатые, яркие градиенты!

https://learnui.design/tools/gradient-generator.html

Изображение вашего веб-сайта имеет значение. Он действует как лицо вашего бизнеса, демонстрируя ваш профессиональный и творческий голос, позволяя нынешним и будущим клиентам узнать, кто вы и каковы ваши приоритеты. И цвет является важным аспектом вашего образа. Кому-то неопытному и не очень хорошо разбирающемуся в CSS-градиентах это может показаться сложной задачей.Разработка различных градиентов на вашем веб-сайте имеет важное значение, и Rock Paper Simple готова стать вашим партнером и помочь вам в этом. С помощью нашей специальной команды веб-дизайнеров мы будем работать над созданием надежного, функционального и яркого веб-сайта, который полностью оптимизирует видение и цели вашего бизнеса. Качественные, хорошо продуманные изображения для вашего сайта — первый шаг к успеху. С помощью Rock Paper Simple в вашей команде мы можем помочь вам создать действительно потрясающие градиенты CSS.

Углы градиента в CSS, Figma и Sketch

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

Это становится еще более запутанным, когда вы смотрите на то, как ведет себя градиент при изменении размера элемента (по крайней мере, для меня это было запутанным).Поэтому я копал очень глубоко, чтобы выяснить, что на самом деле происходит, когда я назначаю угол градиенту в CSS, Figma или Sketch. Если вас это тоже интересует, что ж… продолжайте читать. Но позвольте мне предупредить вас. Там будет задействована тригонометрия.

I. Градиенты в CSS

Базовый синтаксис

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

linear-gradient(#f09, #3023AE, #0ff)

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

linear-gradient( вверху справа , #f09, #3023AE, #0ff)

Теперь градиент идет от нижнего левого угла элемента к верхнему правому углу.Угол градиента определяется размером элемента. Для квадрата это дает угол ровно 45 градусов. Если соотношение сторон элемента изменяется, угол градиента подстраивается под угол диагонали. Например, соотношение сторон 2:1 дает угол приблизительно 26,5 градусов.

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

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

Указание точных углов

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

linear-gradient( 36deg , #f09, #3023AE, #0ff)

То, что происходит сейчас, лучше всего описать следующим образом:

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

Постараюсь пошагово объяснить, что это значит: Сначала рисуем вертикальную ось и поворачиваем ее на 36 градусов. Назовем это осью градиента .

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

Мы почти у цели. Не хватает только трех линий, которые проходят через заданные цветовые точки и ортогональны оси градиента .Я буду называть их оси остановки цвета (Осторожно: линии , а не ортогональны диагонали прямоугольника!)

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

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

Если вы поклонник геометрии, вы, возможно, заметили, что диагональ, ось градиента, и внешняя ось остановки цвета образуют прямоугольный треугольник.Применяя теорему Фалеса, мы можем нарисовать окружность вокруг этого треугольника. А если повторить всю процедуру с оставшимися тремя углами, то получится фигура, немного напоминающая цветок. Когда градиент поворачивается, его конечные точки проходят вдоль внешней линии этой формы цветка. Довольно круто, правда??

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

Интерактивный пример

Хорошо, это было очень математически. И вы, вероятно, также задавались вопросом, зачем вам нужна тригонометрия, когда вы просто хотите вставить градиент. Чтобы лучше представить это, я создал интерактивную демонстрацию на CodePen.


II. Градиенты в Sketch

Теперь, как это выглядит, когда мы пытаемся воссоздать тот же процесс в Sketch? Прежде всего, вам придется столкнуться с тем, что в Sketch нельзя указать точный угол для градиента.Итак, давайте начнем с квадрата и перетащите градиент из одного угла в другой. Таким образом, мы точно знаем, что он имеет угол 45 градусов. К счастью, здесь работает интеллектуальное выравнивание, поэтому довольно легко попасть в нужный угол.

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

Теперь становится очень интересно, когда мы растянем квадрат в три раза по ширине и сравним результат с соответствующими объявлениями CSS:

Я не хочу утомлять вас слишком много математикой.
Здесь важно то, что ни одна из двух опций CSS не ведет себя так, как в Sketch . Градиент в Sketch имеет угол около 71,5 градуса (если вам действительно интересно: это арктангенс 3/1). В версии к верхнему правому углу угол составляет около 18,5 градусов (то есть 90 — 71,5 или арктангенс 1/3).

В Sketch ось градиента остается на диагонали, тогда как в CSS ось градиента настраивается так, чтобы оси остановки цвета были параллельны противоположной диагонали.

Наконец, в версии 45deg угол равен (сюрприз) 45 градусов. Если вы хотите воспроизвести этот градиент в Sketch, вам нужно разместить конечные точки градиента на пересечении оси градиента и оси остановки цвета . Это работает только до тех пор, пока вы не измените размер объекта снова.


III. Градиенты в Figma

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

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

На самом деле, похоже, что Figma ведет себя точно так же, как версия CSS от до вверху справа. По крайней мере, так это выглядит в текущем примере. К сожалению, это не всегда так. Figma берет созданный градиент, как будто это пиксельная графика, и искажает его. Таким образом, угол градиента также изменяется. Это станет ясно, если мы начнем с прямоугольника 3:1, заполним его градиентом, а затем уменьшим до квадрата.

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

IV. Заключение

Мы видим, что практически невозможно воспроизвести поведение CSS с помощью Figma или Sketch (по крайней мере, с градиентами, угол которых не кратен 90). Единственное, что можно воссоздать в Figma, — это градиент от одного угла к другому.Но опять же, вы должны сначала создать квадрат, заполнить его градиентом, а затем исказить квадрат до нужного размера.

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

29 Примеры градиента CSS

Коллекция бесплатных примеров кода CSS градиента от Codepen и других ресурсов.

  1. Кнопки градиента CSS
О коде

Радужная градиентная рамка CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

панели conic-gradient()

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

Автор
  • Адам Дипинто
О коде

Градиентный счетчик

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

Автор
  • Крис Койер
О коде

Несколько фоновых клипов

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

Автор
  • Эрин Э.Салливан
О коде

Упорядоченный список градиентов

Простой упорядоченный список с использованием SCSS и HTML5. Градиентный фон переходит от одного к другому и обратно.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

Автор
  • Маттиа Асторино
Сделано из
  • HTML (Мопс) / CSS (PostCSS)
О коде

Список счетчиков градиентов CSS

Пример счетчика CSS с фиксированным градиентом фона .

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: да

Зависимости: —

Автор
  • Тамино Мартиниус
Сделано из
  • HTML (Мопс) / CSS (PostCSS)
О коде

Коллекция градиентов

Небольшая коллекция градиентов CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Градиент прокрутки

Я решил адаптировать технику индикатора прокрутки только в CSS, чтобы создать фоновый градиент, меняющийся в зависимости от положения прокрутки. Верхний правый угол градиента меняется, а нижний правый остается прежним. Это работает путем наложения 2 градиентов. Первый — это градиент сверху вниз с высотой содержимого.Он содержит цвета, которые вы хотите перебирать. Другой — это градиент слева вверху и справа внизу от прозрачного к сплошному цвету. Этот градиент привязан к размерам области просмотра и располагается за текстом, подобно индикатору прокрутки.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Градиент

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

Автор
  • Джордж У.Парк
О коде

Эффект прожектора с радиальным градиентом

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

Автор
  • Дэвид Дж.Олдред
О коде

Размытые градиенты CSS

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

Автор
  • Уилл Кинг
Сделано из
  • HTML/CSS (SCSS)/JS (Вавилон)
О коде

Красивое подчеркивание

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

Автор
  • Инес Монтани
О коде

Нумерованные списки только для CSS с формами капли

Стилизованный нумерованный список с использованием счетчиков CSS и псевдоэлементов для фона в форме капли.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

Автор
  • Майк Шульц
О коде

Анимированная граница градиента CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Градиентные фоны — линейный, радиальный, двухцветный

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: font-awesome.css, jquery.js

Автор
  • Джордж Гастингс
О коде

Анимированное фоновое свечение

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

Автор
  • Джон Дайелло
О коде

Эффект градиента CSS при наведении

Быстрое доказательство концепции эффекта наведения с использованием режима смешивания-наложения и градиентов CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

Автор
  • Эндрю Спенсер
О коде

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

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: jquery.js

Автор
  • Джейми Коултер
О коде

Вращение оттенка CSS с градиентом

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

Автор
  • Мохсен Хакбиз
О коде

Кнопка с градиентной тенью

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

Автор
  • Джон Кантнер
О коде

Радар

Радарный дисплей, состоящий только из одного элемента.Чтобы не использовать дочерний элемент span или div , я нарисовал все, используя несколько наборов фонов. Однако для анимации сканирования нам нужно было использовать :before для анимируемой части.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

Автор
  • Фабио Оттавиани
О коде

Плитка с градиентом Название

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Текстовый клип SVG с градиентом и GIF

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

Автор
  • ДонСинДРом
Сделано из
  • HTML (мопс) / CSS (стилус)
О коде

Градиентный лес на чистом CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

CSS Закат Восход солнца

Перемещайте солнце с помощью мыши.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Градиенты

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Градиенты неба

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Матовый металл

Текстура создана с использованием 3-х повторяющихся градиентов разной длины.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Галерея шаблонов CSS3

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

Добавление градиента к тексту с помощью CSS

Градиенты CSS

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

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

  корпус{
  фон: линейный градиент (справа, #ee0979, #ff6a00);
}  

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

Обман браузера для применения градиента к тексту

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

  h2{
  размер шрифта: 6rem;
  фон: линейный градиент (45 градусов, #f3ec78, #af4261);
}  

Начните так же, как и раньше, применяя градиент к элементу body.Единственное изменение, которое мы сделали до сих пор, — это применение градиента к тегу h2. После этого вы увидите фон позади текста, но теперь он является частью элемента h2. Цвет текста по-прежнему будет черным.

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

  h2{
  размер шрифта: 6rem;
  фон: линейный градиент (45 градусов, #f3ec78, #af4261);
  фоновый клип: текст; -webkit-background-clip: текст; -moz-background-clip: текст; -moz-text-fill-color: прозрачный; -webkit-text-fill-color: прозрачный;}  

Это изменение добавляет два свойства к правилу CSS.Это background-clip и text-fill-color . Установка background-clip в text скроет фон, который не пересекает текст, а установка text-fill-color в Transparent сделает текст прозрачным.

Префиксы поставщиков -moz и -webkit необходимы для правильной работы обоих этих правил, поскольку поддержка браузеров все еще является новой, и при их использовании с градиентами возникает несколько ошибок. Для получения дополнительной информации об ограничениях на использование этих правил посетите сайт caniuse.ком

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

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

Чтобы исправить это, вы можете настроить стиль тега h2 так, чтобы ограничивающая рамка элемента совпадала с пространством, занимаемым текстом.Один из способов сделать это — сделать свойство display для тега h2 inline-block .

  h2{
  размер шрифта: 6rem;
  фон: линейный градиент (45 градусов, #f3ec78, #af4261);
  фоновый клип: текст;
  -webkit-background-clip: текст;
  -moz-background-clip: текст;
  -moz-text-fill-color: прозрачный;
  -webkit-text-fill-color: прозрачный;
  дисплей: встроенный блок}  

Добавление этого должно сделать градиент немного лучше. Имейте в виду, что это изменит поведение тега h2.Он больше не будет занимать все горизонтальное пространство в своем ряду. Если вам нужно, вы можете добавить вокруг него еще один div со 100% шириной или попробовать использовать свойство background-size вместо display, чтобы настроить внешний вид вашего градиента.

Чтобы увидеть работающую демонстрацию всего, что мы только что рассмотрели, вы можете воспользоваться песочницей кода, иллюстрирующей 3 этапа процесса. Попробуйте применить различные градиенты и комбинируйте этот трюк с анимацией CSS, чтобы создать свой собственный эффект. Чтобы попробовать классные градиенты, посетите uiGradients

.

«Жесткие градиенты CSS» можно сократить, чтобы не включать избыточные значения

Сегодня я прочитала «Пока вы не смотрели, CSS-градиенты стали лучше» Аны Тюдор.Статьи Аны всегда полны знаний о CSS, и я могу только порекомендовать следить за ней и ее работами.

Эта статья включает в себя изящный трюк с градиентом CSS, о котором я не знал. Допустим, у вас есть линейный градиент , который включает «жесткие цветовые точки». Тогда ваш CSS выглядит следующим образом:

  .element {
  
  фон: линейный градиент (
    #fc6262 20%,
    #50bbf6 20% 40%,
    #aaffef 40% 60%,
    #f9e699 60% 80%,
    #2c3749 80%
  );
}
  

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

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

Цвет-какой, спросите вы? Давайте посмотрим!

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

Приведенное выше правило исправления определяет, что если начальное значение цвета меньше, чем предыдущее конечное значение, конечное значение будет использоваться в качестве начального. Такое поведение позволяет использовать небольшую хитрость. Градиенты CSS, включая жесткие цветовые точки, можно настраивать и использовать 0 в качестве начальных значений. Избыточные значения color-start могут быть удалены.

  .элемент {
  
  фон: линейный градиент (
    #fc6262 20%,
    #50bbf6 0 40%,
    #aaffef 0 60%,
    #f9e699 0 80%,
    #2c3749 0
  );
}
  

Бен Бриггс также поделился тем, что cssnano использует эту технику для минимизации CSS.

Добавить комментарий

Ваш адрес email не будет опубликован.