Сделай кнопку

12.06.2012

Сделай кнопку

Хочу представить вам небольшой сервис, который я прикрутил к своему блогу, чтобы он (блог) нес не только функцию «почитать». Мое приложение, назовем его так, умеет делать кнопки на CSS, просто и без особых затей.

Очень сложно, оказывается, представлять свой продукт, поэтому заранее извините за «кривость слога».

Итак, что это за «зверь» такой?

Сделай кнопку — я пока назвал его так. Сервис умеет создавать кнопки (не только кнопки, а любые блоки) для использования в любых местах, где используется HTML и CSS. Он умеет работать с CSS3 и использует его свойства вроде border-radius, box-shadow, text-shadow и других.

Возможности сервиса:

  • дает на выбор несколько вариантов веб-безопастных шрифтов
  • меняет цвет, размер шрифта
  • знает немного о тенях текста
  • нарисует границу кнопке, как захотите
  • умеет закруглять углы, как все вместе, так и каждый персонально
  • может залить кнопку градиентом, а может и не залить
  • отбросит тень, как внешнюю, так и внутреннюю. Смещение, размытие — all inclusive
  • поменяет прозрачность кнопки
  • сможет добавить немного анимации
  • выдаст более-менее кроссбраузерный код
  • он говорит на русском

Сервис пока еще в стадии доделывания, но уже вполне может использован в любых целях (включая корыстные )

Что планируется сделать?

  • для начала — написать небольшую инструкцию по использованию. Ведь хэлп должен быть у каждого приложения
  • обеспечить достойную кроссбраузерность в разумных пределах (это я про IE6)
  • поработать над дизайном, упростить и сделать более интуитивным
  • оптимизировать код для ускорения работы (возможно, это будет AJAX)
  • подключить возможность выбора шрифтов из репозитория Google
  • реализовать возможность работы с другими свойствами и объектами (только текст, к примеру, хотя все это можно делать и в нынешнем варианте)
  • ваши предложения?

Попробовать сервис в работе можно тут. Скажу по секрету — это не последнее нововведение, которое я представлю в ближайшее время. Сейчас провожу финальные доделки, думаю еще неделька и все будет готово.

Собственно, на этом пока все. Предложения, пожелания, гневные речи и крики «Ура!» — в комментариях.

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

, ,

Комментариев: 25

    • GerinG

      Я бы тоже добавил. Вот только где взять время ))) Есть мысли по полной переработке сервиса, но кто бы добавил часа три в сутках для своих проектов

      Ответить
  1. Эльвира

    Только случайно обратила внимание на этот сервис и приятно удивлена — так легко им пользоваться!

    Ответить
  2. Natyuma

    Очень здорово!!! Вручную подобрать внешний вид кнопки — несколько часов времени и сотни тестов. А тут несколько минут, и готово! Спасибище!!!

    Мои «пожелания» )):
    1. возможность задать тексту стиль italic и normal/bold
    2. padding разделить на «верх», «низ», «лево», «право», например, я текст всегда сдвигаю чуть выше середины, он так смотрится ровнее. Иногда надо текст влево сдвинуть относительно середины.
    3. добавить еще один «символ» перед текстом
    4. возможность сделать «символы» другого цвета, отличающегося от цвета текста, это будет невероятная круть )))

    Ответить
  3. GerinG

    Это да, читал давным давно…
    Вообще, мне там нравится фраза
    «В теории, единицы «em» — это новый и предстоящий стандарт размера шрифта в Интернете»

    Ответить
  4. GerinG

    Андрей Гурылёв — насчет шрифта в %, то это вряд ли. Скорее всего буду делать вариант с em, так более верно, имхо…
    Собственная картинка — очень вкусная штучка, но пока не могу представить реализацию, подумаю пока. Сделать выбор символа спереди или сзади — не проблема, думаю на днях реализовать.
    Высоту и ширину добавить не проблема, это тоже сделаю.

    Блин, пора уже целый проект составлять )))) Сколько пожеланий

    Ответить
  5. Андрей Гурылёв

    Да, я тоже прежде не видел генераторов кнопок русских с css3.
    Есть один на примете, сам использую:
    http://weblog.gurylyov.ru/user/js/highlight.min.js

    Мне на удивление, как раз появилась ситуация, что мне нужно сгенерить кнопку. Решил воспользоваться сервисом. Однако, размер шрифта у меня на сайте указывается в процентах, чего не позволяет генератор. Нет возможности nowrap, т.е. отключения переноса строк в случае пробелов. Считаю, шрифты Helvetica нужно вынести в отдельный пункт. Хочется вставить после/до текста не символ, а произвольную картинку. По ссылке или с компа. Тогда можно будет делать кнопки расшаривания в соц. сети, что я, собственно, и пытался сделать.

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

    И да, желаю удачи в развитии сервиса! Уау у вас обязательно должно получиться, судя по первому шагу.

    Ответить
  6. GerinG

    Спасибо, Дмитрий. Пока не совсем уау, но я очень постараюсь, чтобы так было

    Ответить
  7. GerinG

    Руслан — неужели реально первый?? Я как то даже и не мониторил этот момент… Если так — мне вдвойне приятней его запуск
    sweatego — не совсем понял, вы предлагаете саму кнопку сохранять в png? Не вижу смысла, в ФШ нарисовать проще. И размер будет меньше и эффектов можно накрутить больше.
    Ансаф — спасибо, стараемся

    Ответить
  8. sweatego

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

    Ответить
  9. GerinG

    Андрей — благодарю за столь развернутые предложения. Обязательно учту.
    Текст поправил сразу. За ползунки отдельное спасибо, прикручу, заодно и попробую организовать клик по нему и прочие штуки, касающиеся непосредственно ползунков.
    Подсветку синтаксиса хочется, конечно, но не натыкался на подобные скрипты — ничего нет на примете? Потому как написать с нуля — чувствую не потяну.
    Архив — да, штука полезная, попробую реализовать.

    Ответить
  10. Андрей Гурылёв

    Офигенски!!! Вот сразу список пожеланий:

    Хотелось бы щёлкать в любом месте полосок настройки, а не передвигать ползунок.
    Хотелось бы возможность вставлять символ не только справа, но и слева.
    Если сервис делается для верстальщиков, а не для дизайнеров, то состояние не Press, а Active.
    Хотелось бы, чтобы в первоначальном состоянии, как только открываешь сервис, ховер и эктив отличались от нормала. т.к. анимацию я настраиваю до ховера, не видно разницы между состояниями и тяжело выбрать тип и длительность анимации.
    Хотелось бы видеть выдаваемый код подсвечиваемым, чтобы можно было разобрать что там написано не в текстовом редакторе, а прямо на сайте. Только чтоб при этом скопировать без проблем можно было. Также нужна возможность просто взять и скачать готовое zip-архивом.

    p.s. оч круто, что под кнопкой указывается ширина, когда фокус не близко.
    p.s. ползунки таблицами? я бы выбрал другой скирпт. более функциональный. тут есть хорошие: http://www.jquery4u.com/plugins/4-jquery-mobile-price-sliders-range-select/

    Ответить
  11. Руслан

    отличная штука, наконец-то русскоязычный сервис)

    Ответить
  12. Егор

    Поле «прозрачность» надо назвать «непрозрачность»…

    Ответить
  13. GerinG

    Atamovich — да, идея хорошая, пожалуй запишу себе в ближайшие планы. Тогда уже и нажатую надо бы привязать к нормалу, верно? Хотя бы основные параметры

    Winmaster — спасибо, я тоже надеюсь что будет пользоваться некоторым спросом. Насчет IE6 согласен, но для порядку — надо хотя бы попытаться

    Кирилл Green — спасибо

    Ответить
  14. Atamovich

    Потыкал, классно:)
    Вот только бы связь сделать между ховером и нормалом.
    А то настроил первую вкладку, а вторую заново приходится настраивать…
    А так бы скопировал, кое что подправил и готово!

    Ответить
  15. Winmaster

    Виктор, очень круто! Думаю, сервис будет более чем востребованный ;D
    P.S. Да ну его этот IE6, им никто уже не пользуется =)

    Ответить