Главная » Веб-Приложения » Генератор кнопок CSS3 c поддержкой линейного градиента

Генератор кнопок CSS3 c поддержкой линейного градиента

Генератор кнопок CSS3 c поддержкой линейного градиента

Здравствуйте Всем!
В свете последних изменений в стане интернет-браузеров, в частности умопомрачительной скорости выхода все новых и новых версий, появилась необходимость выпуска новой редакции Генератора кнопок CSS3. Так разработчики горячо мной любимой Opera наконец таки дошли до понимания чаяний всех страждущих и включили в новые версии своего детища полную поддержку функции линейного градиента. Долго раскачивались ребята, но на то они и «скандинавские пацаны». Главное, что теперь можно в полной мере испытать всю прелесть магии .

И так, что же добавилось в новой версии нашего генератора кнопок.

Первым делом пришлось переписать таблицы стилей, внести коррективы и добавить функцию линейного градиента -o-linear-gradient, с префиксом именно для обработки в Opera 11 +. С помощью чего стало возможным добиться регулировки верхнего и нижнего градиента фона, как основного так и градиента фона при наведении на кнопку, в этом горячо мной любимом браузере.
Соответственно в панели управления генератора добавились новые пункты, все как положено с возможностью выбора цвета через colorpicker:

 
Онлайн-Генератор кнопок CSS3 для сайта
 
Благодаря появлению возможности использования функций линейного градиента еще в одном популярном браузере (Opera11), существенно расширился и функционал самого генератора кнопок, а стало быть в результате работы с генератором, пользователь получает более гибкий набор правил для быстрого создания, замечательных кнопок, без каких бы то ни было дополнительных файлов изображений и подключения javascript.

Пользуйтесь на благо процветания и улучшения эстетического вида всей глобальной сети, делитесь своими впечатлениями в комментариях. Если заметите какие-то «косячные» моменты в работе генератора обязательно пишите, вместе оно как-то проще решать проблемы, по мере их поступления.
 

Генератор Кнопок

 
PS: Кстати «кнопарь», что ведёт, при нажатии, на действующий генератор кнопок, как раз и выполнен в этом самом генераторе.
И еще, почитателям тормознутых версий IEшки, просьба у меня к вам убедительная, не бередите душу, пользуйтесь настоящими браузерами.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

8 комментариев
  1. Олег:

    вообщем основную часть описания я вставил в Head

    .button { border-top: 1px solid #96d1f8; background: #65a9d7; background: -webkit-gradient (linear, left top, left bottom, from (#3e779d), to (#65a9d7)); background: -moz-linear-gradient (top, #3e779d, #65a9d7); background: -o-linear-gradient (top, #3e779d, #65a9d7); padding: 11px 22px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-box-shadow: rgba (0,0,0,1) 0 1px 0; -moz-box-shadow: rgba (0,0,0,1) 0 1px 0; box-shadow: rgba (0,0,0,1) 0 1px 0; text-shadow: rgba (0,0,0,.4) 0 1px 0; color: white; font-size: 20px; font-family: Georgia, Serif; text-decoration: none; vertical-align: middle; } .button:hover { color: #ffffff; background: undefined; background: -webkit-gradient (linear, left top, left bottom, from (undefined), to (undefined)); background: -moz-linear-gradient (top, undefined, undefined); background: -o-linear-gradient (top, undefined, undefined); } .button:active { border-top-color: #1b435e; background: #1b435e; }

    А в боди я вставил вот какую фразу

    <a href="#" rel="nofollow">Кнопка</a>""

    Ответить
  2. Олег:

    вот фраза в боди ssmaker.ru/ec57f6f1.png

    Ответить
    • driver:

      Олег. Доброго вам времени суток.

      Не нужно в комментариях приводить код кнопки, я прекрасно представляю как он выглядит. С помощью генератора кнопок вы получили рабочий код CSS кнопки, остается связать его с самой кнопкой, т.е. в ссылке кнопки прописать класс соответствующий стилям CSS class="button". В итоге будет выглядеть так:

      <a class="button" href="#" rel="nofollow">Кнопка</a>

      Ответить
      • Олег:

        ssmaker.ru/8e6d3e65.png — не получается... Я уже несколько дней с ними вожусь

        Ответить
        • driver:

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

    • driver:

      И еще, Олег, код CSS вашей кнопки должен быть заключен между <style></style>, что судя по скрину, вы не сделали. Еще лучше создайте отдельный файл стилей, например style.css, и уже с помощью его производите эксперименты над версткой, и оформлением элементов страницы, конечно незабыв при этом, правильно подключить этот файл к html странице. Примерно так: <link rel='stylesheet' type='text/css' href='css/style.css' />.

      Объяснил, куда уж проще))))

      Ответить
  3. Олег:

    Огромное спасибо, все получилось.

    Извините за тупость, я недавно начал с этим разбираться.

    Ответить
    • driver:

      Олег. Все нормально, так и должно быть, главное есть интерес и желание, остальное все приложится. Рад, что наконец то у вас все получилось ))))

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru