CSS3-генераторы. Лучшее









    Доброго времени суток! Сразу объяснюсь по поводу оформления поста: однажды, наткнувшись на статью о 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-генератором пользуетесь Вы?

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

    Метки:
    Поделиться публикацией
    Комментарии 26
    • +1
      А я использую SASS-mixins, и могу контролировать генерируемый код. Не понимаю смысла указанных выше сервисов.
      • +3
        Аналогично, но LESS
      • НЛО прилетело и опубликовало эту надпись здесь
        • 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/

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