Подборка генераторов CSS



    Не секрет, что писать CSS для многих стандартных кнопок, макетов, etc. бывает весьма лениво. Ниже представлена подборка генераторов CSS (и не только), которая, возможно, в некоторых случаях сможет упростить кому-то жизнь. Многими генераторами можно успешно пользоваться даже без глубоких познаний CSS.

    (Осторожно! Много картинок)


    Собственно, сам список генераторов, картинки кликабельны.

    Button Maker Online




    Этот сервис предоставляет средства для создания небольших кнопок 80×15, также доступен размер 88×31.

    CSS Generator




    Позволяет выбрать стиль для веб-страницы. Цвета можно менять, кликая по палитре слева. Все изменения стиля показываются сразу же на странице.

    CSS Generator




    Кроме стандартных возможностей типа редактирования цвета, позволяет изменять оформление ссылок.

    CSS Font and Text Style Wizard




    Сервис предоставляет возможности для редактирования свойств шрифта и оформления текста.

    Cascading Style Sheets — CSS – Generator




    Немного устаревший (но годный) генератор, возможно, кому-то он понравится.

    Cascading Style Sheet CSS Generator




    Неплохой сервис для работы со стилями.

    CSS Layout Generator




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

    CSS Menu Generator




    Используется для генерации CSS (или HTML) кода для меню.

    CSS Button & Text Field Generator




    Генератор текстовых полей и кнопок. Весьма интерактивный.

    CSS Form Code Maker




    Сервис предоставляет инструмент для создания макетов для форм.

    CSS Layout Generator




    Простенький генератор. Позволяет создавать несложные макеты как для «резиновой» верстки, так и для фиксированной.

    CSS Rounded Box Generator




    Генератор кода для блоков со скругленными углами.

    FavIcon Generator




    (Не совсем в тему) Генератор для favicon стандартного размера 16х16.

    Firdamatic




    Генератор макетов без таблиц. Макеты создаются простым заполнением форм.

    Gradient Image Maker




    Генератор градиентных картинок. Тоже не совсем в тему, но он полезен как генератор фона для, например, тех же кнопок.

    HTML and CSS Table Border Style Wizard




    Можно использовать для экспериментов с border-стилями.

    JotForm


    image

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

    List-O-Matic




    Генератор навигации, основанной на списках. Для оформления использует CSS.

    quickCSS




    Инструмент для быстрой генерации CSS, позволяет начать в один клик мышкой.

    QrONE CSS Designer




    Очередной CSS генератор. Возможно, кому-то покажется полезным.

    Ribbon Rules Generator




    Генератор для так называемых «Ribbon Rules». Для генерации использует различные оттенки одного цвета.

    RoundedCornr Generator




    Еще один генератор для блоков со скругленными углами.

    SKY CSS TOOL




    Генерирует код для CSS классов.

    Spanky Corners




    Генератор отдельных скругленных углов.

    Spiffy box




    Генератор для блоков с одним скругленным углом :-)

    Spiffy Corners




    Генератор скругленных углов без картинок и JavaScript.

    The Generator Form




    Очередной генератор CSS для форм.

    YAML Builder




    Сервис с интерактивным интерфейсом для создания YAML.

    СSStemplater




    Генератор макетов. Поддерживает «резиновую» и фиксированную верстку. Есть возможность добавления шапки и футера.

    Генератор шаблона на 1-3 колонки




    CSS3please




    Кросс-браузерный генератор правил для CSS3.

    CSS3 generator




    CSS3 gradient generator




    Предложения по наполнению топика прошу писать в комментариях.
    Share post

    Comments 41

      +6
      Пусть и эти тогда повисят тут

      csstemplater.com/
      xhtml.ru/instr/3col_creator/
        +2
        Сделано.
          +2
          Это куда более полезные вещи, чем львиная доля представленных в топике генераторов.

          Написать правила к селектору быстрее с помощью автодополнения или Zen Coding:)
            +1
              0
              СSStemplater, пользуюсь месяца 4 уже.
              Очень удобная штука для ленивых, как я. :)
                +2
                Первый генерирует страницу с фреймами… Нееееет!
                  0
                  И что в том плохого? Это мое чудо, поэтому очень интересно.
                  • UFO just landed and posted this here
                +47
                По-моему проще выучить нужные средства CSS, чем разобраться в этих «генераторах».
                    +29
                    Есть предложение изрядно почистить список. Большая часть этих «генераторов» выглядят вырвиглазно, будто только что из девяностых, функционал даже смотреть не хочется. Гораздо полезнее были бы css3 генераторы, выдающие кроссбраузерные box-shadow, linear-gradient и т.п.
                      –8
                      Я было побоялся это писать, а стоило. Я всегда почему-то полон нерешительности.
                        +1
                        а это стимул такой: не делай как мы, делай красиво :)
                          0
                          Согласен.
                          Ощущение, что львиная доля этих «генераторов» занимаются сбором трафика по запросом «веб-страница просто бесплатно», и предназначены для соответствующей аудитории…
                          +25
                          Как могут генераторы CSS выглядить настолько плохо!? Абсолютно не появилось желание ими воспользоваться.
                            +3
                            сапожник без сапог
                            • UFO just landed and posted this here
                          • UFO just landed and posted this here
                              +18
                              Браво, маэстро! Вы сохранили все скриншоты в jpeg, а единственную фотографию в png.
                                +6
                                Это идеальный фейл в данной ситуации
                                  0
                                  Вы правы, горе мне.
                                    +1
                                    А как же css3generator. А в нём ещё есть ссылка на сайт, где градиентные фоны делать, но сделано очень качественно (Ultimate CSS Gradient Generator).
                                      0
                                      Чёрт, выше уже отметили это.
                                      –1
                                      Лучше бы эти ресурсы для себя погенерили css.
                                        +4
                                        Не отрицаю, что кто-то этим пользуется с удовольствием, но у меня первая мысль была «да я уж лучше сама ручками поработаю»

                                        Ну и плюс, нет у меня полного доверия к генераторам. Доверяй, но проверяй, как говорится…
                                          0
                                          Зачем тут скриншоты сайтов с первых двух страниц гугла по запросу «css generator»?
                                            +1
                                            Работают они явно медленнее, чем Zen Coding. Тем более у каждого свой coding style, а тут особо даже простейшей оптимизацией не пахнет… Это все для новичков, которые совсем не разбираются
                                              +1
                                              после этих генераторов новичики точно не станут разбираться в CSS.

                                              Сколько уже было попыток визуализировать веб-разработку, и все равно все нормальные сайты делаются в текстовом редакторе
                                                –1
                                                Согласна насчет новичков. У меня куча знакомых «мастеров Dreamweaver», а вот посади их с листочком и ручкой и заставь написать что-то свое — никак.

                                                  0
                                                  Знакомо :) Dreamweaver прошел мимо меня :) Кроме подсветки синтаксиса особо ничем не пользовался в редакторах типа HTMLPad и 1st Page :) Сейчас уже несколько лет подряд на TopStyle — набирать помогает, подсказки подсказывает, но сам никуда не лезет
                                              +11
                                              почти все – мусор. ощущение, что список собирался с 90-ых годов. его надо сильно редактировать.

                                              полезная, на мой взгляд, css тулза, которая в редактированном списке быть должна – procssor.com
                                                +2
                                                Абсолютно бесполезные комментарии к скриншотам в стиле «А это генератор CSS для генерации CSS».
                                                  0
                                                  Я настолько ленивый, что мне лень искать генераторы, забивать их в ссылки, вспоминать каждый раз, думать об этом… пользуюсь SASS.
                                                    0
                                                    Ни когда не понимал смысла в этих генерациях...CSS не на столько сложная вещь, что её искать. А потом возникнет какой нить косяк и надо будет в коде смотреть. Мне проще пользоваться редактором, пускай он мне после ввода 3 символов подсказывает, но если возникнет необходимость что-то поменять, я найду это оч быстро. Это напоминает когда люди устанавливают Photoshop и считают, что разберутся они в нём за неделю. А там бац и нет кнопки «Сделать всё отлично». Они говорят плохая программа и удаляют её. Не спорю, на начальном этапе оч удобно, но не после года вёрстки сайтов. В 2002 году не было не генераторов не чего, и всё нормально. Справлялись.
                                                      0
                                                        0
                                                        Я не люблю рейтинги, но в данном случае чарт лучших генераторов был бы не лишним.
                                                          +3
                                                          Мусор. Лучше бы написали что-то действительно полезное.
                                                            0
                                                            Вывод-то какой из вашего набора картинок с генераторами цсс? Никогда не любил эти генераторы… Если и создадут такой генератор который хоть как-то приблизится к ручному коду, то его и так узнают все и без хабра…
                                                            Качественный продукт из всего этого мы не получим. Имхо даже новичкам не будет полезно, т.к вместо генераторов этих лучше книгу прочитать типа «Пуленепробиваемый веб-дизайн».
                                                              0
                                                                0
                                                                Мне очень понравился:
                                                                www.csstablegenerator.com/

                                                                Only users with full accounts can post comments. Log in, please.