Подборка CSS3-генераторов для упрощения фронтэнд-разработки

http://www.catswhocode.com/blog/awesome-css3-generators-to-simplify-front-end-development
  • Перевод
CSS3 предоставляет много новых возможностей в мире фронтэнд-разработки. Это действительно великолепная вещь, но иногда трудно вспомнить некоторые параметры, особенно, если вы — веб-дизайнер, а не программист. Вот 10 удивительных CSS3-генераторов, которые помогут вам сэкономить время и силы (картинки кликабельны).

CSS3 Generator


image
Этот генератор, безусловно, один из моих любимых, так как позволяют создавать более10 различных CSS3-эффектов, таких как закругленные углы, тень для текста, плавные переходы и многое другое.
css3generator.com

CSS Gradient generator


image
CSS градиенты это круто, но писать их вручную довольно сложно. Этот генератор поможет вам создать идеальный CSS-градиент, без головной боли.
colorzilla.com/gradient-editor

CSS button generator


image
На мой взгляд, это самый продвинутый CSS3-генератор кнопок, из доступных в Интернете. Настройте параметры, скопируйте сгенерированный код, и все готово!
css3button.net

CSS3Gen


image
CSS3Gen — хороший генератор, который позволяет вам легко создавать полезные фрагменты CSS3 и копировать их прямо в ваши проекты. CSS3Gen заботится обо всех префиксах для различных браузеров.
css3gen.com

CSS3 Please


image
CSS3 Please является очень эффективным инструментом для тестирования CSS3-кода: просто измените CSS-стили с помощью редактора, и специальный блок будет мгновенно изменяться, так что вы мгновенно сможете увидеть сделанные вами изменения.
css3please.com

Layer Styles


image
Если вы знакомы с Photoshop, нет никаких сомнений, что вам понравится Layer Style, генератор CSS3, повторяющий внешний вид популярной программы от Adobe.
layerstyles.org

Border image generator


image
Как вы можете догадаться, этот инструмент поможет вам создать красивые границы для изображений. Просто и эффективно!
border-image.com

CSS3 Pie


image
Internet Explorer уже десять лет является кошмаром верстальщиков, и, к сожалению, это закончится не скоро. Тем не менее, такие инструменты, как CSS3 Pie могут определенно помочь в создании IE-совместимого кода. Этот очень полезный генератор создает стили для Internet Explorer 6-9, способные отображать несколько наиболее полезных «украшательств» CSS3.
css3pie.com

CSS Easing Animation Tool


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

Font-Face generator


image
Хотите использовать причудливые шрифты на вашем сайте? Просто загрузите его на Font Squirrel Font-Face generator, и получите ваш CSS код, а также шрифт во всех форматах, необходимых для различных браузеров. Эта программа хорошо помогла в последние два года.
fontsquirrel.com/fontface/generator

Upd. 1 Подсказали еще неплохой CSS-генератор: css3.me
Поделиться публикацией
Комментарии 23
    0
    Спасибо
      +2
      Ещё б всё это один сайт умел делать :-)
        +27
        Вроде бы генераторы признаны упростить жизнь, а реально только усложняют (как в комиксе про конкурирующие стандарты):

        • Практически все генераторы пишут -moz-border-radius и -webkit-border-radius. От префикса -webkit- уже давно можно избавится, а если не волнует быстро спадающая доля Firefox 3.6, то и от -moz- тоже. (Надо же простимулировать пользователей на обновление!)
          Аналогично с box-shadow.
        • Самый первый «CSS3 Generator» делает градиенты только с префиксами -moz- и -webkit-. Безпрефиксного варианта нет. Фейспалм.жпг.
        • Второй «ускоритель» «CSS Gradient generator» вроде нормальный, но на выходе куча префиксного кода. Особенно впечатляет режим с поддержкой IE9, который вставляет SVG через data:url.
          А ведь зачастую градиентам нет необходимости тянутся по диагонали, а значит, хватит и простой PNG-картинки в data:url, которая в оптимизированном виде занимает порядка 100 байт, что гораздо меньше всех этих префиксов.
        • «CSS3Gen» ничего не знает про новый синтаксис градиентов и смену отсчёта направления градусов. Плюс проблема из первого пункта.
        • «Layer Styles» не учитывает, что тени с размытием 5 в фотошопе примерно соответствует 4 в CSS, так фотошоп делает тень сглаженной (напоминает градиенты со Smoothness), а по спецификации CSS тень должна быть близка к гауссовому размытию. 5 будет уже многовато.
        • «CSS3 Pie» неизбежно заметно замедлит загрузку страниц в IE так, что вы скорее потеряете одних из самых платежеспособных клиентов, как ни парадоксально, чем добьётесь нужных эффектов. Используйте изящную деградацию и постепенное улучшение.

        Наверное, это не все проблемы, только самые заметные.
          0
          И куда же вы без -webkit-box-shadow на стареньких андроидах?
            +1
            Пожалейте старые слабенькие телефоны, зачем их грузить ещё и тенями?
              0
              Не обязательно слабые, да и андроид 2.3 не так давно был на подавляющем количестве девайсов. Тем более, часто тени используются для одной лишь окантовки инпутов, когда делается inset shadow.
                0
                Ну это уже выбор каждого, стоят ли грузить ограниченные ресурсы андроидов (большинство из которых всё-таки дешёвые).
                  0
                  Как бы вам все пальцах-то объяснить популярнее? У вас заказчик тестирует версту на разных девайсах? У меня да.
                    0
                    Тогда вы и сами знаете, что вам нужно.
          0
          А никто не подскажет генератор вебкитовых скроллбаров?
          –2
          csstemplater.com должен быть первым
            +2
            CSS3 там ни при чем.
            +1
            Хех, примерно 85% ссылок фиолетовые
              0
              Может быть кому встречался сервис или утилита, которая может из psd стиль в css переводить?
              Не могу найти, но думаю это было бы то же полезным.
                0
                CSS Gradient generator может из картинки делать градиент
                  0
                  Divine Project умеет конвертировать PSD-шаблон в тему для Wordpress.
                    0
                    Вам сюда: csshat.com
                    0
                    Надо же, неожидал увидеть проект коллеги с NY (http://matthewlein.com/) на хабре :)
                      +3
                      Удивить мелкомягкими?
                      ie.microsoft.com/testdrive/Views/SiteMap/
                        +1
                        Удивили
                        0
                        css3ps.com/ – вот еще интересный генератор, но он в виде плагина к фотошопу.
                          0
                          Мы недавно запустили http://enjoycss.com.
                          Постарались собрать все самые лучшие фичи в одном месте
                          Оцените :) Ваш фидбек будет очень полезен для дальнейшего развития сервиса

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

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