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
          +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/

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

                                    Самое читаемое