Градиент фона css: Линейный градиент | htmlbook.ru

Содержание

CSS3 повторение градиента

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

Тест о котором я упоминал в описании находится здесь: Тест CSS3. Стандарт оформления HTML документов

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

Посмотреть примерСкачать

Как использовать?(простое повторение градиента)

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

1
2
3
4
5
6
7
8
9

/*Линейный*/  
. gradient {  
    background: repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);   
}  
 
/*Радиальный*/  
.gradient {  
    background: repeating-radial-gradient(50% 50%, circle, #f9f9f9, #cccccc 20px);    
}

(Создание шаблона для повторений)

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

HTML часть

Для этого нам нужен лишь один <div> и никаких изображений, только CSS3:

1
2

<div>
</div>

CSS3 часть

1
2
3
4
5
6
7
8
9
10

.gradient {  
    width: auto;  
    height: 500px;  
    margin: 0 50px;  
    background: -webkit-repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background: -moz-repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background: -o-repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background: repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background-size: 100% 21px;  
}

Последнее свойство означает что градиент будет растягиваться на всю страницу и повторяться через 21 пиксель. Чтобы свойство работало в разных браузерах мы используем специальные префиксы(«-webkit», «-moz», «-o»).

А для создания двух полосок слева мы используем псевдоэлемент :before :

1
2
3
4
5
6
7
8
9

.gradient:before {  
    content: "";  
    display: inline-block;  
    height: 500px;  
    width: 4px;  
    border-left: 4px double #FCA1A1;  
    position: relative;  
    left: 30px;  
}

Вывод

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

Успехов!

Источник: http://www.hongkiat.com/blog/css3-repeating-gradients/

10 бесплатных генераторов фона / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих.

FREELANCE.TODAY

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

 

TRIANGLIFY GENERATOR


 

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

 

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

 

С помощью генератора можно выбрать одну из 27 разработанных профессиональными дизайнерами цветовых схем, но если нужно сделать что-то свое, то всегда можно сгенерировать собственную схему. Полученный фон можно сохранить в форматах PNG и SVG.

 

TRIANGLIFY BACKGROUND GENERATOR

 


Инструмент Trianglify Background Generator использует тот же триангуляционный JS-плагин, что и предыдущий генератор. Скрипт, лежащий в основе программы, использует несколько палитр из COLOURlovers и ColorBrewer и позволяет использовать дополнительные настройки, такие, как выбор типа градиента. Также в инструменте есть два новых параметра в меню: Bleed и Cell Padding, однако данный функционал не может регулировать уровень дисперсии, так что пользователю придется выбрать одну их предустановленных палитр.

 

GEOPATTERN

 


Бесшовные текстуры можно создавать разными способами, в том числе и с помощью слов. Именно так работает очень необычный инструмент, который называется Geopattern. Пользователь может написать слово в специальном поле и программа сама сгенерирует текстуру. Минимум действий, максимум результата! Можно написать просто одну или две буквы и получить уникальную текстуру, которую можно использовать в качестве фона. Инструмент работает на основе простого скрипта, генерирующего бесшовные геометрические паттерны, состоящие из 16 различных фигур. Geopattern использует неограниченное количество цветов, поэтому выдает совершенно непредсказуемые результаты. Все зависит от количества букв в слове, так что пользователю придется поэкспериментировать, если он хочет подобрать уникальный узор. Результат можно сохранить в формате PNG.

 

DELAUNAY TRIANGLE PATTERN MAKER

 


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

 

FLAT SURFACE SHADER

 


На первый взгляд Flat Surface Shader ничем не отличается от предыдущего генератора случайных фонов. Однако это не так, сервис использует более рандомный и динамичный подход к триангуляции Делоне. Генерация полигонов происходит несколько хаотично, так как источники света в этом инструменте находятся в постоянном движении. В сущности, пользователь никак не может повлиять на конечный результат, но может подобрать цветовую схему и нужный размер полигонов. Фоновое изображение можно сохранить как в растровом формате PNG, так и в векторном формате SVG.

 

WATERPIPE.JS

 


Полигональные фоны сегодня в тренде, поэтому неудивительно, что подобных генераторов становится все больше. Но не везде такие паттерны выглядят уместно, порой нужно что-то другое. В этом случае можно использовать инструмент Waterpipe.js. Этот генератор позволяет получить изображение с эффектом дыма. Пользователь может скачать один из предустановленных вариантов или создать собственный фон, настроив параметры вручную. Можно выбрать цвет фона, также есть возможность выбора градиента.  Так как клубы дыма должны выглядеть, как трехмерные объекты, добиться нужного эффекта можно с помощью стартового и финишного градиентов. Сочетание светлого и темного оттенков создает реалистичный эффект дыма.

 

COLORFUL CSS GRADIENT BACKGROUND GENERATOR

 


Инструмент Colorful CSS Gradient Background Generator наверняка пригодится дизайнерам, создающим сайты и приложения, особенно тем, кто работает с iOS. Это веб-сервис позволяет создавать красивые градиентные фоны буквально на лету. Главное достоинство инструмента заключается в том, что он автоматически генерирует код CSS для создаваемых градиентов. Есть и небольшой минус, так как на выходе получается только код, а не картинка, так что фоновое изображение можно использовать только для интернет-проектов. Если же градиентный фон нужно получить в растровом формате, придется использовать стороннее программное обеспечение. Для этой цели неплохо подходит Phantom.JS, инструмент требует определенных навыков кодирования, но достаточно гибок и прост для того, чтобы справиться с поставленной задачей.

 

UNIQUE GRADIENT GENERATOR

 


С помощью инструмента Unique Gradient Generator можно создавать фоны из любого растрового изображения. Размер изображения практически не имеет значения, генератору достаточно даже картинки размером 7х3 пикселя. Инструмент размывает исходник до полной неузнаваемости, подобно эффекту Gaussian Blur в Adobe Photoshop. Чтобы добиться нужного результата, пользователю придется потратить какое-то время на подбор исходного изображения, иначе цветовая схема будет выглядеть несколько грязноватой, если в исходнике будет много темных оттенков.

 

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

 

MATERIAL DESIGN BACKGROUND GENERATOR

 

Инструмент Material Design Background Generator, это сервис, который находится на пике популярности, ведь с помощью данного инструмента можно без особых усилий генерировать фоновые изображения в стиле Material Design, созданном дизайнерами и веб-разработчиками компании Google. Так как это рандомный генератор, некоторые результаты могут выглядеть довольно странно. Так что пользователю придется потратить какое-то время, чтобы получить подходящее изображение. Такова плата за случайность, но зато в результате можно создать действительно уникальный фон для своего проекта.

 

K’S WATERCOLOR BACKGROUND IMAGE GENERATOR

 

Инструмент K’s Watercolor Background Image Generator создает бесшовные текстуры с эффектом акварели. Генератор создает изображение с помощью полупрозрачных кругов, которые, сливаясь, имитируют акварельные пятна. На настоящую акварель не очень похоже, но фоны получаются достаточно интересными. Чтобы создать текстуру, пользователю нужно указать количество кругов и их размер, а также выбрать цветовую схему. Чтобы создать более сложную текстуру, можно использовать несколько слоев, которые повлияют на конечный результат.

Blueprint фон с помощью градиентов CSS

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

Сегодня мы снова познаем силу великого и могучего CSS 3! Используя один лишь div блок и ни единого изображения, мы с вами сделаем фон в стиле светокопировального листа бумаги или blueprint paper. Для начала давайте разберёмся, что такое светокопировальная бумага и где она применялась, а так же где её можно применить в вебе.


Светокопировальная бумага — что это?


Светокопировальная бумага покрыта с одной из сторон очень тонким слоем светочувствительного вещества. Активно использовалась в 20 веке для копирования в светокопировальных аппаратах. Найти blueprint paper в виде форматной бумаги практически невозможно — она  поставляется исключительно в рулонах.


Со времени изобретения светокопировальной бумаги в 1861 году она притерпела множество изменений. Одно из самых видимых изменения — это цвет. В середине 30х годов 20ого века была наиболее распространена синяя копировальная бумага, которая и закрепилась в нашем представлении. Из-за цвета её и назвали на западе blueprint paper, а в СССР её прозвали просто «синькой».



Blueprint-бумага активно использовалась при создании чертежей, схем и прочих полётов инженерной фантазии того времени. Рисунок наносился белым цветом, который был отчётливо виден на синем фоне. Но где нам может понадобиться фон в стиле blueprint/светокопировальной бумаги в вебе?


На самом деле применений тут можно придумать массу — это может быть страница «в разработке», «ошибка 404»; блок-растяжка с начертаниями устройств для визуализации того, что компания разрабатывает адаптивные сайты; blueprint может отлично вписаться в формат уютного техно-блога или для создании страницы с бета-версией программного обеспечения. Использований масса, делается просто, а смотрится отлично! Давайте приступим!


Создаём сетку


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


See the Pen Simple crossing strips by Sam Gozman (@samgozman) on CodePen.

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


Накладываем три сетки


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


  • 1 сетка: 128px на 128px

  • 2 сетка: 32px на 32px

  • 3 сетка: 16px на 16px

Также для большего соответвтия поставленной цели подберём более подходящие цвета для фона и для сеток. Для более «натурального» вида сетки поверх синего фона сделаем линии с разным уровнем прозрачности (используем rgba либо hsla цвета). Первая сетка будет с прозрачностью 0.8 и толщиной 3px, вторая 0.6 и 2px, и третья с прозрачностью 0.3 и толщиной 1px соответсвенно. Прозрачность, как и цвет с толщиной, вы можете подобрать на ваше личное усмотрение.


See the Pen Simple blueprint pattern by Sam Gozman (@samgozman) on CodePen.

Добавим радиальный градиент


Последний штрих для нашего blueprint паттерна! Вместо простого цвета для подложки наших сеток, как было ранее, мы будем использовать радиальный градиент от более тёмного к более светлому фону. Это позволит нам сделать наш паттерн ещё более реалистичным и менее однотипным.


Помните, что градиенты накладываются друг на друга в том порядке, в котором они были описаны. То есть первый градиент будет первым, а последний последним — всё просто. Следовательно, чтобы радиальный градиент не перекрыл все наши сетки, его нужно ставить в самый конец.


See the Pen Simple blueprint pattern with radial gradient by Sam Gozman (@samgozman) on CodePen.

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


Для большей реалистичности я бы ещё добавил лёгкий эффект зашумленности (noise effect), но как его грамотно реализовать, не прибегая к base64,  используя один лишь css, я не знаю. Если знаете как сделать реалистичный лёгкий эффект зашумленности с помощью градиентов css — пишите в комментарии, дополню статью.


Посмотреть целиком можно на CodePen.

Thursday, 29 December 2016

Как использовать фоновые градиенты CSS в электронных письмах HTML | Maizzle

Многие почтовые клиенты поддерживают фоновые градиенты CSS.

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

Начало работы

Начнем с создания нового проекта Maizzle.

Откройте окно терминала и выполните команду new :

  maizzle new

Следуйте инструкциям, используя example-gradient в качестве имени папки.

Мы сказали, что будем использовать плагин tailwindcss-gradient , так что давайте продолжим и установим его.

Сначала cd в каталог проекта:

  cd example-gradient

Затем установите плагин с помощью NPM:

  npm install tailwindcss-gradient

После его завершения откройте пример - градиенты в вашем редакторе.

CSS Gradients

Давайте настроим и используем tailwindcss-gradient с Tailwind CSS.

Конфигурация Tailwind

Нам нужно указать Tailwind использовать плагин. Отредактируйте tailwind.config.js и require () плагин внутри плагинов : [] array:

 
module.exports = {
  плагины: [
    require ('tailwindcss-gradient'),
  ]
}

Затем нам нужно определить, какие градиенты мы хотим сгенерировать на основе каких цветов.
Мы делаем это в теме : {} ключ из tailwind.config.js .

Например, зарегистрируем линейные градиенты на основе существующей цветовой палитры:

 
module.exports = {
  тема: {
    linearGradientColors: theme => theme ('цвета'),
  }
}

Если вы запустите maizzle build и посмотрите на один из шаблонов в build_local , вы увидите, что размер файла почти удвоился, а в нем много служебных классов градиента фонового изображения:

  .bg -gradient-t-transparent {
  фоновое изображение: линейный градиент (вверх, rgba (0, 0, 0, 0), прозрачный)! important;
}

Причина такого большого количества классов в том, что tailwindcss-gradient выводит утилиты для всех комбинаций цветов, определенных в нашей конфигурации.

Мы, конечно, можем изменить это и сгенерировать только несколько градиентов:

 
module.exports = {
  тема: {
    linearGradientColors: {
      'красный': '# f00',
      'красно-синий': ['# f00', '# 00f'],
      'красный-зеленый-синий': ['# f00', '# 0f0', '# 00f'],
      'черный-белый-с остановками': ['# 000', '# 000 45%', '#fff 55%', '#fff'],
    }
  }
}

Снова запустите maizzle build , и теперь вы должны увидеть только 64 сгенерированных служебных класса.

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

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

Просто добавьте служебный класс к элементу, который поддерживает background-image CSS.

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

Outlook VML

Outlook для Windows не поддерживает градиенты CSS, но мы можем использовать VML .

Его нужно добавить сразу после элемента с классом градиента CSS:

  

  

    
      
      [здесь ваш наложенный HTML]

Как видите, вам нужно установить фиксированную ширину для элемента — это рекомендуется вместо использования mso-width-percent: 1000; , так как это довольно глючно (особенно в Outlook 2013).

Ширина элемента должна соответствовать ширине его родительского элемента (в нашем случае

).

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

Мы также можем добавить градиент к тексту электронного письма — включая поддержку Outlook.

Для этого мы:

  1. создаем
    , который обертывает наш шаблон: это будет использоваться в качестве запасного цвета сплошного фона.
  2. поместим код VML непосредственно внутри этого div, в основном обертывая весь наш шаблон.
    Обратите внимание, как мы используем МСО-ширина-процент: 1000; вместо фиксированной ширины на

Вот пример:

  

  
  <таблица>

Оба примера можно увидеть в репозитории проекта ↗

Избегайте встраивания

Большинство почтовых клиентов, поддерживающих градиенты CSS, также поддерживают запросы @media .

Мы можем зарегистрировать точку останова screen , чтобы Juice не встраивал наш градиент:

 
module.exports = {
  тема: {
    screen: {
      экран: {raw: 'screen'},
      sm: {max: '600px'},
    }
  }
}

Затем мы можем написать служебный класс следующим образом:

Ресурсы

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

Градиенты CSS

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

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

  кузов {
  фон: linear-gradient (справа, # ee0979, # ff6a00);
}

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

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

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

  h2 {
  font-size: 6rem;
  фон: линейно-градиентный (45deg, # f3ec78, # af4261);
}

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

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

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

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

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

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

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

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

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

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

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

.

CSS Gradients with background-blend-mode

Свойство CSS background-blend-mode объединяет фоны элемента: цвета, изображения и градиенты вместе с режимами наложения, подобными Photoshop (умножение, экран, наложение и т. Д. ).Он очень новый и на данный момент поддерживается последними выпусками Chrome, Firefox и Opera. Свойство скоро появится в Safari, но не в Internet Explorer.

CSS-градиенты уже очень эффективны при создании шаблонов, как показано в галерее CSS-шаблонов Lea Verou. С новым свойством background-blend-mode возможности снова расширяются.

CSS-градиенты

полностью не зависят от разрешения и изменяются быстрее, чем изображения.Принимая во внимание соображения производительности, анимация и переходы возможны через свойства background-size или background-position .

Обратной стороной background-blend-mode наряду со многими очень новыми свойствами CSS является добавленная работа по обеспечению красивой альтернативы для браузеров без поддержки этого свойства. К счастью, это не так уж сложно. С помощью крошечного фрагмента Javascript мы можем определить, нет ли поддержки:

  if (! ("BackgroundBlendMode" в документе.тип кузова)) {
    // Нет поддержки background-blend-mode
  var html = document.getElementsByTagName ("html") [0];
  html.className = html.className + "режим наложения без фона";
}

В файле CSS теперь можно указать разные стили для неподдерживаемых браузеров с помощью класса .no-background-blend-mode . Есть и другие способы определения поддержки, с помощью Modernizr или даже с помощью CSS @supports . Однако вы можете столкнуться с ситуацией, когда эта дополнительная работа даже не нужна, и если оставить неподдерживаемый браузер для рендеринга градиентов CSS без background-blend-mode выглядит нормально.

Приведенные выше градиенты, скорее всего, невозможно точно воспроизвести в CSS без background-blend-mode . Однако использование градиента CSS вместо изображения не только избавляет вас от HTTP-запроса, но и становится намного меньше по размеру. Размеры градиентов CSS вычисляются без префикса, что поддерживается всеми последними браузерами.

Как анимировать градиенты в CSS и React

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

Обожаю градиенты. После стольких лет использования однотонных цветов и плоского дизайна я рад их возвращению!

Оказалось, что анимация градиентов CSS дала гораздо больше проблем, чем я ожидал, и результат оказался немного неутешительным:

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

Этот подход вроде бы работает, но есть проблемы:

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

  • Это просто выглядит не очень хорошо; Я хотел что-то с естественным течением, и это казалось статичным и безжизненным.

Последние пару лет я много думал об этой кнопке.Это было давно, но после открытия новой техники wild я, наконец, смог придумать что-то, что мне нравится.

Без лишних слов, новая кнопка:

Magic Rainbow Button

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

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

Большая разница здесь в том, что на самом деле ничего не движется . На 2D-плоскости больше не происходит перевода. Вместо этого я беру 3 цвета из 10-цветной палитры радуги, и каждая точка градиента медленно смещается, чтобы унаследовать цвет из предыдущей точки. Точка C3 всегда на 1 цвет отстает в палитре от точки C2 .

Это создает иллюзию движения, похожую на те огни казино или заведения:

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

Итак, план игры складывался:

  • Я бы создал палитру из 10 цветов радуги.

  • Я бы установил градиент, чтобы удерживать движущееся окно из 3 цветов.

  • Я бы запустил интервал, который обновлял бы градиент каждую секунду, сдвигая каждый цвет на 1 точку.

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

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

 
 I  мог бы  сделать все это на JS. Я мог бы настроить цикл  requestAnimationFrame , который разбивает каждый переход цвета на ~ 60 инкрементальных шагов.Мне эта идея не понравилась, она казалась слишком сложной. Кроме того, поскольку все это будет происходить в основном потоке в JavaScript, анимация может стать прерывистой в периоды занятости. 
 
 Я хотел сделать интерполяцию в CSS. И, к счастью, я нашел способ 😊 
 
 Некоторое время назад в CSS были переменные. На первый взгляд, они очень похожи на переменные, которые вы видели в SASS или LESS, но, в отличие от препроцессоров, переменные все еще присутствуют в коде во время выполнения. Это делает их намного более мощными, как мы скоро увидим! 
 
 Вот как вы можете использовать настраиваемые свойства CSS в градиенте: 
 
 
 Мы можем использовать встроенные стили, чтобы установить это в элементах React, например: 
 
 
 Само по себе это нам не помогает.Мы по-прежнему не можем применить переход   непосредственно к  фону . Но это приближает нас на один шаг вперед 🕵🏻‍♂️ 
 
 CSS Houdini — это обширный набор грядущих улучшений CSS, основанных на одной идее: разработчики должны иметь возможность создавать свои собственные функции CSS. 
 
 Например, CSS не имеет встроенного способа создания макетов кладки. Было бы здорово, если бы вы могли построить его, подключившись напрямую к механизмам CSS, а затем получить к нему доступ с помощью  display: masonry ? 
 
 Другой пример: такие проекты, как Babel, позволяют нам «полифиллировать» (большинство) недостающих функций в JS, потому что мы можем имитировать эти новые функции, используя более раннюю версию языка.Но мы не можем использовать полифиллы (большинство) функций CSS. Houdini позволит нам полифилить отсутствующий CSS, предоставляя нам доступ к внутренней проводке движка CSS. 
 
 CSS Houdini — это огромный проект, в котором уже много лет исследований и разработок, и я ожидаю, что он определит будущее веб-разработки захватывающим и непредсказуемым образом. Однако сегодня я хотел бы сосредоточиться на одной относительно небольшой, но невероятно интересной части:  анимированных настраиваемых свойств . 
 
 В CSS «свойство» — это то, чему вы можете присвоить значение. display  и  transform  и  color  — все это примеры свойств. Почему же тогда  переменных  в CSS называются  настраиваемыми свойствами ? Разве это не совсем другое понятие? 
 
 На самом деле они больше похожи, чем я думал. Переменные CSS лучше рассматривать как свои собственные свойства, такие как отображение и преобразование. 
 
 
 Вот дикая, умопомрачительная часть: вы можете  переходить пользовательские свойства : 
 
 
 Мы не говорим браузеру анимировать фоновое свойство  , мы говорим браузеру анимировать наше настраиваемое свойство  .А затем мы используем это настраиваемое свойство в нашем фоновом градиенте. Удивительно, но ключевое слово  var ()  является реактивным, заставляя фон перерисовывать каждый раз при изменении значения, даже когда это значение анимировано с помощью перехода  . 
 
 Моя голова все еще гудит от возможностей. Настраиваемые свойства CSS намного круче, чем я предполагал, а Houdini дает нам совершенно волшебные силы ✨🧙✨ 
 
 
  
 Ссылка на этот заголовок 
 Еще одна деталь: регистрация свойства  
 Перед этим нам нужно сделать еще одну вещь действительно будет работать.Нам нужно сообщить браузеру, что такое , тип  нашего настраиваемого свойства. 
 
 Следует ли браузеру рассматривать это как цвет? Длина? Угол? Нам нужно четко указать на это, чтобы браузер знал, как интерполировать изменения. 
 
 Мы делаем это в JS с помощью следующего метода: 
 
 
 Через некоторое время мы увидим, как хуки React позволяют нам довольно хорошо упаковать это. Однако сначала я хотел поделиться необработанным кодом JS для людей, использующих другой фреймворк или вообще не использующих фреймворк: 
 
 
 Одна из замечательных особенностей крючков React заключается в том, что они дают разработчику больше контроля над тем, как разные идеи выражено.Пользовательские крючки позволяют нам запихивать кучу вещей в коробку, и мы сами должны рисовать коробки. Мы можем выбрать, хотим ли мы оптимизировать для повторного использования, ясности или чего-то еще. 
 
 В данном случае я бы хотел сохранить дружеские отношения. Я в порядке, пожертвовать немного мощностью или гибкостью в обмен на без излишеств без излишеств  useRainbow . 
 
 
  
 Ссылка на этот заголовок 
 Состояние и API  
 Сначала я думал, что сохраню текущие цвета в состоянии, но мне пришло в голову, что цвета являются производными данными;  вещественных  битов состояния — это текущий счетчик интервалов.
 
 Если я, например, на 5-м цикле, я знаю, что мои цвета будут 5-м, 6-м и 7-м цветами в моей 10-цветной палитре. Поскольку палитра статична, я могу просто отслеживать это число и использовать его для получения цветов. 
 
 Следующее, что я хотел выяснить, это интерфейс ловушки. Я начал с написания компонента, который будет использовать этот хук. Мне нравится просто придумывать любой API, который кажется идеальным для компонента, который его использует. Потребительская разработка. 
 
 
 Имея это в виду, вот начальная версия этой ловушки: 
 
 
 
 *  useIncrementingNumber  — это настраиваемая ловушка, которая выдает новое, постоянно увеличивающееся число на основе заданной интервальной задержки.Он основан на хуке Дэна Абрамова setInterval. Вы можете посмотреть его источник здесь. 
 
 
 Мне нравится этот подход, потому что существует четкое разделение обязанностей: 
 
     
  •    
      useRainbow  отвечает за создание цветов и управление ими, но не имеет права голоса в том, для чего они используются. 
     
    •  
  •    
     Компонент  MagicRainbowButton  ничего не знает о том, откуда эти цвета и когда они обновляются, но решает, что с ними делать.
     
    •  
 
 Есть одна вещь, которая заставляет меня немного покалывать; Довольно удивительно, что  useRainbow  тайно регистрирует глобальные настраиваемые свойства CSS. Фактически, регистрация глобального значения из экземпляра компонента будет проблематичной! Мы рассмотрим эту и некоторые другие нерешенные проблемы в следующем разделе. 
 
 Прежде чем вы начнете размещать радужные кнопки на веб-сайте вашей юридической фирмы или в бухгалтерском программном обеспечении, нам нужно подумать о нескольких вещах.
 
 
  
 Ссылка на этот заголовок 
 Глобальные свойства и повторяющиеся компоненты  
 Самая большая проблема с нашей текущей реализацией заключается в том, что она нарушает основной принцип React: каждый экземпляр компонента должен быть независимым. Мы должны иметь возможность визуализировать столько копий, сколько захотим, не мешая друг другу. 
 
 Если мы попытаемся отобразить две копии нашего  MagicRainbowButton  на одной странице, мы получим следующую ошибку: 
 
 
 InvalidModificationError: не удалось выполнить ‘registerProperty’ в ‘CSS’: указанное имя уже зарегистрировано.
 
 
 Это связано с тем, что реестр настраиваемых свойств CSS является глобальным объектом; все экземпляры наших компонентов используют одно и то же глобальное пространство имен! И прямо сейчас они оба пытаются зарегистрировать одни и те же имена. 
 
 Я обошел это, создав уникальный идентификатор для каждого компонента React и сохранив его с хуком  useRef : 
 
 
 Это также заставляет меня чувствовать себя лучше по поводу «секретных побочных эффектов в хуках». Немного случайности исключает риск коллизии имен, позволяя нам притвориться, что на самом деле это не глобально.
 
 
  
 Ссылка на этот заголовок 
 Поддержка браузера  
 Houdini является суперсовременным, и это отражено в его поддержке браузером: на момент написания  CSS.registerProperty  поддерживается только Chrome 78+, и Opera 65+. 
 
 Мое решение? Выйдите из крючка раньше, если  window.CSS  или  CSS.registerProperty  не найдены, и верните первые 3 цвета. Другие браузеры не получат анимацию, но все равно получат красивый градиент! И наш компонент React вообще не должен меняться 💯 
 
 
 Примечание: IE11 вообще не поддерживает настраиваемые свойства, поэтому, если вам нужно его поддерживать, вам нужно будет установить резервный градиент фона, используя жестко заданный цвет. значения вместо настраиваемых свойств 
 
 
 
  
 Ссылка на этот заголовок 
 Производительность  
 В прошлом году я говорил о производительности анимации / взаимодействия.В этом выступлении я упомянул, что есть два свойства «золотого стандарта»: непрозрачность ,  и преобразование , . Эти два свойства работают намного лучше, чем другие свойства, потому что им не нужно рисовать в каждом кадре, ими можно манипулировать непосредственно графической картой как текстурой, перемещаясь без какой-либо работы ЦП. 
 
 В этом выступлении я  также  выступал за нарушение этого правила, если вы измеряете. С  6-кратным дросселем  на моем процессоре я запустил профилировщик: 
 
 Это правда, что этот метод включает перерисовку каждого кадра, и перерисовка может быть медленной… но в этом случае объем перерисовки крошечный.Перерисовка занимает  ~ 0,3 миллисекунды , что составляет около 2% нашего бюджета, если мы хотим достичь 60 кадров в секунду. 
 
 Анимация свойств, таких как  height , часто выполняется очень медленно, потому что она включает в себя как макет , , так и этап раскраски  , а также потому, что количество задействованных пикселей может быть очень большим. В этом случае нет шага макета, а шаг рисования быстрый и целевой 💫 
 
 
  
 Ссылка на этот заголовок 
 Доступность  
 Причудливые штрихи — это здорово, но не тогда, когда они происходят за счет удобства использования.
 
 Некоторые типы анимации могут быть проблематичными для людей с вестибулярными расстройствами — они могут вызывать головокружение, тошноту, головные боли и другие неприятные симптомы. 
 
 Браузеры усердно работали над реализацией поддержки медиа-запроса «предпочитает уменьшенное движение». Этот запрос основан на настройке Windows / MacOS и позволяет пользователям заявить, что они хотели бы отключить анимацию. 
 
 Браузер поддерживает этот медиа-запрос значительно лучше и поддерживает Chrome, Firefox, Safari и (скоро) Edge.Мы настроим его так, чтобы мы включали анимацию только для людей, которые выбрали «без предпочтений» для движения, значение по умолчанию: 
 
 
 Этот метод может быть немного нелогичным — разве мы не хотели бы  Отключить  анимацию для тех, кто выражает свои предпочтения? — но в большинстве случаев получается одно и то же. Исключение составляют люди, использующие старые браузеры, такие как Internet Explorer; в их случае медиа-запроса не существует. Это означает, что люди в этих браузерах  не увидят анимацию.Лучше принять более безопасное предположение. 
 
 Помимо движения, нам также нужно подумать о цветовом контрасте. Смогут ли люди с нарушениями зрения читать текст на кнопке? Я добавил немного тени текста и затемнил теплый конец спектра. По правде говоря, в определенные периоды анимации он может быть слишком малоконтрастным, но я уверен, что большую часть времени он разборчив, и анимация быстро меняется. 
 
 Если вы хотите создать свою собственную кнопку-радугу, исходный код для нее может пригодиться.Этот блог имеет открытый исходный код, поэтому вы можете найти его на Github. 
 
 Если вы действительно где-то используете этот эффект,  Я бы хотел его увидеть ! Напишите мне в Twitter или по электронной почте и дайте мне знать! 
 
 Это новый год, и одна из моих целей на 2020 год — создать много высококачественных интерактивных сообщений в блогах, подобных этой. Мой информационный бюллетень — лучший способ узнавать, когда публикуется что-то новое. 
 
 Я знаю, что забросал вас множеством кнопок «подписаться» на этот пост *, но этот последний действительно.Вы не присоединитесь к моему информационному бюллетеню? 
 
 64 фоновых шаблона CSS 
 
 Коллекция отобранных вручную  фоновых шаблонов HTML и CSS  примеров кода. Обновление коллекции за февраль 2020 года. 13 новинок. 


 
     
  1.  CSS Анимированные фоны 
    2. 
   
  2.  Фиксированные фоны CSS 
    3. 
   
  3.  CSS-фоны частиц 
    4. 
   
  4.  Фон треугольников CSS 
    5. 
   
  5.  Фоновые плагины jQuery 
    6. 
 



 Автор 


     
  •  Беннетт Фили 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 Фон Windows 95 в CSS 

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

   
 отзывчивый: да 

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





 Автор 


     
  •  юаньчуань 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 Фоновые узоры 

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

   
 отзывчивый: да 

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




 Автор 


     
  •  Юхомян 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 Незуко Камадо 

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

   
 отзывчивый: да 

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





 Автор 


     
  •  G V ТАНИШ ВЕТТРИВЕЛ 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 Фоновый узор 

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

   
 отзывчивый: да 

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




 Автор 


     
  •  G V ТАНИШ ВЕТТРИВЕЛ 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 Фоновый узор 

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

   
 отзывчивый: да 

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





 Автор 


     
  •  G V ТАНИШ ВЕТТРИВЕЛ 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 Фоновый узор 

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

   
 отзывчивый: да 

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




 Автор 


     
  •  Ана Тудор 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 Простые шаблоны градиентов CSS 

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

   
 отзывчивый: да 

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



   
 О коде 

   
 Шаблон на чистом CSS 

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

   
 отзывчивый: да 

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




 Автор 


     
  •  Акшая Венки 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 Узоры и градиенты 

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

   
 отзывчивый: да 

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




 Автор 


     
  •  Юсуке Накая 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 Только CSS: Border Caterpillar 

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

   
 отзывчивый: да 

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


   
 О коде 

   
 Фон One Div Pie 

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

   
 отзывчивый: да 

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


   
 О коде 

   
 Фоновые узоры в CSS с использованием шаблона.css 

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

   
 отзывчивый: да 

   
 Зависимости: pattern.css 




 Автор 


     
  •  Танк Манан 
    • 

  •   
    • 


  
  

 Сделано с 


     
  •  HTML (Мопс) / CSS (Стилус) 
    • 


  
   
 О коде 

   
 Узоры теней коробки 

   
 Каждый паттерн создается с использованием одного  div .Каждый квадрат или круг — это тень псевдоэлемента. 

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

   
 отзывчивый: да 

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


   
 О коде 

   
 Текстура 

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

   
 отзывчивый: да 

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




 Автор 


     
  •  Ана Тудор 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 Карты с простым полосатым фоном 

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

   
 отзывчивый: да 

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




 Автор 


     
  •  Ана Тудор 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 Полутоновый узор на чистом CSS 

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

   
 отзывчивый: да 

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


   
 О коде 

   
 Линии фланели 

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

   
 отзывчивый: да 

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




 Автор 


     
  •  Беннетт Фили 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 Без названия 

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

   
 отзывчивый: да 

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




 Автор 


     
  •  Линн Фишер 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 CSS Single DIV Геометрический узор 

   
 Радужный геометрический повторяющийся фон для вашего любимого элемента HTML.

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

   
 отзывчивый: да 

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




 Автор 


     
  •  Ана Тудор 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 1-элементные фоновые рисунки карточек 

   
 Чистый CSS, простой и компактный метод, без SVG, без изображений, кроме градиентов CSS. 

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

   
 отзывчивый: да 

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




 Автор 


     
  •  CodeMeNatalie 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 Стрелка фоновый узор 

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

   
 отзывчивый: да 

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


  


 Автор 


     
  •  Дизайн пользовательского интерфейса eZ 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 Фоновый узор 

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

   
 отзывчивый: да 

   
 Зависимости: css-doodle.js 




 Автор 


     
  •  Михаэль ван ден Берг 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 Синие квадраты 

   
 Простая страница с градиентным фоном CSS. 

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

   
 отзывчивый: да 

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




 Автор 


     
  •  Карлита Сентено 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 Простые выкройки 

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

   
 Адаптивный: нет 

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




 Автор 


     
  •  Ана Тудор 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 1-элементные фоновые рисунки карточек 

   
 Полнофункциональный, только если  conic-gradient ()  имеет встроенную поддержку.

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

   
 отзывчивый: да 

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




 Автор 


     
  •  Сандра Дэвис 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 100 шаблонов CSS 

   
 Коллекция из 100 фоновых узоров на чистом CSS. 

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

   
 отзывчивый: да 

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



 О коде 


 Фоновые узоры 


 Сетка, гибкость и фоновые узоры.

Демонстрационное изображение: CSS Fruit Background — Ананас 
 CSS Fruit Background — Ананас 

 

Сделано Анжелой Веласкес 

18 апреля 2017 г. 





 Автор 


     
  •  Крис Джонсон 
    • 

  •   
    • 






 О коде 


 Волнистый узор SVG и CSS 


 Аккуратный небольшой волновой узор с SVG и CSS. 

Демонстрационное изображение: точечный узор CSS / фон сетки 
 Точечный узор CSS / фон сетки 

 
 Простая техника создания точечного рисунка или фона точечной сетки.Поддержка: все современные браузеры и IE9 +. 

Сделано Эдмундо Сантосом 

2 ноября 2016 г. 


Демонстрационное изображение: CSS3 Gradient Pattern 
 CSS3 Gradient Pattern 

 

Автор fox_hover 

6 сентября 2016 г. 


Демонстрационное изображение: подводный шаблон CSS 
 Подводный шаблон CSS 

 

Сделано Лаурой Сейдж 

12 августа 2016 





 Автор 


     
  •  амперсанд_xyz 
    • 

  •   
    • 






 О коде 


 Шаблон решетки CSS 


 Фон решетки на чистом CSS.


  

  
  

 Сделано с 


     
  •  HTML (мопс) / CSS (SCSS) / JavaScript 
    • 


  
   
 О коде 

   
 CSS-фоны 

   
 Игра с градиентами. 

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

   
 отзывчивый: да 

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

Демонстрационное изображение: CSS Background Patterns — Boxes 
 CSS Background Patterns — Boxes 

 

Сделано Praveen Puglia 

23 мая 2016 г. 


Демонстрационное изображение: Выкройка рубашки с 6 ступенями 
 Выкройка с 6 ступенями 

 

Сделано Аной Тюдор 

18 мая 2016 г. 





 Автор 


     
  •  Марка Дойч 
    • 

  •   
    • 






 О коде 


 Рисунок плетения корзины 


 CSS шаблон: плетение корзины.

Демонстрационное изображение: Simple Pattern 
 Simple Pattern 

 

Сделано Габриэлем R 

27 октября 2015 г. 





 Автор 


     
  •  Правин Апулия 
    • 

  •   
    • 






 О коде 


 Шаблон CSS 


 CSS современный образец кирпича. 

Демонстрационное изображение: узор серебряных чешуек 
 Узор серебряных чешуек 

 

Сделано yoksel 

17 октября 2015 г. 


Демонстрационное изображение: Образец кругов 
 Образец кругов 

 

Сделано yoksel 

17 октября 2015 г. 


Демонстрационное изображение: Волновой узор 
 Волновой узор 

 

Сделано yoksel 

17 октября 2015 г. 


Демо-изображение: Образец капель 
 Образец капель 

 

Сделано yoksel 

17 октября 2015 г. 


Демонстрационное изображение: Образец сердечек 
 Образец сердечек 

 

Сделано yoksel 

17 октября 2015 г. 


Демонстрационное изображение: узор из кругов и точек 
 Узор из кругов и точек 

 

Сделано yoksel 

17 октября 2015 г. 


Демонстрационное изображение: Угловой узор 
 Угловой узор 

 

Сделано yoksel 

17 октября 2015 г. 


Демонстрационное изображение: узор с квадратами 
 Узор с квадратами 

 

Сделано yoksel 

17 октября 2015 г. 


Демонстрационное изображение: Угловой узор 
 Угловой узор 

 

Сделано yoksel 

17 октября 2015 г. 


Демо-изображение: Argyle Pattern 
 Argyle Pattern 

 
 Попытка создать узор «аргайл» с использованием нескольких фонов CSS (linear-gradient).

Изготовлено carpe numidium 

1 октября 2015 г. 


Демо-изображение: Шаблон Jason Quote Bg 
 Шаблон Jason Quote Bg 

 

Сделано Джорджем Олару 

25 августа 2015 г. 





 Автор 


     
  •  Кэти ДеКора 
    • 

  •   
    • 






 О коде 


 Выкройка платка 


 Выкройка платка CSS. 




 Автор 


     
  •  Амелия Беллами-Ройдс 
    • 

  •   
    • 






 О коде 


 Узор из шестиугольников 


 Анимированные неоновые шестиугольники с помощью SVG и CSS.

Демонстрационное изображение: Шаблон CSS 
 Шаблон CSS 

 

Сделано И Венн Со 

2 ноября 2014 г. 





 Автор 


     
  •  Джино Фариас 
    • 

  •   
    • 






 О коде 


 Шаблон CSS3 


 Простой шаблон в HTML и CSS. 

Демонстрационное изображение: шаблон CSS с режимом наложения CSS 
 Шаблон CSS с режимом наложения CSS 

 

Сделано Маринда 

23 июня 2014 г. 


Демонстрационное изображение: полосатый фон 
 Полосатый фон 

 

Сделано yoksel 

12 июня 2014 г. 


Демонстрационное изображение: Узор «Морозные спирали» 
 Узор «Морозные спирали» 

 

Сделано yoksel 

11 февраля 2014 г. 


Демонстрационное изображение: Шаблон CSS 
 Шаблон CSS 

 Только 
 CSS.Слишком сложно использовать в реальном коде. 

Сделано yoksel 

10 февраля 2014 г. 


Демонстрационное изображение: Выкройка скатерти 
 Выкройка скатерти 

 

Сделано yoksel 

6 февраля 2014 г. 


Демо-изображение: узор с бриллиантами 
 узор с бриллиантами 

 

Сделано yoksel 

6 февраля 2014 г. 


Демонстрационное изображение: диагональные полосы 
 Диагональные полосы 

 

Сделано yoksel 

6 февраля 2014 г. 





 Автор 


     
  •  Хорхе Эпунья 
    • 

  •   
    • 






 О коде 


 Простой узор 


 Градиенты, формы, rgba… 

Демо-изображение: несколько градиентов для необычных узоров 
 Несколько градиентов для необычных узоров 

 

Сделано Марком Ли 

30 ноября 2013 г. 


Демонстрационное изображение: шаблон чертежа (CSS3) 
 шаблон чертежа (CSS3) 

 
 Шаблон чертежа на чистом CSS с использованием линейных градиентов CSS3. 

Сделано Дином 

23 ноября 2013 г. 





 Автор 


     
  •  Крис Койер 
    • 

  •   
    • 


  
  
  
   
 О коде 

   
 Фоновый узор треугольника 

   
 Дрянное воссоздание обложки книги «Пламенный алфавит».

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

   
 отзывчивый: да 

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

 
 maizzle / example-gradient: используйте фоновые градиенты CSS в сообщениях электронной почты HTML с резервным вариантом VML для Outlook. 

 
 Это репо для руководства Maizzle Как использовать фоновые градиенты CSS в электронных письмах HTML. 

 
 шаблоны 

 
 Включено 2 примера: 

 
 Совместимость 

 
 В шаблонах используется линейный градиент CSS  background-image  с резервным VML для Outlook, что означает, что он работает более чем в 87% всех почтовых клиентов (возможно, даже больше, многие почтовые клиенты для Mac должны поддерживать это просто отлично) .

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

 
 CSS gradient работает в: 

 
     
  •  Apple Mail 
    • 
 
  •  Почта iOS 
    • 
 
  •  Outlook iOS 
    • 
 
  •  Gmail iOS 
    • 
 
  •  Gmail Android 
    • 
 
  •  Gmail Интернет, Google Apps (браузер) 
    • 
 
  •  Samsung Mail 
    • 
 
  •  Thunderbird 
    • 
 
  •  + различные другие почтовые веб-клиенты 
    • 
 
 
 Резервное копирование VML работает в: 

 
     
  •  Outlook 2007 
    • 
 
  •  Outlook 2010 
    • 
 
  •  Outlook 2013 
    • 
 
  •  Outlook 2016 
    • 
 
  •  Outlook 2019 
    • 
 
 
 Сплошной цвет фона отображается в: 

 
     
  •  Outlook.com 
    • 
 
  •  Office 365 
    • 
 
  •  Yahoo! Почта 
    • 
 
  •  AOL Mail 
    • 
 
  •  Comcast, GMX, Telstra / BigPond 
    • 
 
  •  Outlook 2003 
    • 
 
 
 Градиенты CSS Tailwind 

 
 Начиная с версии 1.7.0, Tailwind включает в себя утилиты градиента CSS. Однако в настоящее время они работают только с переменными CSS, которые плохо поддерживаются в почтовых клиентах. 

 
 Из-за этого этот Стартер вместо этого использует плагин  tailwindcss-gradient . 

 
 Начало работы 

 
 Установите Maizzle CLI: 

 
  установка npm -g @ maizzle / cli
  
 Создайте новый проект на основе этого примера:
  maizzle new maizzle / example-gradient && cd example-gradient
  
 Локальная разработка:
 Сборка к производству:
 Документация 
 Прочтите руководство: https: // maizzle.com / руководства / css-background-gradient-html-emails /
 Документация
 Maizzle доступна по адресу https://maizzle.com
 30 красивых цветовых градиентов для вашего следующего дизайн-проекта 
 Ищете классные фоновые градиенты для вашего пользовательского интерфейса? Компания по разработке программного обеспечения и дизайна Itmeo создала полезный онлайн-инструмент под названием WebGradients — бесплатную коллекцию из 180 линейных градиентов, которые вы можете использовать в качестве фона контента в любой части вашего веб-сайта.
 Вы можете загрузить версию каждого градиента в формате .PNG и скопировать кроссбраузерные коды CSS3.Также доступны пакеты Sketch и Photoshop. Вот некоторые из наших фаворитов из коллекции.
 1. Теплое пламя 
# ff9a9e → # fad0c4
 2. Сочный персик 
# ffecd2 → # fcb69f
 3. Леди Губы 
# ff9a9e → #fecfef
 4. Зимняя Нева 
# a1c4fd → # c2e9fb
 5. Сильный дождь 
# cfd9df → # e2ebf0
 6. Облачно, Ноксвилл 
#fdfbfb → #ebedee
 7. Санкт-Петербург 
# f5f7fa → # c3cfe2
 8.Тарелка сливы 
# 667eea → # 764ba2
 9. Вечное небо 
#fdfcfb → # e2d1c3
 10. Хэппи Фишер 
# 89f7fe → # 66a6ff
 11. Летай высоко 
# 48c6ef → # 6f86d6
 12. Сильное блаженство 
Несколько цветов
 13. Свежее молоко 
# feada6 → # f5efef
 14. Большой Кит 
# a3bded → # 6991c7
 15. Aqua Splash 
# 13547a → # 80d0c7
 16.Чистое зеркало 
# 93a5cf → # e4efe9
 17. Темный премиум 
# 434343 → # 000000
 18. Озеро Кочити 
# 93a5cf → # e4efe9
 19. Страстная кровать 
# ff758c → # ff7eb3
 20. Маунтин-Рок 
# 868f96 → # 596164
 21. Пустынный горб 
# c79081 → # dfa579
 22. Вечная Констанция 
# 09203f → # 537895
 23. Здоровая вода 
# 96деда → # 50c9c3
 24.Жестокая стойка 
# 29323c → # 485563
 25. Нега 
# ee9ca7 → # ffdde1
 26. Ночное небо 
# 1e3c72 → # 2a5298
 27. Бережный уход 
# ffc3a0 → #ffafbd
 28. Angel Care 
Несколько цветов
 29. Утренний салат 
# B7F8DB → # 50A7C2
 30. Глубокий рельеф 
Несколько цветов
 ПОДРОБНЕЕ…
 Как использовать градиенты 
 Если вы не застряли в 90-х, градиенты лучше использовать умеренно.
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *