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

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

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

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

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

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

 

Онлайн-Генератор кнопок CSS3 для сайта

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

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

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

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

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

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

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

    вообщем основную часть описания я вставил в 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. Олег says:

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

    Ответить
    • driver says:

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

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

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

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

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

        Ответить
        • driver says:

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

    • driver says:

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

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

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

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

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

    Ответить
    • driver says:

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

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

Отправляя к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