Пользователь
0,0
рейтинг
4 февраля 2013 в 03:11

Разработка → CSS3-генераторы. Лучшее

CSS*








Доброго времени суток! Сразу объяснюсь по поводу оформления поста: однажды, наткнувшись на статью о CSS-генераторах, меня не сильно порадовало безмерное количество информации и навигационных элементов в представленных генераторах, и еще больше — их пользовательский интерфейс! Возмутило то, что инструменты для работы со стилями — сами не выдержаны в рамках возможностей, которые они представляют… как так?!

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

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


CSS-генераторы:


  • CSS3.me — простой, элегантный и в то же время многофункциональный CSS-генератор, с красивым доменом
  • CSS3Maker.com — очень обширный функционал для работы с новыми функциями CSS3, кросс-браузерность, гибкость и полный набор всего необходимого;
  • CSS3Generator.com — ничего лишнего, для любителей классики и простоты, одним словом «old school»;
  • Colorzilla.com — генератор градиентов для создания красивых фоновых изображений, с поддержкой большинства браузеров и без применения картинок (чистый CSS).


WEB-инструменты:


  • Button builder — инструмент для конструирования кнопок, с выдержкой в ритме Web 2.0. Среди функционала, можно отметить возможность настройки: внутренних отступов, размера текста, закругленность углов и выбора цветов градиента;
  • Form builder — конструктор формы, который позволяет настроить внешний вид как формы в целом, так и отдельные ее элементы;
  • Icon builder — почувствуйте себя вольным художником, создавая новые иконки для своих кнопок, менюшек и фавиконов;
  • Ribbon builder — для создания стильных ленточек на чистом CSS, воспользуйтесь данным инструментом, с широким спектром настроек и опций.


Картинки в виде кнопок(иконок) в начале статьи — кликабельны!


Если имеете предложения или знаете интересные инструменты, которые могут поддержать данную идею — прошу высказываться. Просьба не кидать хлам, в сборку охота добавлять только эксклюзив. Спасибо.
А каким CSS-генератором пользуетесь Вы?

Проголосовало 1086 человек. Воздержался 531 человек.

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

Артем Ткачук @vnDeveloper
карма
10,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (26)

  • +1
    А я использую SASS-mixins, и могу контролировать генерируемый код. Не понимаю смысла указанных выше сервисов.
    • +3
      Аналогично, но LESS
      • +9
        Молодцы.
    • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Всегда можно подсмотреть, что делается там и написать свой миксин
  • +4
    Использую только matthewlein.com/ceaser/ для создания; эффектов анимаций
  • +2
    1. А на список «WEB-инструменты:» можно ссылочки?
    2. В URL Сolorzilla.com похоже вкрался символ из кириллицы, так как при копипасте Chrome пытается открыть xn--olorzilla-u3h.com
    • 0
      упс, Сорри. не увидел, что картинки — кликабельны.
      • 0
        Кириллическая «С» исправлена. Картинки действительно кликабельны — в этом весь изюм (навигация… как меню)
  • +4
    Только изредка пользуюсь Ultimate CSS Gradient Generator от ColorZilla, остальное пишу руками в Web Inspector (чтобы наблюдать изменения мгновенно), и когда доволен результатом, переношу в редактор, где собственный форк nib'а, который держу в актуальности и расширяю, добавляет нужные префиксы и Stylus компилирует это в CSS.
  • +2
    В основном захожу только на css3please.com
  • +2
    Еще могу порекомендовать colorschemedesigner.com/ — подбор цветовой гаммы для оформления сайта. Можно даже «на лету» увидеть пример, как цвета будут выглядеть на «среднестатистическом» сайте
    • 0
      Это уже не в тему, это дизайнерам.
  • 0
    Есть еще вот такой вот генератор для создания кнопочек css3button.net/
  • +2
    Внесу и свою лепту в этот список:
    Эффекты анимации
    Border-image
    Генератор «тултипов»

    • 0
      Border-image клёвый, но пригодится ох как не скоро: его не умеет IE10.
      • 0
        Хм, что радует — остальные !IE браузеры поддерживают, а префиксы небольшая плата за возможность работы с этим свойством.
        • 0
          Да, в случае необходимости можно сделать для всех с border-image, а для IE какой-нибудь откат через, например, modernizr или хак, но вряд ли кому-нибудь захочется этим заморачиваться без веской причины.
  • 0
    Иногда интересно посмотреть. Добавил в избранное. Спасибо.
  • –5
    баянище
  • 0
    Наглядные примеры CSS3 от microsoft: ie.microsoft.com/testdrive/Graphics/hands-on-css3
    Внимания заслуживают 2D и 3D Transform с добавлением всех возможных функций.
    Можно смотреть как они применяются последовательно.
    Ну и стиль сразу видно.
  • 0
    Наглядные примеры CSS3 от microsoft: ie.microsoft.com/testdrive/Graphics/hands-on-css3
    Внимания заслуживают 2D и 3D Transform с добавлением всех возможных функций.
    Можно смотреть как они применяются последовательно.
    Ну и стиль сразу видно.
  • 0
    В свое время как альтернативу css3generator использовал css3please.com.
  • +1
    Статья с расчётом на то, что народ не умеет поиском пользоваться?
  • +1
    Рекомендую обратить внимание на этот генератор сложных бэкграундов glan.github.com/CSS-Patterns-Workbench/

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