2.12. CSS-генераторы

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

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

Генераторы, онлайн-сервисы CSS

обновлено 05.04.2017

  • pleeease

    Pleeease — сервис для генерации браузерных префиксов и не только.

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

  • colorion

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

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

  • color supply

    Color Supply — генератор цветовых схем.

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

  • Автопрефиксер онлайн — добавляет нужные вендорные префиксы и удаляет ненужные в вашем CSS.

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

  • coolors

    Coolors — сервис для подбора цветовых схем для сайта, альтернативных теней, определение цветов по картинке.

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

  • css-filters-gen

    cssFilters — пользовательские фильтры и фильтры как в Инстаграмм для изображений.

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

  • type-scale

    Type Scale — визуальный калькулятор для расчёта размера заголовков.

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

  • transparent-textures

    TRANSPARENT TEXTURES — коллекция прозрачных бесшовных текстур для вашего сайта.

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

  • image-slider

    Image Slider Maker — онлайн-сервис для создания адаптивного слайдера с картинками.

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

  • tridiv

    Tridiv — 3D-редактор для создания объёмных моделей на чистом CSS.

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

  • webcodetools

    Web Code Tools — генератор кода для создания эффектов CSS, HTML-кода для различных элементов, карточек для Твиттера и других полезных вещей.

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

  • centered-css

    HOW TO CENTER IN CSS — генератор стилей для центрирования (выравнивания) блока или текста с помощью различных приёмов. Также имеется поддержка различных версий Internet Explorer.

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

  • image-to-css

    img2css — инструмент, который преобразует изображения в CSS-код, он выдаёт вам один div с кодом, который вы можете использовать в своих проектах.

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

  • cssapple

    CSS Apple Device Generator — генератор разметки и стилей для устройств Apple. В поле Device Type можно выбрать тип устройства, с помощью Device Width — задать ширину, а также выбрать цвет экрана в поле Device Inner color.

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

  • web-colour-data

    Web Colour Data — онлайн-сервис, позволяющий получить цветовую палитру любой веб-страницы.

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

  • simpsons

    The Simpsons in CSS — коллекция любимых персонажей на чистом CSS.

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

  • mobilephoneemulator

    Mobile phone emulator протестирует, как выглядит сайт на экранах мобильных устройств. Cell phone terminal — поле для выбора типа устройства, размера окна и ориентации, Website to terminal — поле для ввода url-адреса.

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

  • css-loader

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

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

  • flexbox-generator

    Flexplorer — площадка для демонстрации возможностей модели Flexbox. Вы сможете задать свои параметры для блоков и увидеть пример в действии.

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

  • device

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

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

  • long-shadows

    Long shadows — сервис, позволяющий создавать так называемые «длинные тени» для блоков и для текста.

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

  • css lint

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

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

  • grid

    Responsive Grid System — CSS-фреймворк для создания гибкого макета на основе сетки (grid). Раздел Let’s Go to Work позволяет выбрать и скачать нужную разметку страницы, используя от 2-х до 12-ти колонок, а калькулятор в разделе Or Make Your Own поможет задать собственную разметку.

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

  • text to path

    CSS TEXT TO PATH GENERATOR сгенерирует html-код для текста, расположенного по кривой.

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

  • ribbon

    3D Ribbon Generator поможет создать красивые 3D ленточки. Вам нужно выбрать вариант дизайна, а также задать цвет и размер элементов.

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

  • color_pallet

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

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

  • cssgenerator

    CSS3 generator — онлайн-сервис, который позволяет без труда сгенерировать код CSS3 для определенных свойств, таких как:
    border-radius, box-shadow, text-shadow, RGBA, @font-face, multiple columns, box resize, box sizing, outline, transition, transform, gradient. Вам всего лишь нужно выбрать свойство, которое вы хотите использовать в стилях вашего браузера, задать для него требуемые параметры, а затем скопировать полученный код в свой проект.

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

  • cssmaker

    CSS 3.0 Maker — сервис, аналогичный CSS3 generator, присутствует еще одна интересная возможность — Text Rotation.

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

  • CSS Menu Maker

    CSS Menu Maker — незаменимый сервис для создания панелей навигации на основе списков как на чистом CSS, так и с использованием jQuery. Помимо основной разметки предлагает готовые варианты стилей для вертикальных и горизонтальных панелей навигации.

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

  • CSS Portal

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

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

  • css_border

    Border Image — онлайн-генератор CSS3 свойства border-image, позволяющий оживить границы блока с помощью картинок.

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

  • csstemplater

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

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

  • css_please

    CSS3 Please! — очень удобный сервис для создания кроссбраузерного кода для таких CSS стилей, как border-radius, box-shadow, linear-gradient, transition и многих других. Задавая значения стилей в редакторе, вы сможете сразу же увидеть получившийся результат на примере блока, расположенного в окне справа.

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

  • livetools

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

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

  • handson

    Hands On — онлайн-сервис от Microsoft, который предоставит вам примеры кода для новых возможностей HTML5, включая 2D и 3D transforms, HTML5 canvas, animations, а также онлайн-демонстрацию выбранных свойств и элементов.

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

  • css-sprite

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

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

  • CSS3 Patterns Gallery

    CSS3 Patterns Gallery предлагает вашему вниманию пример виртуозного использования возможностей CSS3. У вас появится возможность создать сложные бесшовные фоны для своего сайта. 37 образцов выполнены в различных стилях, и мы уверены, что вы найдёте образец себе по душе!

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

  • CSS3 TEST

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

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

  • Богдан Караван

    Огромное спасибо за статью, действительно очень много полезной информации! Спасибо за вашу работу!

  • PaSHA SHeremetev

    Классная подборка!

    • Согласна)) Периодически обновляю, когда нахожу что-то интересное.

  • Спасибо. Ещё парочку генераторов добавила.

  • rojer9999

    Большое спасибо за этот сайт и такую подборку. Я тоже хочу внести вклад и поделиться игрой для изучения flexbox =)

    http://www.flexboxdefense.com/

  • Вадим Каптачук

    Спасибо за ваш труд и тому что выделяете время для этого, в общем классный сайт для изучения HTML + CSS

  • Den Sobolev

    Отличная подборка… зря расшаривания по соцсетям не предусмотрено… или я не внимателен?

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

  • Тогда совсем отлично))
    Нет, вы ничего не пропустили, плюс должен быть.