Онлайн-инструменты CSS

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

Универсальные генераторы

• http://angrytools.com/
• https://css3clickchart.com/
• http://www.generatecss.com/
• http://css3gen.com/
• http://css3generator.com/

Тени

• https://brumm.af/shadows
• http://css3gen.com/

Кнопки

• http://www.bestcssbuttongenerator.com/
• http://dabuttonfactory.com/
• http://unicorn-ui.com/
• https://bttn.surge.sh/

Центрирование

• http://howtocenterincss.com/

Текст под углом

• http://www.cssportal.com/

Уголки

• http://lugolabs.com/
• https://csstriangle.firebaseapp.com/

Ленты

• http://www.css3d.net/
• http://www.cssportal.com/

Подсказка при наведении/указатель

• http://online-html-tools.blogspot.ru/
• http://www.cssportal.com/
• http://csstooltip.com/
• http://cssarrowplease.com/

Таблицы/блоки таблицей

• http://tablestyler.com/
• http://divtable.com/generator/

Формы

• https://html-css-js.com/html/generator/form/
• https://jennamolby.com/pardot-form-style-generator/

Спрайты

• https://spritegen.website-performance.org/
• http://css.spritegen.com/

Переключатели

• https://proto.io/
• http://www.cssportal.com/

Кодировка изображений в Base64

• https://www.base64-image.de/

Градиенты

• http://www.gradient-animator.com/
• http://elrumordelaluz.github.io/
• http://www.colorzilla.com/
• http://www.css3factory.com/
• http://www.generateit.net/

Анимация

• http://tobiasahlin.com/
• http://css3gen.com/
• http://www.theappguruz.com/
• http://angrytools.com/
• http://waitanimate.wstone.io/
• http://animista.net/

Медиа-запросы, точки перелома

• http://simplecss.eu/
• http://www.responsivebreakpoints.com/
• http://giona.net/tools/

CSS фильтры

• http://www.cssfilters.co/
• http://ilyashubin.github.io/

Разное

• https://developer.mozilla.org (рамка из изображения)

Типографика

• https://typeanything.io/
• http://type-scale.com/
• http://www.gridlover.net/
• https://drewish.com/tools/
• http://www.modularscale.com/
• http://csstypeset.com/

Генераторы шрифтов @font-face

• http://jaicab.com/
• http://transfonter.org/

Внешний вид кода, оптимизация и компрессия

• http://css.github.io/csso/ (CSSO – CSS optimizer)
• https://csscompressor.com/ (CSS Compressor)

Важный CSS (Critical Path CSS Generator)

• https://www.sitelocity.com/critical-path-css-generator
• https://jonassebastianohlsson.com/

Извлечение CSS из HTML

• http://extractcss.com/
• http://lab.xms.pl/

CSS Grid Generator

• http://www.gridcss.com/
• http://www.responsivegridsystem.com/

Валидаторы CSS

• https://www.10bestdesign.com/dirtymarkup/ (проверка кода)

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

• http://css3test.com/ (тест браузера)
• http://caniuse.com/ (поддержка различных свойств браузерами)