Градиент css онлайн: CSS Gradient генератор — создать градиент для веб сайта

Кроссбраузерный CSS-градиент

Возможность применения CSS-градиента была реализована Webkit несколько лет назад, но он редко использовалася из-за несовместимости с большинством браузеров. Но теперь Firefox, начиная с версии 3.6+, начал поддерживать градиент, и мы можем создавать градиент без обязательного использования изображения. Opera добавила поддержку CSS-градиента начиная с версии 11.10.

В этой статье мы покажем Вам, как создать CSS-градиент, который будет поддерживаться всеми основными браузерами: IE, Firefox 3.6+, Safari, Opera 11.10+ и Chrome.

В CSS3 градиенты бывают двух видов — линейные и радиальные. Рассмотрим сначала линейный градиент.

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

Для Webkit—браузеров:

Следующий код предназначен для webkit браузеров, таких как Safari, Chrome, и т.д. Он создаст линейный градиент, от верхней точки (#ccc) к основанию (#000).

background: -webkit-linear-gradient(left top, left bottom, #ccc, #000);   

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

Для Firefox 3.6+:

background: -moz-linear-gradient(top,  #ccc,  #000);  

Для Opera

Этот код будет работать в Опере начиная с версии 11.10.

background: -o-linear-gradient(top,  #ccc,  #000); /* Opera 11.10+ */

Для Internet Explorer

Градиент для IE 10+

background: -ms-linear-gradient(top,  #ccc,  #000); /* IE10+ */

Этот фильтр будет работать в старых версиях IE:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cccccc’, endColorstr=’#000000′);

Кроссбраузерный CSS-градиент:

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

background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform. Microsoft.gradient(startColorstr=’#cccccc’, endColorstr=’#000000′); /* для IE6-9 */
background: -webkit-linear-gradient(top, bottom, #ccc, #000); /* для webkit-браузеров */
background: -moz-linear-gradient(top,  #ccc,  #000); /* для firefox 3.6+ */
background: -o-linear-gradient(top,  #ccc,  #000); /* для Opera 11.10+ */
background: -ms-linear-gradient(top,  #ccc,  #000); /* для IE10+ */

Давайте рассмотрим подробнее синтаксис. Первое значение (point) является необязательным. Если значение не указано, то по умолчанию будет градиент будет идти от верха до низа. Вы можете использовать различные ключевые слова здесь. Это может быть одно ключевое слово или сочетание двух. Вы также можете использовать значения в градусах. Цель этого параметра заключается в определении, в каком направлении градиент будет распространяться. Кроме того, необходимо определить как минимум два цвета. Первый цвет будет в начале градиента, а последний цвет, соответственно, в конце. Здесь перечисленны возможные значения point:

• top
• right
• bottom
• left
• top left
• top right
• bottom left
• bottom right
• 0deg
• 11deg
• 67deg
• 182deg
• -45deg
• -90deg

Использование стоп-цвета

Цвета могут иметь необязательные stop значения. Если они не определены, то цвета переходят плавно от первого до последнего. Но вы можете использовать несколько цветов при создании градиента, и при этом вы можете изменять ширину каждого цвета устанавливая stop значения. Устанавливаемое значение может измеряться в любых допустимых CSS единицах (px, pt, em, % и т.д.). Эти значения помещается после цвета. Также вы можете использовать любые допустимые CSS-цвета, такие как ключевые слова (red, yellow, blue), или hex, hsl, rgb или rgba значения.

background-image: linear-gradient(top, yellow 10px, red 80px);
background-image: linear-gradient(top right, orange, green 30%, yellow 70%);
background-image: linear-gradient(60deg, red, white, blue 50%);

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

Радиальный градиент распространяется от точки в центре по окружности.

background: radial-gradient(
позиция или угол, форма или размер, от-стоп, стоп-цвет, до-стоп
);  

Синтаксис похож на линейный градиент, то тут еще добавилась форма и размер. Форма бывает двух видов — ellipse и circle, по умолчанию значение: ellipse. Значение размера может принимать одно из шести значений.

• closest-side — Ближайшая сторона. Градиент распространяется от центра по направлению к ближайшей стороне элемента (для circle), или к обоим, горизонтальной и вертикальной сторонам (для ellipse).
• closest-corner — Ближайший угол. Размер градиента таков, что он распространяется от центра к ближайшему углу элемента.
• farthest-side — Самая дальняя сторона. Градиент распространяется от центра по направлению к наиболее удаленной стороне элемента (для circle), или к обоим, горизонтальной и вертикальной, сторонам (для ellipse).
• farthest-corner — Самый дальний угол. Размер градиента таков, что он распространяется от центра к самому дальнему углу элемента.
• contain — тоже что и closest-side.
• cover — тоже что и farthest-corner.

background: radial-gradient(circle farthest-side,#000,#FFF,#000);

Онлайн-примеры

Дополнительная информация.

CSS-градиент для выпадающего меню:

Ниже представлено, как пример, выпадающее меню, которое использует только CSS3:  CSS-градиент, text-shadow, radius-border и box-shadow (никакого Javascript или изображений).

Ограничения Internet Explorer:

Фильтр градиента для Internet Explorer не поддерживает сolor-stop, gradient angle и radial gradient. Это означает, что Вы можете только определить горизонтальный или вертикальный линейный градиент с 2 цветами: StartColorStr и EndColorStr.

Полезные ссылки по теме:

Ultimate CSS Gradient Generator

CSS3 Gradient Generator

Заключение.

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

Перевод

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

Онлайн сервисы для графического и веб-дизайна

	Чеклист основных показателей SEO сайта с точки зрения зарубежных поисковых систем. Советы и рекомендации Проверить сайт
	Просмотр сайта на различных устройствах Перейти
	Генератор шестиугольника на CSS Перейти
	Генератор цветовых схем для Bootstrap на основе загруженного изображения Перейти
	Генератор аватарок. Перейти
	Скин браузера для подачи дизайна макетов веб-сайта. Попробовать
	Удобный конвертор шрифтов в форматы font-face, eot, svg, ttf, woff,woff2 и др. Перейти
	Оптимизация jpg изображений для web Перейти
	Отличный сервис для прототипирования Попробовать
	Полезный сервис для проверки разметки контента для расшаривания в соц.сетях. Проверить сайт
	Сервис проверки скорости загрузки сайта. Дает рекомендации по оптимизации. Проверить скорость загрузки сайта
	Отличный генератор паролей. Перейти
	Сервис для создания сетки сайта. Задаем количество колонок и расстояние между ними, результат в PNG. Создать сетку для сайта
	Продвинутый генератор градиента для оформления от ColorZilla. Удобно как в Photoshop. На выходе CSS. Создать градиент на CSS
	CloudConvert — Облачный конвертор «всего во все», как написано на главной странице. Поддержка более 190 форматов файлов. Конвертор файлов онлайн
	Создание кнопок для сайтов и интерфейсов на CSS3 Классная кнопка для сайта на CSS
	Необычный подбор цветов онлайн. Подобрать цвета
	Создание ленточек на чистом CSS3 Создать ленточку для сайта
	Быстрое создание схематичного наброска для объяснения идеи, когда нет времени устанавливать графический софт. Рисуем и отправляем ссылку. Попробовать что-нибудь набросать
	Отличный сервис по созданию спич-баблов (speech bubble) на CSS3. Помогает красиво оформить комментарии или отзывы. Оформить комментарии
	Макеты сетки для веб-дизайна в формате .psd Скачать
	Сервис для быстрого создания майнд-карт (mind-map). Удобен, когда необходимо быстро структурировать информацию, особенно полезен при планировании сложного меню для сайта. Создать интеллект-карту
	Font Awesome — это шрифт, полностью состоящий из векторных(!) иконок, который позволяет использовать на сайте множество своих объектов, которые могут быть настроены при помощи CSS. Очень просто и удобно! Подключить на сайт шрифт Font Awesome
	Сервис онлайн проверки сайта на наличие вредоносного кода. Выдает подробный отчет о наличии уязвимостей и информацию о том, занесен ли сайт в «блэк листы» поисковых систем. Проверить сайт на вирусы
	Онлайн-сканер Dr.Web Позволяет проверить сайт по url. Проверить сайт на вирусы при помощи Dr. Web
	Удобный онлайн просмоторщик всех шрифтов, установленных на локальном компьютере. Пишите интересующий текст в окошке и просматриваете, как он будет выглядеть всеми шрифтами, установленными в вашей системе. Очень круто. Online просмоторщмк шрифтов
	Многоформатный онлайн конвертер различных типов файлов. Конвертирует множество типов медиафайлов из одного формата в другой — видеофайлы, изображения, документы, архивы. Попробовать конвертировать файлы
	Сервис позволяет быстро нарисовать или создать favicon для сайта. Приступить к созданию favicon
	Быстрый и бесплатный конвертер HTML в PDF. Достаточно ввести адрес сайта, конвертировать и скачать готовый pdf-файл. Сохранить веб-страницу в pdf
	Распознавание текста с изображений. Онлайн аналог сканирующего устройства. Загрузив изображение, на котором содержится текст, получим распознанный фрагмент, который можно сохранить в один из форматов — txt, doc, pdf. Требуется регистрация. Сканировать и распознать картинку
	Быстрое создание Гугл-карт. Вводим местоположение, ставим флажок, настраиваем масштаб отображение, копируем фрагмент кода на свой сайт. Установить Google map на сайт
	Онлайн редактор эффектов CSS3. Позволяет наглядно создать различные блоки, анимацию, градиенты с использованием CSS3. Результат генерируется автоматически. Использовать онлайн редактор CSS3
	Полезный онлайн инструмент, позволяет просмотреть сайт на различных устройствах с различным разрешением — от мониторов до телефонов. Полезен при тестировании адаптивного дизайна. Проверить дизайн сайта на адаптивность
	Отличный сервис, выручал много раз. Конвертирует файлы формата Corel DRAW в формат Adobe Illustrator. Ссылка на скачивание файла приходит на почту. Конвертировать cdr в ai
	Сервис для быстрой отправки файлов размером до 50 ГБ. без регистрации. Один из лучших. Отправить файл онлайн
	Таблица специальных символов. Выбираем символ, копируем код. Наглядно, быстро, удобно. Вставить специальный символ на сайт
	Инструмент позволяет быстро обрезать изображение или вырезать нужный фрагмент и скачать результат. Обрезать фотографию
	Быстрое создание QR-кода Создать QR-код

WebGradients — Онлайн библиотека из 180+ линейных градиентов в CSS

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

WebGradients предлагает бесплатную библиотеку градиентов, которые вы можете просматривать и находить интересные идеи. Они абсолютно бесплатны и включают в себя исходный код CSS3 вместе с PNG.

Читайте также: Colors. css предлагает новые настройки по умолчанию для цветов в Интернете

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

Вы можете загрузить полный пакет градиента прямо из GitHub в виде необработанных CSS-кодов внутри файла таблицы стилей. Или вы можете загрузить градиенты в виде необработанных файлов PNG, файла Sketch или PSD для Photoshop.

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

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

Кроме того, вы найдете кнопку загрузки в правом верхнем углу вместе со ссылкой, чтобы скопировать CSS прямо в буфер обмена.
Оба файла PSD и Sketch связаны в навигационной панели, где они размещены на Gumroad.

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

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

CSS градиенты для веб дизайна. Подборка сервисов

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

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

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

И так, поехали!

WebGradients

Перейти на сайт

На WebGradients вы найдете целую коллекцию готовых градиентов разных цветов и стилей.

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

Если вы обратите внимание на верхнюю навигацию сайта, то там вы найдете ссылки для загрузки этих градиентов как в PSD, так и в файле Sketch.

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

uiGradients

Перейти на сайт

Обратите внимание на библиотеку uiGradients для создания интересных вариантов css градиентов.

В верхней навигации (слева) вы увидите кнопку с надписью «Show all gradients» (показать все градиенты). Нажмите на нее, чтобы просмотреть огромный список различных стилей градиента. Серьезно, их там очень много.

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

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

Перейти на сайт

Итак, градиентная анимация. Сервис Gradient Animator — идеальный способ воплотить это в реальность. Все может работать прямо через CSS3 без необходимости использовать JavaScript.

На боковой панели нажмите «Add colour» (добавить цвет) и выберите поочередно два цвета вашего градиента. Измените скорость перехода, измените направление, затем нажмите «Preview»(предварительный просмотр).

Уверена, что вы оцените преимущество этого онлайн сервиса.

Редактор градиента Colorzilla

Перейти на сайт

Каждый веб-дизайнер должен знать о редакторе градиента Colorzilla.

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

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

ColorSpace градиенты

Перейти на сайт

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

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

На Colorzilla вы можете составить градиент из нескольких цветов. Но это не означает, что ColorSpace хуже. Это значит, что его лучше всего использовать для простых градиентов.

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

Перейти на сайт

Да, это именно то, на что похоже. Бесконечный градиент.

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

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

К сервису прилагается подробная инструкция, находится она здесь.

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

Перейти на сайт

И напоследок, кнопочки.

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

Библиотека проста в использовании и имеет множество градиентов на выбор.

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

Заключение

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

Стоит ли мне продолжать выкладывать подобные подборки?

Не забудьте добавить сайт в закладки. Здесь будет много всего полезного для веб-дизайнеров и фрилансеров.

Нашли ошибку? Выделите фрагмент текста и нажмите CTRL+ENTER

6 лучших генераторов CSS-кода

Как начинающие, так и опытные верстальщики не могли не заметить, что вместе с новыми возможностями в CSS3 технологиях, объем самого css-кода, существенно увеличился. Только не подумайте, что я против развития и прогресса в веб-разработке и жалуюсь на то, что дескать приходится больше писать кода.

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

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

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

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

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

1.CSS3 Playground

CSS3 Playground — универсальный генератор CSS3 кода с широким диапазоном свойств.На скриншоте видно, как я используя ползунки CSS генератора, создал серый текстовый блок с закругленными углами и градиентом, а ниже вы видите сгенерированный код. Только посмотрите, сколько строчек кода вам пришлось бы написать вручную. Это фантастика! Пусть вас не беспокоит, что выбор в генераторе цвета и названий шрифтов ограничен. Просто выбираете близкие к вашему макету цвета и шрифты, а потом меняете их на нужные в вашем css-файле стилей.

2.CSS Button Generator

CSS Button Generator – генератор CSS3 кнопок. На левой стороне выбираем стиль кнопки, на правой подбираем параметры для формирования кнопки, посередине видим результат. Полученный CSS3-код копируем в свой проект.

3.Ultimate CSS Gradient Generator

Создать градиент посредством CSS3-кода не так просто. К счастью существует отличный инструмент — генератор градиента. CSS Gradient Generator имеет интерфейс как у Photoshop, создает кросс-браузерный код с учетом браузера IE.

4.CSS3 Menu Generator

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

5.WAIT! Animate

Теперь можно создавать анимацию без написания кода JavaScript, а работать лишь c CSS3. Для того есть специальный сервис – генератор анимации, где можно создать анимацию, настраивая нужные значения параметров и получить готовый css-код, который можно уже применить к своим объектам.

6.Flexbox Generator

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

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

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

• 
  Создано 16.11.2017 11:00:00

• 
  
  Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

16 лучших генераторов CSS-кода для разработчиков

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

Мы, в свою очередь, решили избавить вас от необходимости поиска, и подготовили подборку из 16 лучших генераторов CSS-кода, которые точно помогут вам.

Эти инструменты абсолютно бесплатны, и включают в себя множество функций, которые понадобятся в процессе работы над проектами.

Atomizer – инструмент для создания Atomic CSS-кода. Теперь у вас будет возможность динамически создавать и модифицировать стили Atomic при помощи классов, которые уже используются в вашем проекте. А также предварительно устанавливать стили в конфигурации. Atomizer не создает лишнего CSS-кода и отлично интегрируется с другими инструментами.
CSS Specificity Graph Generator позволяет без труда создавать графы для стилей, которые при этом будут грамотно структурированы. Здесь используется CSS-парсер d3, с помощью которого можно без особых усилий создавать интерактивные визуализации.
Представляет собой набор универсальных CSS-инструментов для веб-дизайнеров. В нем представлено четыре удобных средства. Вы можете воспользоваться CSS градиент генератором, который поддерживает несколько цветов и несколько точек изменения уровня плотности. Используя инструмент создания градиента, можно получить градиенты с плавными переходами цвета.
Flexy Boxes – это генератор кода flexbox и песочница в одном. Просто укажите параметры для flexbox и затем получите готовый код.
CSS Sprite Generator поможет объединить все фоновые изображения сайта в одно. Можно использовать CSS-свойства для отображения конкретных фрагментов этого изображения. Такой подход позволит сократить количество HTTP-запросов к серверу.
Penthouse представляет собой генератор шаблонов HTML CSS, который ускоряет процесс разработки веб-страниц. Инструмент позволяет проанализировать CSS-код и получить отчет о том, какие компоненты необходимы для загрузки страницы, которая будет видна при первичном посещении сайта.
Стандартная спецификация CSS-кода не позволяет останавливать анимацию, и повторно запускать ее. Конечно, есть свойство animation-delay, но оно отвечает лишь за первичный запуск анимации при загрузке страницы. В свою очередь WAIT! Animate предлагает очень простой способ подсчитать процентное соотношение ключевых кадров, которые затем можно добавить в анимацию.
Color CSS Gradient Background Generator позволяет без труда создавать сложные фоновые градиенты при помощи CSS. Теперь можно забыть о простых градиентах, и вместо них использовать более сложные!
EnjoyCSS представляет собой продвинутый онлайн CSS генератор. Удобный и простой в использовании интерфейс инструмента дает возможность создавать комплексные графические стили без необходимости работы с кодом. Теперь у вас есть возможность поэкспериментировать с EnjoyCSS, комбинируя между собой все существующие CSS3-стили. Также инструмент позволяет использовать псевдоклассы (:hover, :active, :focus, :after, :before) и добавлять к ним стилизацию. Весь необходимый CSS-код автоматически генерируется EnjoyCSS.
CSS Rationcinator – инструмент, который автоматически производит рефакторинг CSS-кода и генерирует новые таблицы стилей для сайта. Он анализирует DOM-элементы сайта в браузере и позволяет получить более оптимизированную стилизацию.
CSS3 Keyframes Animation Generator представляет собой онлайн-инструмент, который позволяет создавать CSS3-анимацию с ключевыми кадрами.
Бесплатный генератор CSS шаблонов с полноценным визуальным редактором. Все делается исключительно при помощи браузера, так что вам остается лишь обзавестись стабильным подключением к интернету.
Bulletproof Email Buttons Generator поможет в разработке привлекательных кнопок за счет использования продвинутого VML и кода CSS. Вы сможете изменять фоновый текст, изображения, цвет фона, ширину и цвет границ, а также многое другое. Кроме этого инструмент позволяет без труда создавать фоновые изображения для email-рассылок.
Этот генератор таблиц CSS умеет создавать красивые шаблоны для форм. Он также пригодится при создании таблиц. Инструмент генерирует весь необходимый CSS-код, который позволит стилизовать любые формы.
Racket представляет собой Yeoman-генератор для универсальных и изоморфных веб-приложений. Он позволяет выбирать технологии и инструменты по желанию, а затем предлагает выбрать наиболее подходящую структуру.
How to Center in CSS облегчает процесс создания кода для центрирования контента в соответствии с используемыми параметрами.

Данная публикация является переводом статьи «16 Best CSS Code Generators for Developers» , подготовленная редакцией проекта.

10 онлайн-инструментов для работы с цветом

Работа с цветом является не простой и достаточно трудоемкой задачей. Нужно продумать детали и правильно выбрать для них палитру. Иногда это может занять достаточно много времени. Чтобы упростить этот этап работы и сделать жизнь дизайнера немного проще сегодня в Интернете доступно множество онлайн-инструментов. Давайте рассмотрим некоторые из них.

Инструменты выбора палитры цветов

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

ColourLovers 

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

Kuler

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

Pictalulous

Pictaculous — инструмент, который позволяет вам создавать палитру из загруженного изображения.  Также он совместим с двумя вышеперечисленными инструментами Kuler и Colourlovers.

 Инструменты выбора цвета

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

color.hailpixel.com

color.hailpixel – это один из простейших способов подобрать цвет. Палитра цветов растягивается на весь экран, и вы сможете выбрать цвет, просто перемещая курсор мыши по экрану.

Hexu.al

Возможно, вам надоело работать с шестнадцатеричными названиями цветов, надоели все эти сложные для запоминания цифры. Hexu.al дает шанс поработать с более интересными названиями, например,  #doodle или #goofed.

CSS Color Names

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

checkmycolours.com

Check My Colours – это бесплатное веб-приложение для проведения анализа цветовых контрастов, используемых на страницах.

Инструменты теории цвета

Sphere

Визуализатор теории цвета под названием Sphere  — ресурс с простым интерфейсом для выбора оттенков на цветовом круге.

Color Scheme Designer

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

Генераторы цвета CSS

Ultimate CSS Gradient Generator

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

Hex 2 RGBA Color Calculator

Конвертировать цвет hex в  RGB, конечно, не сложно. Но для этого нужно делать три клака для копирования значения.  Hex 2 RGBA Color Calculator поможет вам это сделать всего лишь за один клик.

0to255

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

Color Hexa

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

Автор: Chris Spooner

Перевод — Дежурка

Смотрите также:

Использование градиентов CSS — CSS: каскадные таблицы стилей

CSS-градиенты представлены типом данных , специальным типом , состоящим из постепенного перехода между двумя или более цветами. Вы можете выбрать один из трех типов градиентов: линейный (созданный с помощью функции linear-gradient () ), радиальный (созданный с помощью radial-gradient () ) и конический (созданный с помощью функция conic-gradient () ).Вы также можете создавать повторяющиеся градиенты с помощью функций repeat-linear-gradient () , repeat-radial-gradient () и repeat-conic-gradient () .

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

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

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

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

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

  .simple-linear {
  фон: линейно-градиентный (синий, розовый);
}  

Изменение направления

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

  .horizontal-gradient {
  фон: линейно-градиентный (вправо, синий, розовый);
}
  

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

Можно даже сделать градиент по диагонали, от угла к углу.

 .diagonal-gradient {
  фон: линейно-градиентный (справа внизу, синий, розовый);
}
  

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

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

  .angled-gradient {
  фон: линейно-градиентный (70град, синий, розовый);
}
  

При использовании угла 0deg создает вертикальный градиент снизу вверх, 90deg создает горизонтальный градиент слева направо и так далее по часовой стрелке.Отрицательные углы идут против часовой стрелки.

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

Использование более двух цветов

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

  .auto-spaced-linear-gradient {
  фон: линейно-градиентный (красный, желтый, синий, оранжевый);
}
  

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

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

 . Многоцветно-линейный {
   фон: linear-gradient (слева, салатовый 28px, красный 77%, голубой);
}
  

Создание жестких линий

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

  .striped {
   фон: линейный градиент (слева внизу, голубой 50%, бледно-золотой 50%);
}  

Градиентные подсказки

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

  .color-hint {
  фон: линейно-градиентный (синий, 10%, розовый);
}
.simple-linear {
  фон: линейно-градиентный (синий, розовый);
}  

Создание цветных полос и полос

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

  .multiposition-stop {
   фон: linear-gradient (слева,
       лайм 20%, красный 30%, красный 45%, голубой 55%, голубой 70%, желтый 80%);
   фон: linear-gradient (слева,
       лайм 20%, красный 30% 45%, голубой 55% 70%, желтый 80%);
}
.multiposition-stop2 {
   фон: linear-gradient (слева,
      лайм 25%, красный 25%, красный 50%, голубой 50%, голубой 75%, желтый 75%);
   фон: linear-gradient (слева,
      лайм 25%, красный 25% 50%, голубой 50% 75%, желтый 75%);
}
  

В первом примере, приведенном выше, лайм переходит от отметки 0%, которая подразумевается, к отметке 20%, переходит от лайма к красному в течение следующих 10% ширины градиента, достигает сплошного красного цвета на 30%. отметка и остается сплошным красным до 45% градиента, где он исчезает до голубого, становится полностью голубым для 15% градиента и т. д.

Во втором примере вторая граница цвета для каждого цвета находится в том же месте, что и первая граница цвета для соседнего цвета, создавая эффект полос.

В обоих примерах градиент записывается дважды: первый — это метод CSS изображений уровня 3 для повторения цвета для каждой остановки, а второй пример — это метод множественной остановки цвета изображений CSS уровня 4, включающий в себя два значения длины цветовой остановки в объявление linear-color-stop.

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

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

  .colorhint-gradient {
  фон: линейно-градиентный (вверх, черный, 20%, голубой);
}
.regular-progression {
  фон: линейно-градиентный (вверх, черный, голубой);
}
  

Наложение градиентов

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

  .layered-image {
  фон: линейно-градиентный (вправо, прозрачный, туманная роза),
      URL ("https://mdn.mozillademos.org/files/15525/critters.png");
}
  

Составные градиенты

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

  .stacked-linear {
  задний план:
      линейный градиент (217deg, rgba (255,0,0 ,. 8), ргба (255,0,0,0) 70,71%),
      линейный градиент (127deg, rgba (0,255,0, 0,8), rgba (0,255,0,0) 70,71%),
      линейный градиент (336deg, rgba (0,0,255, 0,8), rgba (0,0,255,0) 70,71%);
}
  

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

Базовый радиальный градиент

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

  .просто-радиальный {
  фон: радиально-градиентный (красный, синий);
}
  

Размещение радиальных ограничителей цвета

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

  .radial-gradient {
  фон: радиальный градиент (красный 10px, желтый 30%, # 1e90ff 50%);
}
  

Позиционирование центра градиента

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

  .radial-gradient {
  фон: радиальный градиент (при 0% 30%, красный 10 пикселей, желтый 30%, # 1e90ff 50%);
}
  

Размер радиальных градиентов

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

Пример: ближайшая сторона для эллипсов

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

  .radial-ellipse-side {
  фон: радиальный градиент (ближайшая сторона эллипса,
      красный, желтый 10%, # 1e90ff 50%, бежевый);
}
  

Пример: самый дальний угол для эллипсов

Этот пример аналогичен предыдущему, за исключением того, что его размер указан как farthest-corner , который устанавливает размер градиента по расстоянию от начальной точки до самого дальнего угла охватывающей рамки от начальной точки.

  .radial-ellipse-far {
  фон: радиальный градиент (самый дальний угол эллипса на 90% 90%,
      красный, желтый 10%, # 1e90ff 50%, бежевый);
}
  

Пример: ближайшая сторона для окружностей

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

  .radial-circle-close {
  фон: радиальный градиент (круг с ближайшей стороны на 25% 75%,
      красный, желтый 10%, # 1e90ff 50%, бежевый);
}
  

Пример: длина или процент для эллипсов

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

  .radial-ellipse-size {
   фон: радиальный градиент (эллипс 50% 50 пикселей,
      красный, желтый 10%, # 1e90ff 50%, бежевый);
}
  

Пример: длина окружности

Для кругов размер может быть задан как <длина>, которая является размером круга.

  .radial-circle-size {
  фон: радиальный градиент (круг 50 пикселей,
      красный, желтый 10%, # 1e90ff 50%, бежевый);
}
  

Наборные радиальные градиенты

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

  .stacked-radial {
  задний план:
      радиальный градиент (круг на 50% 0,
        rgba (255,0,0, .5),
        ргба (255,0,0,0) 70,71%),
      радиальный градиент (круг на 6,7% 75%,
        rgba (0,0,255, .5),
        ргба (0,0,255,0) 70,71%),
      радиальный градиент (круг на 93,3% 75%,
        rgba (0,255,0, .5),
        rgba (0,255,0,0) 70,71%) бежевый;
  радиус границы: 50%;
}
  

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

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

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

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

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

 .простой конический {
  фон: конический градиент (красный, синий);
}
  

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

Как и радиальные градиенты, вы можете расположить центр конического градиента с ключевыми терминами, процентными или абсолютными длинами с ключевым словом «at».

  .conic-gradient {
  фон: конический градиент (при 0% 30%, красный 10%, желтый 30%, # 1e90ff 50%);
}
  

Изменение угла

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

  .conic-gradient {
  фон: конический градиент (от 45 градусов, красный, оранжевый 50%, желтый 85%, зеленый);
}
  

Функции linear-gradient () , radial-gradient () и conic-gradient () не поддерживают автоматически повторяющиеся остановки цвета.Тем не менее, функции repeat-linear-gradient () , repeat-radial-gradient () и repeat-conic-gradient () доступны, чтобы предложить эту функциональность.

Размер повторяющейся линии градиента или дуги — это длина между первым значением остановки цвета и значением длины последней границы цвета. Если первая контрольная точка цвета имеет только цвет и не имеет длины остановки цвета, значение по умолчанию равно 0. Если последняя контрольная точка цвета имеет только цвет и не имеет длины остановки цвета, значение по умолчанию равно 100%.Если ни один из них не объявлен, линия градиента составляет 100%, что означает, что линейный и конический градиенты не будут повторяться, а радиальный градиент будет повторяться только в том случае, если радиус градиента меньше, чем длина между центром градиента и самым дальним углом. Если объявлена ​​первая граница цвета и значение больше 0, градиент будет повторяться, так как размер линии или дуги — это разница между первой и последней границей цвета меньше 100% или 360 градусов.

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

В этом примере используется repeat-linear-gradient () для создания градиента, который многократно повторяется по прямой линии. Цвета снова чередуются по мере повторения градиента. В этом случае линия градиента имеет длину 10 пикселей.

 . Повторяюще-линейный {
  фон: повторяющийся линейный градиент (-45 градусов, красный, красный 5 пикселей, синий 5 пикселей, синий 10 пикселей);
}
  

Многократные повторяющиеся линейные градиенты

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

В этом случае линии градиента имеют длину 300 пикселей, 230 пикселей и 300 пикселей.

 . Многоповторно-линейный {
  задний план:
      повторяющийся линейный градиент (190deg, rgba (255, 0, 0, 0,5) 40 пикселей,
        rgba (255, 153, 0, 0,5) 80 пикселей, rgba (255, 255, 0, 0,5) 120 пикселей,
        rgba (0, 255, 0, 0,5) 160 пикселей, rgba (0, 0, 255, 0,5) 200 пикселей,
        rgba (75, 0, 130, 0,5) 240 пикселей, rgba (238, 130, 238, 0,5) 280 пикселей,
        rgba (255, 0, 0, 0. 5) 300 пикселей),
      повторяющийся линейный градиент (-190deg, rgba (255, 0, 0, 0.5) 30 пикселей,
        rgba (255, 153, 0, 0,5) 60 пикселей, rgba (255, 255, 0, 0,5) 90 пикселей,
        rgba (0, 255, 0, 0,5) 120 пикселей, rgba (0, 0, 255, 0,5) 150 пикселей,
        rgba (75, 0, 130, 0,5) 180 пикселей, rgba (238, 130, 238, 0,5) 210 пикселей,
        rgba (255, 0, 0, 0.5) 230 пикселей),
      повторяющийся линейный градиент (23 градуса, красный 50 пикселей, оранжевый 100 пикселей,
        желтый 150 пикселей, зеленый 200 пикселей, синий 250 пикселей,
        индиго 300 пикселей, фиолетовый 350 пикселей, красный 370 пикселей);
}
  

Плед градиент

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

  .plaid-gradient {
  задний план:
      повторяющийся линейный градиент (90 градусов, прозрачный, прозрачный 50 пикселей,
        rgba (255, 127, 0, 0,25) 50 пикселей, rgba (255, 127, 0, 0,25) 56 пикселей,
        прозрачный 56px, прозрачный 63px,
        rgba (255, 127, 0, 0,25) 63 пикселя, rgba (255, 127, 0, 0,25) 69 пикселей,
        прозрачный 69px, прозрачный 116px,
        rgba (255, 206, 0, 0. 25) 116 пикселей, rgba (255, 206, 0, 0,25) 166 пикселей),
      повторяющийся линейный градиент (0 градусов, прозрачный, прозрачный 50 пикселей,
        rgba (255, 127, 0, 0,25) 50 пикселей, rgba (255, 127, 0, 0,25) 56 пикселей,
        прозрачный 56px, прозрачный 63px,
        rgba (255, 127, 0, 0,25) 63 пикселя, rgba (255, 127, 0, 0,25) 69 пикселей,
        прозрачный 69px, прозрачный 116px,
        rgba (255, 206, 0, 0,25) 116 пикселей, rgba (255, 206, 0, 0,25) 166 пикселей),
      повторяющийся линейный градиент (-45 градусов, прозрачный, прозрачный 5 пикселей,
        rgba (143, 77, 63, 0.25) 5px, rgba (143, 77, 63, 0,25) 10px),
      повторяющийся линейный градиент (45 градусов, прозрачный, прозрачный 5 пикселей,
        rgba (143, 77, 63, 0,25) 5 пикселей, rgba (143, 77, 63, 0,25) 10 пикселей);

  задний план:
      повторяющийся линейный градиент (90 градусов, прозрачный 0 50 пикселей,
        rgba (255, 127, 0, 0,25) 50 пикселей 56 пикселей,
        прозрачный 56px 63px,
        rgba (255, 127, 0, 0,25) 63 пикс.  69 пикс.,
        прозрачный 69px 116px,
        rgba (255, 206, 0, 0,25) 116 пикселей 166 пикселей),
      повторяющийся линейный градиент (0 градусов, прозрачный 0 50 пикселей,
        rgba (255, 127, 0, 0.25) 50px 56px,
        прозрачный 56px 63px,
        rgba (255, 127, 0, 0,25) 63 пикс. 69 пикс.,
        прозрачный 69px 116px,
        rgba (255, 206, 0, 0,25) 116 пикселей 166 пикселей),
      повторяющийся линейный градиент (-45 градусов, прозрачный 0 5 пикселей,
        rgba (143, 77, 63, 0,25) 5 пикселей 10 пикселей),
      повторяющийся линейный градиент (45 градусов, прозрачный 0 5 пикселей,
        rgba (143, 77, 63, 0,25) 5 пикселей 10 пикселей);
}
  

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

В этом примере используется repeat-radial-gradient () для создания градиента, который многократно излучается из центральной точки.Цвета меняются снова и снова по мере повторения градиента.

 . Повторно-радиальный {
  фон: повторяющийся радиальный градиент (черный, черный 5 пикселей, белый 5 пикселей, белый 10 пикселей);
}
  

Многократные повторяющиеся радиальные градиенты

 .  Многоцелевые {
  задний план:
      повторяющийся радиальный градиент (эллипс на 80% 50%, rgba (0,0,0,0,5),
        rgba (0,0,0,0.5) 15 пикселей, rgba (255,255,255,0,5) 15 пикселей,
        rgba (255,255,255,0,5) 30px) слева вверху без повтора,
      повторяющийся радиальный градиент (эллипс при 20% 50%, rgba (0,0,0,0.5),
        rgba (0,0,0,0.5) 10 пикселей, rgba (255,255,255,0,5) 10 пикселей,
        rgba (255,255,255,0.5) 20px) верхний левый без повтора желтый;
  размер фона: 200 пикселей 200 пикселей, 150 пикселей 150 пикселей;
}
  

CSS Color Gradient Generator: красивые градиенты бесплатно

Что такое цветовой градиент?

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

Как создать хороший цветовой градиент CSS

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

Стили цветового градиента

Наш генератор фонового градиента CSS автоматически создает цветовой градиент на основе выбранного вами цвета. У нас есть разные стили градиентов. Стиль света создает цветовой градиент, который выглядит так, как будто он подсвечивается источником света. Идеально подходит для придания блеска вашим цветам. Deep style развивает эту концепцию и добавляет больше оттенков в цветовую гамму. Модель в стиле радуги идеально подходит для более светлых тонов, чтобы создать имитацию перламутра. А интенсивный стиль создает интенсивный, глубокий и богатый цветовой градиент.

Регулировка градиента цвета

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

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

Советы по дизайну цветового градиента

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

перейдите к руководству по цветовому градиенту

Генераторы CSS — Smashing Magazine

Об авторе

Ежедневно жонглируя тремя языками, Айрис известна своей любовью к лингвистике, искусству, веб-дизайну и типографике, а также своей золотой жилой…
Больше о
Ирис
↬

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

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

Генератор теней CSS

Ищете инструмент, который автоматически генерирует код CSS для действительно гладких многоуровневых теней ? Что ж, вам понравится SmoothShadow. Вдохновленный статьей, написанной Тобиасом Алином Бьерромом, этот отличный инструмент был создан, чтобы помочь любому сгенерировать нужный код на месте. Плагин

SmoothShadow Figma от Филиппа Брумма (превью в большом разрешении)

После того, как вы попробуете, будет трудно не использовать его. Этот небольшой инструмент позволяет визуально создавать слоистую гладкую тень блока, а также настраивать альфа-канал, смещение и размытие с помощью отдельных кривых плавности. И это становится еще лучше: создатель инструмента Филипп Брамм также выпустил SmoothShadow как плагин для Figma, так что вы можете оптимизировать свой рабочий процесс так, как вы всегда хотели.

CSS Border-Radius Generator

Когда мы думаем о border-radius , мы обычно думаем о нескольких простых значениях — возможно, 8 пикселей или 11 пикселей, а может быть, 16 пикселей. Однако border-radius может быть довольно необычным, а генератор fancy-border-radius позволяет легко их генерировать. Инструмент обеспечивает визуализацию не только простых круглых форм, но и органических форм с помощью комбинации восьми значений. По сути, мы создаем перекрывающиеся эллипсы, образующие окончательную форму.Инструмент также доступен как инструмент CLI, поэтому вы также можете запускать его локально.

Радиус границы органическая ячейка (превью в большом разрешении)

Генератор кривых Кубика-Безье

Иногда анимация просто не кажется правильной, не так ли? Возможно, длительность отключена или ослабление необычное, и на его выяснение может уйти довольно много времени. С помощью кубической кривой Безье от Lea Verou вы можете просматривать и сравнивать анимации , замедлять их и даже настраивать визуально. А затем скопируйте и вставьте фрагмент CSS, чтобы сразу подключить его к своему проекту.

Perfect Cubic-Bezier Curves (Large preview)

А если вам нужны базовые или сложные CSS-анимации @keyframe, Keyframes.app предоставляет визуальный редактор временной шкалы , аналогичный программному обеспечению для редактирования видео. Вы можете добавлять шаги, изменять размер и положение, применять преобразования и изменения цвета, а также заставлять CSS копировать и вставлять. Ах, и не забудьте также о панели анимации в Chrome и Firefox для отладки.

Сглаживание градиентов

При работе с градиентами мы часто полагаемся на линейные градиенты, переходя от одного цвета к другому.Однако у линейных градиентов есть резкие края в начале и в конце. Есть способ немного улучшить градиенты с помощью функций плавности. Поэтому Андреас Ларсен создал небольшой редактор Easing Gradients Editor, который позволяет нам создавать и предварительно просматривать градиенты замедления в CSS. Инструмент также доступен как плагин Sketch и плагин PostCSS. Вы можете использовать палитру цветов, но, к сожалению, пока не можете добавить фактическое значение цвета HEX.

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

Цветовые палитры визуализации данных

Иногда вам нужен особый тип цвета для очень конкретной задачи. Например, если вы работаете над проектом визуализации данных — например, круговые диаграммы, сгруппированные гистограммы, карты — вам, вероятно, понадобится серия цветов, которые находятся на визуально равноудаленных . Вот тогда палитра цветов данных LearnUI может стать очень полезной. В таких случаях лучше использовать диапазон оттенков , , чтобы пользователи могли быстрее определить различия.Действительно, желтый легче отличить от оранжевого , чем синий от синего, но на 15% светлее .

Доступная и яркая цветовая схема с использованием ряда оттенков для более быстрого выявления различий. (Большой предварительный просмотр)

С помощью этого инструмента вы выбираете, сколько цветов вам нужно и нужен ли вам светлый или темный цвет фона, а также выбираете, хотите ли вы использовать палитру по умолчанию, одну палитру оттенков или расходящуюся цветовую шкалу. Получив его, вы можете копировать шестнадцатеричные значения и экспортировать их как SVG для использования в Sketch, Figma или Adobe XD.

Проверка доступности заголовков и основного текста. (Большой превью)

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

От цветовых оттенков CSS к треугольникам и поддельным данным

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

От градиентов CSS к фальшивым данным (превью в большом разрешении)

Omatsuri означает festival на японском языке, а сайт представляет собой прекрасный небольшой фестиваль инструментов браузера с открытым кодом для повседневного использования. На сайте вы найдете генератор треугольников, генератор цветовых оттенков, генератор градиентов, разделители страниц, компрессор SVG, преобразователь SVG → JSX , генератор поддельных данных, курсоры CSS и коды событий клавиатуры.Спроектирован и построен Виталием Ртищевым и Владом Шиловым. Также доступен исходный код сайта.

Наложение CSS с генератором высокой контрастности

Если вы хотите, чтобы текст лучше выделялся на фоне фонового изображения, есть небольшая хитрость: вы можете использовать наложение CSS linear-gradient с определенной непрозрачностью поверх изображения, чтобы улучшить цветовой контраст. Spotify, например, использует эту технику.

Наложение линейного градиента CSS (большой предварительный просмотр)

Хотя для всего этого требуется всего одна строка кода, остается еще один вопрос, на который нужно ответить: как определить прозрачность для использования для наложения? Optimal Overlay Finder поможет вам узнать.Вы загружаете изображение, вводите текст и выбираете цвет наложения и текста, а инструмент показывает вам предварительный просмотр того, как наложение выглядит при применении к вашему изображению, а также оптимальную непрозрачность наложения. Маленькая деталь, имеющая большое значение.

Генератор цветовой палитры CSS

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

CSS Color Palette Generator для поиска нужных градиентов. (Большой превью)

Вы также можете создать палитру градиента между двумя цветами, а также создать и экспортировать свой собственный градиент в виде CSS. Инструмент доступен в виде приложения для iOS, надстройки Adobe и расширения Chrome.

Еще один генератор цвета, также доступный в виде приложения для iOS, надстройки Adobe и расширения Chrome. (Большой превью)

И если вам нужно что-то более сложное для градиентов в вашем наборе инструментов, CSSGradient. io — еще один инструмент для всех ваших потребностей в градиентах — будь то линейные или радиальные градиенты, цветовые оттенки или градиентный фон.

Также Gradient Generator генерирует от 1 до 40 ступенчатых градиентов из двух цветов по вашему выбору. Каждый градиент автоматически представлен в форматах HEX, HSL и RGB — все, что вам нужно сделать, это просто щелкнуть значение, и оно сразу же будет скопировано в буфер обмена.

Генератор цветовых градиентов CSS

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

Генератор цветовых градиентов (большой предварительный просмотр)

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

CSS Type Scale Generator

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

Замечательный маленький инструмент, который поможет вам создать типографский масштаб и экспортировать его в CSS. (Большой предварительный просмотр)

Инструмент предоставляет 8 предварительно определенных шкал гармоничного типа (но вы также можете определить собственную шкалу), от Major Third до Perfect Fifth, и генерировать последовательность размеров шрифта с определенным геометрическим коэффициентом приращения. Вы можете настроить такие параметры, как , высота строки, и вес тела, уточнить текст предварительного просмотра и получить сгенерированный CSS — или отредактировать его с помощью образца шрифта на CodePen.Вы также можете проверить старый добрый ModularScale.com Тима Брауна.

Модульная гамма с использованием аналогичных структур, таких как музыкальная гамма. (Большой превью)

Еще один прекрасный инструмент — калькулятор типографского масштаба от Жана-Лу Дезира, который, в отличие от инструментов Тима и Джереми, генерирует модульную шкалу, используя три определяющих свойства (начальный член, коэффициент приращения и количество размеров в гамма) аналогична музыкальной гамме. Результатом является более плавный размер для дизайнеров с несколькими дополнительными опциями для создания большего количества значений из -e.грамм. для небольших примечаний или больших цитат.

CSS Capsize Generator

Чтобы свести к минимуму дезориентацию и дорогостоящие сдвиги макета во время загрузки, нам нужно сопоставить резервный шрифт с веб-шрифтом. Средство сопоставления стилей шрифтов Моники Динкулеску позволяет нам минимизировать резкий сдвиг, сопоставляя резервный шрифт и предполагаемую высоту и ширину веб-шрифта, и мы могли бы использовать f-моды для того же самого с новыми свойствами CSS.

Небольшой инструмент, который регулирует размер шрифта, так что высота заглавных букв кратна вашей сетке.(Большой предварительный просмотр)

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

Генератор сложных селекторов CSS

Представьте, что вам нужно создать таблицу элементов. Возможно, вы захотите оставить их в одной строке, если есть 3 или меньше элементов, но тогда они будут охватывать две полные строки для 6 и 8 элементов, оставаясь при этом просто списком карточек с 10 элементами и более. Как бы вы его построили? Хотя многие из этих ситуаций можно исправить с помощью CSS Grid и Flexbox, иногда вы можете столкнуться с довольно сложной ситуацией, для которой потребуется довольно сложный селектор CSS.

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

Для этой цели Дрю Миннс построил генератор для селекторов количества — сложных селекторов CSS, которые позволяют применять стили к элементам в зависимости от количества братьев и сестер. Например, если вы хотите применить стили ко всем элементам, когда имеется , по крайней мере, 5 элементов и братьев и сестер, или не более 10, или, возможно, от 3 до 5 элементов.

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

CSS

clip-path Generator

Благодаря свойству clip-path мы можем создавать сложные формы в CSS, обрезая элемент до базовой формы, будь то простой круг, причудливый многоугольник или даже Источник SVG. CSS clip-path maker Clippy — это визуальный инструмент, который помогает вам создавать и настраивать clip-path прямо в вашем браузере.

Генератор траекторий для сложных форм в CSS. (Большой превью)

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

Если вся штука clip-path все еще кажется вам немного абстрактной или если вы ищете классный пример того, как ее использовать в реальном проекте, обязательно ознакомьтесь с эффектом всплывающего окна, который Микаэль Айналем создан с помощью клипсы clip-path .

Генератор макета сетки CSS

Макет сетки CSS может быть довольно простым, но иногда вы можете захотеть поиграть со свойствами сетки, чтобы выяснить, какое поведение будет правильным для вашего макета.Для начала мы можем использовать CSS Grid Generator Сары Драснер, Drew Minns Griddy, CSS Grid Cheat Sheet Generator от Али Алаа и LayoutIt от LenioLabs — все они позволяют вам определять сетку и контейнеры в сетке, а также пробелы и он сразу же генерирует CSS. Если вам нужно больше рекомендаций по Flexbox, Flexbox Patterns содержит множество примеров, с которыми можно поиграть.

Генератор CSS Grid Layout: отличный маленький инструмент для экспериментов с CSS Grid Layout. (Большой превью)

Или вы можете использовать одну строку решений CSS.Уна Кравец создала однострочные макеты, коллекцию из десяти современных CSS-макетов и методов изменения размера. Начиная с самой большой загадки (центрирование) и охватывая все, от классического макета Святого Грааля и «Деконструированного блина» до применения зажима () и соблюдения соотношения сторон, коллекция Уны полна маленьких лакомых кусочков, которые связаны чтобы облегчить вашу жизнь как разработчика.

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

CSS Генератор составных сеток

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

Генератор составных сеток (превью в большом разрешении)

Небольшой инструмент, который поможет вам создавать составные сетки и сэкономить время на рисовании бесконечных вариаций, теперь принадлежит Мишель Баркер: генератору составных сеток.Все, что вам нужно сделать, это ввести количество столбцов для каждой сетки, и они будут объединены в составную сетку. Отличное дополнение к вашему цифровому набору инструментов. А если вам нужно создать модульную сетку, сетку из нескольких столбцов или сетку рукописи для вашего проекта печати, Калькулятор модульной сетки предоставит подробное объяснение того, как это сделать в InDesign.

CSS Filters and Blend Modes Generator

Фильтр drop-shadow CSS имеет отличную поддержку, но он довольно недооценен - ​​настоящий позор, учитывая тот факт, что он может сэкономить вам много времени, работая с box-shadow .

Box-shadow и drop-shadow (превью в большом разрешении)

Как объясняет Мишель Баркер в своем блоге, drop-shadow позволяет использовать значения для смещения по оси x, смещения по оси y, радиуса размытия и цвета - точно так же, как и его более выдающийся брат box-shadow . Однако есть одно большое преимущество: тень соответствует не ограничивающей рамке элемента (с которой часто начинается взлом при использовании box-shadow ), а непрозрачным частям изображения. Идеально, если вы хотите применить тень к прозрачному логотипу PNG или SVG, например, или даже к обрезанной форме.

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

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

Генератор заполнителей размытого изображения

Заполнитель изображения - это эффективный способ улучшить воспринимаемую производительность сайта при загрузке изображения. В своем стремлении найти самые быстрые и красивые плакаты с изображениями для Интернета Джо Белл решил сам придумать решение. Результат: Plaiceholder.

Генератор заполнителей размытых изображений. (Большой превью)

На основе набора помощников Node.js Plaiceholder превращает ваши изображения в легкие, размытые изображения-заполнители. Есть несколько подходов на выбор: CSS (который рекомендуется), SVG, Base 64, Blurhash и экспериментальный Blurhash to CSS.

Генератор CSS-анимаций

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

Обширная библиотека анимаций и переходов. (Большой превью)

CSS Wand обеспечивает анимаций наведения и загрузки , но вы также можете использовать Ladda-анимацию (кнопки со встроенными индикаторами загрузки) и Eric Spinners (с Vue.js). И, возможно, вы хотите добавить причудливую изюминку переходам при наведении с помощью Boop! - просто помните о масштабировании с помощью псевдоэлементов и уважайте предпочтения движения для пользователей, которые выбирают уменьшенное движение.

Генератор CSS-рисунков

Мы можем воплотить в жизнь самые сложные макеты с помощью CSS, но мы также можем создавать игровые рисунки и рисунки. Юань Чуань создал веб-компонент для шаблонов рисования с помощью CSS . Компонент включает в себя множество служебных функций и сокращенных свойств, с которыми можно поиграть.В результате компонент генерирует сетку div s вместе с простым CSS. Исходный код также доступен на GitHub.

Рисование каракулей с помощью CSS? Конечно, спасибо Юань Чуаню. (Большой превью)

Полезные маленькие помощники веб-разработчиков

Если вам нужно еще несколько инструментов, к счастью, есть много хороших старых веб-разработчиков, которые собирают свои любимые полезных инструмента в одном месте под названием Tiny Helpers. Под управлением Стефана Джудиса вы обязательно найдете всевозможные инструменты: от API, специальных возможностей и цвета до шрифтов, производительности, регулярных выражений, SVG и Unicode.

Растущее хранилище дружелюбных и крошечных помощников для веб-разработчиков. (Большой превью)

Конечно, на других платформах есть много других, таких как очень полезная ветка Twitter Джоша В. Комо, а также самого Стефана Джудиса. Что бы вы ни стремились найти, что поможет вам выполнять работу лучше и быстрее, вы обязательно найдете это там!

Заключение

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

(cm, il, vf)

Инструмент градиента на основе CSS и JavaScript

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

Ниже представлен один из экспериментов моего мужа Криса. Он увлечен градиентами и в последнее время все больше и больше погружается в JavaScript.

Инструмент градиента на основе CSS и JavaScript

Вот краткий обзор (не исчерпывающий) того, как Крис создал этот инструмент:

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

Начните с настройки HTML-сетки

Для этого сначала создается охватывающий DIV, который действует как контейнер для всех остальных DIVS, внутри которого они размещаются.Дайте этому DIV идентификатор «контейнера».

Затем создайте две другие основные области DIV - одну для левого блока и одну для создания правого блока. Мы присвоили левому блоку идентификатор «leftBox», а правому блоку - «linGrad».

Внутри DIV «leftBox» создайте три новых набора областей DIV для размещения трех столбцов для Color 1, Color 2 и Direction. Здесь находятся все переключатели, а также заголовки столбцов.

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

См. Свое творение здесь внутри DIV «linGrad».

Вот этот HTML код подробнее:

Затем добавьте свой стиль и ссылку на файл CSS

Нам нужно создать ссылку на файл CSS, который содержит всю информацию о стилях для инструмента градиента, и это делается внутри файла HTML из раздела, как показано ниже:


Код CSS выглядит следующим образом:

Затем вам нужно ввести JavaScript

Затем нам нужно добавить кнопку СОЗДАТЬ (используя код HTML5), чтобы активировать градиент JavaScript.HTML-код для этой кнопки в идеале должен располагаться под остальной частью кода (добавьте его под всеми другими DIV).

Код для этого выглядит так:

Create

Что касается самого кода JavaScript, мы вызываем его внутри HTML-файла из раздела следующим образом:


Вот код JS:

Наконец, собери все вместе

В коде JS мы создали функции, которые смотрят в CSS и получают каждый отдельный идентификатор («colorA», «colorB», «directionA», directionB »и т. Д.).Затем мы убедились, что эти значения были возвращены, когда они были выбраны через интерфейс внешнего браузера. Способ получения различных идентификаторов в вашем CSS - это использование метода getElementById (). Это удобный метод, который довольно часто используется в веб-разработке. Для получения дополнительных сведений о getElementByID и о том, как использовать его в коде, можно найти несколько хороших источников обучения - это W3Schools.com и Mozilla Developer Network.

Мы с мужем постоянно стремимся узнать что-то новое и освежить существующие навыки, поэтому W3Schools и MDN - некоторые из наших любимых учебных ресурсов.

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

10 CSS-градиентных библиотек и веб-приложений для дизайнеров пользовательского интерфейса

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

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

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

Панель инструментов вашего веб-дизайнера

Неограниченное количество загрузок: 500 000+ веб-шаблонов, наборов значков, тем и дизайнерских материалов
От всего 16,50 долларов в месяц!

СКАЧАТЬ

Веб-градиенты

На веб-сайте WebGradients вы найдете множество настраиваемых градиентов на выбор.

Они бывают разных цветов и стилей, но все они уже собраны и готовы к работе. Думайте об этом как о библиотеке градиентов, в которой всего более 180 вариантов .

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

Или вы можете скопировать градиенты как код CSS3, а затем добавить их прямо на свой сайт. Здесь нет неправильных ответов - просто много градиентов.

Кнопки с градиентом

Если вы веб-дизайнер, то знаете, насколько болезненно бывает подбирать цвета.Это становится еще сложнее, когда вы пытаетесь сопоставить градиенты.

Войдите в GradientButtons, бесплатную библиотеку с открытым исходным кодом, до краев наполненную великолепным дизайном кнопок.

Библиотека очень проста в использовании и содержит и градиентов на выбор.

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

uiGradients

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

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

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

Аниматор градиента

Итак, градиентная анимация. Теперь это вещь.А инструмент Gradient Animator - идеальный способ воплотить это в жизнь. Все может работать прямо через CSS3 без необходимости в JavaScript.

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

Вы быстро поймете преимущества этого инструмента.

Редактор градиентов Colorzilla

К настоящему времени каждый веб-дизайнер должен знать о редакторе градиентов Colorzilla.

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

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

Градиенты CSS

Вот отличная библиотека, ориентированная на градиенты CSS3, доступная на GitHub.

Вы получаете доступ ко всему исходному коду и множеству стилей градиента (линейный, радиальный и т. Д.).

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

Безумие видеть, как далеко продвинулся Интернет с момента выпуска современных свойств CSS3.

Градиент ColorSpace

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

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

С помощью чего-то вроде Colorzilla вы можете сложить несколько цветов вместе для одного массивного градиента.

Это не означает, что ColorSpace - плохой инструмент. Но лучше всего его использовать для простых градиентов.

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

С другой стороны, у нас есть бесконечные градиенты. И да, это именно то, на что это похоже.

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

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

Если вы хотите узнать больше, есть страница "О нас".

Полифилл с коническим градиентом

В спецификациях W3C есть некоторые подробности о конических градиентах, но они не широко поддерживаются современными стандартами CSS3.

Введите этот полифилл, разработанный для решения проблемы. Это удобный инструмент с открытым исходным кодом, созданный разработчиком Леа Веру, который принудительно поддерживает conic-gradient () через полифил.

Хотя это не самый популярный инструмент для создания градиентов, он решает настоящую проблему для веб-дизайнеров.

Крошечный градиент

TinyColor - это аккуратная библиотека JS, которая обрабатывает манипуляции с цветом и редактирование в библиотеке кода. Разработчик Дэмиен Сорел взял эту библиотеку и построил поверх нее опцию TinyGradient.

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

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

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

Этот пост может содержать партнерские ссылки.См. Раскрытие партнерских ссылок здесь .

Лучшие генераторы градиентов и библиотеки »CSS Author

Градиент вернулся! Да, в 2019 году вы можете видеть градиенты в каждом дизайне пользовательского интерфейса, на который вы смотрите. Дизайнеры начинают использовать яркие градиенты для дизайна пользовательского интерфейса, и это круто. Использование градиента в простом чистом дизайне - это здорово. вы можете применять их во многих местах, таких как кнопки, верхние полосы ярлыков и т. д. Градиенты, как правило, представляют собой цветовые переходы, которые создают современный эффект, особенно при наложении на изображение.например, вы можете увидеть современные изящные обложки Spotify Music.

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

См. Также: Лучшие инструменты для работы с цветом и статьи для дизайнеров

uiGradients

.

uiGradients - это тщательно подобранная коллекция красивых цветовых градиентов для дизайнеров и разработчиков.

Посмотреть

Градиенты

Генератор градиентов на Tumblr.

Посмотреть

Генератор цветовых градиентов

Посмотреть

CSS Gradient - Генераторы градиентов

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

Посмотреть

Генератор градиентов CSS

Посмотреть

Градиент ColorSpace

Создайте красивый цветовой градиент. Просто введите два цвета, и наш инструмент сгенерирует идеальный цветовой градиент и подходящий код CSS.

Посмотреть

Смесь

Blend, создавайте и настраивайте красивые градиенты CSS3.

Посмотреть

Онлайн-генератор градиентов CSS

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

Посмотреть

Окончательный генератор градиентов CSS

Ultimate CSS Gradient Generator от ColorZilla.

Посмотреть

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

Генератор CSS для создания красивых анимированных градиентов для использования на вашем веб-сайте.

Посмотреть

Генератор градиента

Этот инструмент генерирует код градиента CSS с помощью простого в использовании графического интерфейса. Он поддерживает различные варианты от простых линейных до сложных радиальных градиентов.

Посмотреть

Генератор градиентов CSS

Генератор градиентов для линейных и радиальных цветовых градиентов css.

Посмотреть

Генератор градиентного фона

Создание кода CSS с линейным и радиальным градиентом и фоновых изображений с настраиваемыми параметрами конфигурации.

Посмотреть

Инструмент для создания градиента

Посмотреть

Градпад

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

Посмотреть

Gradient Hunt

Gradient Hunt - это бесплатная открытая платформа для вдохновения цветов с тысячами модных цветовых градиентов, созданных вручную.

Посмотреть

Веб-градиенты

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

Посмотреть

Гиперколор

Посмотреть

Coolhue

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

Посмотреть

Эгградиенты

Посмотреть

Градихант

Посмотреть

CSS Gears Градиентные карты

Посмотреть

Грабиент

Посмотреть

Вечеринка с градиентами

Gradients Party - это тщательно отобранный набор градиентов специально для кнопок в пользовательском интерфейсе. Его также можно комбинировать с другими формами и элементами.

Посмотреть

Градиент ослабления эскиза

Плагин Easing gradient для SketchApp, позволяющий создавать более красивые градиенты.

Посмотреть

Хроматический эскиз

Создавайте красивые и однородные на вид градиенты и цветовые шкалы (используя Chroma.js и цветовое пространство Lab).

Посмотреть

Магия градиента

Посмотреть

Цвета градиента Hexcolor

Посмотреть

Градиента

Посмотреть

Шум и градиент

Посмотреть

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

Посмотреть

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

Посмотреть

Кнопки с градиентом

Посмотреть

Градиентджой

Посмотреть

Коник.css

Посмотреть

Сетка

Посмотреть

Конический CSS

Источник

5 лучших веб-сайтов с генераторами градиентов CSS

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

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

Онлайн-генераторы градиентов CSS

1. CSSgradient.in

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

Посетите веб-сайт

2. CSS-gradient.com

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

Посетите веб-сайт

3. UIgradients.com

UIgradients - это также хороший веб-сайт, который случайным образом генерирует градиентные цветовые узоры. Продолжайте нажимать кнопки «Далее» и «Назад», чтобы изучить цветовые узоры градиента. Вы также можете использовать клавиши со стрелками для изменения градиента на экране. Для быстрого доступа нажмите Показать все градиенты вверху слева. Когда вы закончите выбор градиента, нажмите кнопку получить CSS в правом верхнем углу, и он покажет вам код CSS для копирования.

Посетить веб-сайт

4.ColorSpace

ColorSpace - также хороший инструмент для создания градиента координат CSS, палитры или трехцветного градиента. Выберите цвета, ориентацию, а затем скопируйте код CSS. Если вы хотите использовать 3 разных цвета в шаблоне градиента, используйте инструмент «Трехцветный градиент». Пользовательский интерфейс прост, а инструмент действительно прост в использовании.

Посетите веб-сайт

5. Webgradients.com

Webgradients.com имеет несколько образцов цветовых градиентов. Продолжайте прокручивать, пока не найдете тот, который лучше всего подходит для вашего сайта.Градиенты показаны в круглых карточках. На каждой карточке есть ссылка "Копировать CSS". Если вы хотите попробовать Цветовой градиент, щелкните ссылку «Копировать CSS» на этой карточке, чтобы получить код CSS.

Посетите веб-сайт

Завершение

Есть несколько похожих веб-сайтов, на которых вы можете видеть цветовые градиенты и получать коды CSS.