CSS генераторы

WAIT! Animate

example-animations-wait-animatehttps://cdn.tproger.ru/wp-content/uploads/2016/08/example-animations-wai... 300w" width="720" />

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


CSS3 Generator

546546421-800x503https://cdn.tproger.ru/wp-content/uploads/2016/08/546546421-800x503-300x... 300w" width="800" />

CSS3 Generator — классический пример фрагментов кода, полезных в ежедневных ситуациях. Он предоставляет более 10 различных генераторов, охватывающих такие свойства, как box-shadow, flexbox и т.д.


ColorZilla Gradient

gradient-generatorhttps://cdn.tproger.ru/wp-content/uploads/2016/08/gradient-generator-300... 300w" width="948" />

CSS-градиенты — это боль. Да, можно создавать миксины в Sass, но если вы им не пользуетесь, вам поможет простой графический инструмент ColorZilla Gradient Editor.


CSS Type Set

04-css-type-set-webapphttps://cdn.tproger.ru/wp-content/uploads/2016/08/04-css-type-set-webapp... 300w" width="700" />

Хотели посмотреть, как выглядят различные шрифты? Зайдите на CSS Type Set. Всё, что нужно — ввести текст и выбрать параметры шрифта.


Enjoy CSS

enjoy_css3https://cdn.tproger.ru/wp-content/uploads/2016/08/enjoy_css3-300x150.png 300w" width="680" />

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


Flexy Boxes

2f07f1dbfe9a28b0b46beee12f848af2https://cdn.tproger.ru/wp-content/uploads/2016/08/2f07f1dbfe9a28b0b46bee... 300w" width="564" />

Если вы никак не можете разобраться с flexbox, то вам стоит попробовать Flexy Boxes. В этом приложении можно сравнить различные версии flexbox и интерпретации синтаксиса.


CSSmatic

cssmatichttps://cdn.tproger.ru/wp-content/uploads/2016/08/cssmatic-300x201.png 300w, https://cdn.tproger.ru/wp-content/uploads/2016/08/cssmatic.png 1259w" width="740" />

CSSmatic — ещё один генератор, который работает с box-shadow, border-radius, текстурами шума и градиентами. Он не настолько функционален, как CSS3 Generator, но каждый инструмент выведен на отдельную страницу, что позволяет сохранить её и не отвлекаться на остальные.


Base64 CSS

Base64-CSS-Generatorhttps://cdn.tproger.ru/wp-content/uploads/2016/08/Base64-CSS-Generator-3... 300w, https://cdn.tproger.ru/wp-content/uploads/2016/08/Base64-CSS-Generator.jpg 1050w" width="740" />

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


Patternify

Patternfyhttps://cdn.tproger.ru/wp-content/uploads/2016/08/Patternfy-300x279.jpg 300w" width="520" />

Если вам надоело использовать какие-то фоновые изображения, почему бы не создать своё? Patternify — генератор узоров с визуальным редактором.


CSS Button Generator

10-css3-button-generatorhttps://cdn.tproger.ru/wp-content/uploads/2016/08/10-css3-button-generat... 300w" width="800" />

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


Если вы пользуетесь другими удобным инструментами такого рода, делитесь ими в комментариях, мы добавим их в нашу подборку!