8 полезных сервисов для веб-разработчика и дизайнера

    Под катом — описание восьми сервисов, которые могут заметно облегчить жизнь веб-разработчика, верстальщика или дизайнера.


    1. Wordmark.it




    Сервис для подбора шрифтов Wordmark.it — позволяет увидеть написание заданной фразы со всеми шрифтами, установленными на вашем компьютере. Шустро грузит, удобные фильтры. Жаль, нет возможности задать цвета фона и букв.

    2. Spritebox




    Спрайтбокс предназначен для «нарезки» картинок на спрайты. Загружаете картинку, выделяете нужные области, пара кликов — и у вас есть готовые css-стили для спрайтов.
    CSS-спрайты — это представление большого количества мелких картинок, путем создания одной большой картинки, что существенно экономит время загрузки и ресурсы сервера (запрос идет всего-лишь на одну картинку, вместо всех).

    3. CSS3 Generator




    CSS3 Generator поможет вам грамотно использовать возможности CSS3: покажет список доступных CSS3-стилей, сгенерирует кроссбраузерный код для них, сообщит о том, какие браузеры поддерживают или не поддерживают данные стили.

    4. ProCSSor




    ProCSSor — инструмент для проверки/форматирования css-стилей. Загружаете свой styles.css, выбираете настройки форматирования и получаете на выходе красивый валидный css-код.

    5. Super Conversion Button




    Super Conversion Button — инструмент для быстрого создания дизайнов кнопок. Просто выбираете стили, цвета, текст надписи и т.д.

    6. 0 to 255




    0 to 255 — простой и удобный сервис подбора оттенков цветов. Думаю, по скриншоту все и так понятно.

    7. Frame Box




    Frame Box — сервис для создания так называемых «wireframes» — структурных схем таблиц. Очень полезная вещь на стадии проектирования разметки новых сайтов или каких-либо веб-интерфейсов. Созданные схемы можно сохранять, а также делиться ссылками на них.

    8. jsFiddle




    Сервис jsFiddle — эдакая «песочница» для веб-разработчиков. Рабочая часть окна разделена на 4 части: HTML, CSS, JavaScipt и результат. В меню слева выбираем js-фреймворк, библиотеки к нему, спецификацию HTML и т.д. В соответствующих частях рабочей области пишем код — и незамедлительно видим готовый результат. Проекты можно сохранять и делиться ими.


    Подборка сервисов взята отсюда, спасибо за внимание, надеюсь, статья была полезной.

    АльтегрипИнфоредСеплэйс
    • +311
    • 32,8k
    • 59
    Поделиться публикацией
    Похожие публикации
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 59
      +2
      Спасибо, с некоторыми не был знаком. Пригодится.
        +1
        На самом деле столько похожих сервисов наплодилось, и ведь все реально полезные.
        • НЛО прилетело и опубликовало эту надпись здесь
          • НЛО прилетело и опубликовало эту надпись здесь
            +1
            Огромное спасибо за подборку
              +1
              Однозначно, в мемориз!
              Особенно Wordmark.it.
                +8
                Чувствую себя первобытным человеком, котрый все это делает в NetBeans + Photoshop. Ну что ж хороший повод освоить что-нибуть новое. =)
                  +1
                  Да-да, кнопочки смачные такие ;)
                    +5
                    Что же мне чувствовать, если я верстаю в блокноте? :)
                      –3
                      Просто почувствуйте свою ложь =)
                        +3
                        Моя самая первая страничка была сверстана в блокноте. А потом я перешел на нормальные HTML-редакторы.
                          +1
                          Моя самая первая страничка != Верстаю в блокноте
                            +3
                            Просто не вые*. Я верстаю раз в несколько месяцев и только для себя. Я не секу в последних изменениях html и вполне обхожусь блокнотом, пятью браузерами для проверки и старыми добрыми таблицами, которые сейчас никто не использует почти.
                            Каждому свое, я зарабатываю другое работой на компе. И я удивлен, что высказывание моего мнения, совершенного лишенного пафоса и лжи, собирает негатива не меньше чем кого-то послать.
                              –10
                              Мне нельзя не верить?
                                +2
                                С вашим никнеймом — нельзя.
                                  –8
                                  Блин, какие отсряки! я высказал свое мнение, сейчас даже у бухгалтеров есть редакторы которые позволяют подсвечивать большинство языков программирования, включая хтмл и хмл, в них же встроены некие элементы IDE, у меня язык не поворачивается назвать их блокнотами.
                                  Вы уж извините, но я тупо не верю, что человек открывает notepad виндовый и верстает в нем.
                                    0
                                    notepad++ вполне хватает ) Но это все же не IDE.
                                      0
                                      Неужели я что-то говорил про иде? В моем понимании блокнот = notepad.exe и когда говорят блокнот, я имею ввиду именно его, я сам работаю в notepad++ и я не могу его назвать блокнотом
                                      +3
                                      вы себе даже не представляете сколько таких людей.
                                        0
                                        я уточню: блокнот — виндовый блокнот, который даже не может размер табуляции изменять, сторонние разработки уже не блокнот… может так будет понятней.
                                          0
                                          тогда и я уточню — многим кому нужно что-то разово или в «своей обстановке» (на собеседовании, к примеру, или в интернет-кафе) сверстать не качают дримвивер или notepad++, а используют виндовый блокнот.

                                          хотя я видел и таких кто использует его для верстки всегда.
                          0
                          Использую FAR + Colorer для верстки и разработки, крайне доволен, всего хватает с головой.
                            +1
                            Таки есть разница, о каком блокноте идет речь, есть подсветка синтаксиса или нет — вопрос важнее.
                          0
                          реально жизнь теперь будет легче!
                          Сенькс.
                            +2
                            А не подскажет ли кто online генератор кнопок в PNG?
                            Дабы можно было кнопки в софтах использовать, а не только в веб-приложениях.
                            Буду очень очень благодарен
                            0
                            Спасибо за эту подборку. Ее, конечно, можно еще расширять и расширять. На мой взгляд, mockflow.com — гораздо богаче чем Frame Box. Но нет русскоязычной поддержки.
                            +1
                            Спасибо за подборку. Генератор кнопок понравился — лучший из всех, что я видел.
                              +1
                              Спасибо, часто густо оформлять css лень, а о возможностях css3, должно быть очень удобно:)
                                0
                                Хабр горазд сегодня на статьи для закладок!
                                Однозначно, +1
                                  0
                                  Для любителей оптимизации\чистки css есть ещё www.cleancss.com/
                                    –4
                                    оффтоп: не справедливо, я считаю, что у поста 279 добавлений в избранное и всего 92 плюса :/
                                      +1
                                      оффтоп: не справедливо, я считаю, что не у всех кармы хватает :/
                                      0
                                      Плюс за jsFiddle. Давно искал песочницу, иногда очень полезно.
                                        +1
                                        Отличная подборка! Давно искал решение для подборки цвета на тон темнее/светлее. 0 to 255 как раз то, что надо.
                                          –1
                                          Большой человеческое спасибо, за эти сервисы. Половину не знал
                                            0
                                            Дополнение к 0 to 255, еще можно использовать Яндекс.
                                              0
                                              А также whoyougle.ru/services/color/ особенно возможность искать по имени цвета, иногда помогало + в различных цветовых схемах.
                                                0
                                                А ещё вот вспомнил — getcolor.ru/#EEE6A3
                                                Тоже и по имени и по цвету ищет.
                                                По ссылке цвет с интересным названием.
                                              +6
                                              Добавлю еще один полезный сервис:
                                              Ultimate CSS Gradient Generator
                                                +1
                                                Да, сколько же человек в избранное добавили :) Спасибо :)
                                                  +3
                                                  Отличная подборка, большое спасибо!

                                                  От себя добавлю еще два (использую их в основном для работы со шрифтами):

                                                  1) CSS Type Set — отличный и простой инструмент для проверки читабельности текста



                                                  2) SenCSs [sense] — упрощяет жизнь верстальщика, повторяя одинаковые части CSS

                                                    +11
                                                    Вы бы источник указали. А то некрасиво получается.
                                                      0
                                                      Даже как-то неловко за автора.
                                                        0
                                                        И точно, поправил, спасибо.
                                                        +2
                                                        Автор, Вы только что упростили мою жизнь в тысячу раз :) Огромное спасибо! Подбор гаммы, CSS3 и генератор превью шрифтов — ушли в закладки.
                                                          +1
                                                          Вот этим сервисом очень удобно делать favicon из png / jpg — iconverticons.com/
                                                            +2


                                                            Отличный сервис для генерации всего набора шрифтов для использования через @font-face.
                                                            Так же можно выбрать способы подключения.
                                                            0
                                                            Спасибо за подборку, покормил свои закладки.

                                                            Хотел бы ещё порекомендовать довольно удобный сервис для рисования favicons.
                                                              0
                                                              Прошу прощения, сбежал пост. Видимо на Хабре hot-keys какие-то ложно срабатывают.
                                                              http://www.favicon.cc/ — для простого рисования favicons.
                                                              Даже если между вами и дизайном нет ничего общего, сделать фавиайкон очень просто.
                                                              0
                                                              А есть что-то типа jsFiddle только как приложение, а не онлайн сервис?
                                                                +1
                                                                В тему:

                                                                www.ajaxload.info/ — сервис для моментального создния вейтингов.

                                                                0
                                                                Скоро всю разработку можно будет перенести в онлайн, осталось только аналог фотошопа придумать

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

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