Blueprint фон с помощью градиентов CSS
Разбираемся как используя одни лишь линейные и радиальные градиенты CSS создать клечатый синий паттерн, похожий на светокопировальную бумагу аля Blueprint paper.
Сегодня мы снова познаем силу великого и могучего CSS 3! Используя один лишь div блок и ни единого изображения, мы с вами сделаем фон в стиле светокопировального листа бумаги или blueprint paper. Для начала давайте разберёмся, что такое светокопировальная бумага и где она применялась, а так же где её можно применить в вебе.
Светокопировальная бумага — что это?
Светокопировальная бумага покрыта с одной из сторон очень тонким слоем светочувствительного вещества. Активно использовалась в 20 веке для копирования в светокопировальных аппаратах. Найти blueprint paper в виде форматной бумаги практически невозможно — она поставляется исключительно в рулонах.
Со времени изобретения светокопировальной бумаги в 1861 году она притерпела множество изменений.
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
Follow @samgozman
12 примеров CSS linear-gradient
Коллекция отобранных бесплатных HTML и CSS linear-gradient примеров кода из Codepen и других ресурсов.
О коде
Линейный градиент CSS Тень влево/вправо Динамический
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Линейный градиент границы + радиус границы
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Загрузка скелета с использованием всего нескольких строк CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Анимация линейного градиента
Анимация linear-gradient с использованием переменных CSS и JavaScript.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Предварительный просмотр коллекции градиентов
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Линейный наклон градиента CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: bootstrap.css
О коде
Парикмахерская палка Pure CSS
Парикмахерская палка Pure CSS с использованием linear-gradient .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
повторяющееся линейное градиентное фоновое изображение
Совместимые браузеры: Chrome, Edge, Firefox, Opera, SafariОтвет: да
Зависимости: —
О коде
Только линейный градиент Солнечные лучи
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Анимированный шаблон текста-тени
Использует background-clip: text и linear-gradient для имитации полосатой тени текста.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Шаблон линейного градиента CSS3
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Столбцы с линейным градиентом
Используется фон : линейный градиент для создания узора столбцов.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Одноэлементный логотип Apple радужного цвета
CSS linear-gradient , :before , :after псевдоэлементов и box-shadow трюков.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
Лучшие генераторы градиентов CSS для дизайнеров
Мы рассмотрим десять лучших генераторов градиентов CSS, которые можно использовать для создания различных стилей градиента (и прямого вывода CSS!).
Кодирование градиента вручную не доставляет удовольствия (особенно после того, как вы преодолеете простой двухцветный градиент), поэтому эти инструменты обязательно должны быть в вашей папке закладок.
Одним из самых модных элементов веб-дизайна является использование градиентного фона или цветового наложения. Двухцветный линейный градиент — самая популярная вариация этого тренда. И хотя градиенты могут выглядят причудливо и сложно, на самом деле их довольно легко создавать и развертывать… если вы используете правильный инструмент!
Более 2 миллионов цифровых активов с неограниченным количеством загрузок
Получите неограниченную загрузку более 2 миллионов дизайнерских ресурсов, тем, шаблонов, фотографий, графики и многого другого. Envato Elements начинается с 16 долларов в месяц и является лучшей творческой подпиской, которую мы когда-либо видели.
Графические шаблоны
Логотипы, печать и макеты
Графика
Иконки, векторы и многое другое
Шаблоны презентаций
PowerPoint и Keynote
Шрифты
Без засечек, рукописный шрифт и многое другое
Веб-шаблоны
Целевые страницы и электронная почта
Шаблоны CMS
Shopify, Tumblr и многое другое
Исследуйте элементы Envato
CoolHue — впечатляющая коллекция готовых комбинаций градиентов.
От розового и оранжевого до синего и зеленого, есть все: от градиентов с поразительным контрастом до мягких изменений.
Хотя у вас нет большого контроля над настройкой параметров с помощью CoolHue, вы сразу узнаете, подходит ли вам одна из цветовых комбинаций, потому что все параметры прямо на экране.
И одним щелчком мыши вы можете скопировать CSS. (Вот и все. Серьезно!) Если вы хотите скачать, каждый файл также доступен в формате PNG.
CSS Gradient имеет множество переключателей и числовых параметров, так что вы можете выбрать до трех цветов и создать собственный градиент CSS.
Переключатели просты в использовании, и даже человек с небольшим опытом работы с цветом может понять, как создать удобный градиент. Кроме того, есть несколько начальных градиентов в нескольких разных стилях для вдохновения.
Одной из лучших особенностей этого инструмента может быть высокий уровень контроля над каждой деталью создаваемого вами градиента. Код генерируется ниже на экране, чтобы вы могли видеть все это во время работы.
Для каждого градиента можно одним щелчком скопировать CSS или загружаемый файл jpg.
UI Gradients — полноэкранный генератор градиентов. Преимущество просмотра цветовых вариаций в полном размере заключается в том, что вы действительно можете визуализировать, как они будут выглядеть в реальных дизайнерских проектах.
UI Gradients включает в себя множество готовых вариантов градиента. Просмотрите коллекцию или выполните поиск по цвету. Диапазон выбора от двух до трех цветов с линейными узорами.
Не нравится то, что ты видишь? Пользователи также могут добавить сведения о градиенте в файл градиентов.json в репозитории проекта и отправить запрос на включение.
CSSmatic — это простой генератор градиентов с удобными кнопками, которые помогут вам настроить выбор цвета, остановки и поворот. Пользователи могут создавать линейные или радиальные градиенты.
Начните с одного из простых пресетов — здесь есть несколько хороших монохромных вариантов — и настраивайте, пока не получите нужный градиент.
Затем скопируйте код, и вы готовы к работе.
Ultimate CSS Gradient Generator очень похож на CSSmatic, и экранные функции аналогичны, но он также имеет некоторые другие функции.
Инструмент включает в себя таблицу совместимости браузера, несколько цветовых форматов, возможность импорта градиентного изображения и более 135 пользовательских пресетов. Пользователи также могут импортировать градиенты из существующего CSS и вносить коррективы. (Это может быть отличным вариантом для настройки градиента на вашем сайте, который выглядит не совсем так, как вы хотите.)
Каждый градиент CSS поставляется с уникальным URL-адресом, которым вы можете поделиться с членами команды, когда работаете с вариантами цвета.
ColorSpace — еще один инструмент полноэкранного градиента с визуальным веб-сайтом.
Он прост в использовании. Выберите ориентацию (линейную или радиальную) для вашего градиента, добавьте два цвета с помощью кнопок и палитры цветов, затем нажмите «Создать».
Хотя этот инструмент все еще находится в стадии бета-тестирования, он работает хорошо. И код находится прямо на экране, чтобы вы могли копировать его в проекты. Все, что вам нужно, от изображения градиента до CSS, находится прямо на экране. И если вам не нравится выбранный вами цвет, его легко изменить и снова нажать «Создать».
Генератор градиентов CSSсоздает код, используя простой графический интерфейс пользователя. CSS будет работать во всех браузерах, поддерживающих CSS3.
Генератор позволяет создавать линейные и радиальные градиенты, а также имеет возможность импортировать существующий код градиента CSS для редактирования. Он также поставляется с несколькими предустановками, чтобы ускорить визуализацию градиента.
CSS3 Factory — это простой инструмент, который работает лучше всего, если вы знаете, какие цвета вы хотите использовать для градиента CSS.
Эта опция без наворотов позволяет вам вводить варианты цветов, задавать направление для цветов и копировать код.
Есть небольшое окно предварительного просмотра, чтобы увидеть, как будут выглядеть градиенты, но этот инструмент не содержит предустановок.
CSS-Gradient — это генератор плюс учебник по градиенту «все в одном».
Инструмент включает в себя поля для выбора двух вариантов цвета в шестнадцатеричном формате или RGB, направленного и линейного или радиального вариантов. (Поэтому этот инструмент, вероятно, лучше всего подходит, если у вас есть представление о том, какие цвета вы хотите использовать.)
Скопируйте код и примените его к своему дизайну.
Но что замечательно в этом инструменте, так это то, что под прокруткой есть масса полезной информации для пользователей о градиентах, о том, как работают градиенты CSS, и о различиях между линейными и радиальными параметрами. Все эти ресурсы особенно хороши для начинающих.
GradientGenerator — отличный инструмент для вдохновения в создании градиентов. Начните с одного из предустановленных — существует множество различных вариантов на выбор — а затем добавьте свои собственные настройки для создания уникального градиента.
Этот инструмент содержит множество настроек и даже включает простые, расширенные и экспертные настройки, которые можно выбрать в зависимости от вашего уровня навыков и способности сочетать цвета.
Вы можете нажать, чтобы скопировать CSS, загрузить PNG, получить QR-код для тестирования на мобильном устройстве или создать ссылку для общего доступа. Этот инструмент также имеет другие довольно продвинутые параметры конфигурации, с которыми вы можете поиграть, включая тип сгенерированного кода.
Заключение
Одним из самых больших преимуществ использования генератора градиентов CSS является то, что большинство этих инструментов показывают, как градиент будет выглядеть на экране, при создании соответствующего кода. Вы можете визуально настроить цвета, перекрытия, направление, непрозрачность и многое другое прямо на экране.
Тогда все, что вам нужно сделать, это скопировать код и вставить его в свой файл CSS, чтобы начать. Генератор градиентов CSS — это быстрый и простой способ создать градиент веб-сайта, который вам понравится и которым легко пользоваться.