Генератор кнопок CSS3 c поддержкой линейного градиента
Здравствуйте Всем!
В свете последних изменений в стане интернет-браузеров, в частности умопомрачительной скорости выхода все новых и новых версий, появилась необходимость выпуска новой редакции Генератора кнопок CSS3. Так разработчики горячо мной любимой Opera наконец таки дошли до понимания чаяний всех страждущих и включили в новые версии своего детища полную поддержку функции линейного градиента. Долго раскачивались ребята, но на то они и «скандинавские пацаны». Главное, что теперь можно в полной мере испытать всю прелесть магии CSS3.
И так, что же добавилось в новой версии нашего генератора кнопок.
Первым делом пришлось переписать таблицы стилей, внести коррективы и добавить функцию линейного градиента -o-linear-gradient, с префиксом именно для обработки в Opera 11 +. С помощью чего стало возможным добиться регулировки верхнего и нижнего градиента фона, как основного так и градиента фона при наведении на кнопку, в этом горячо мной любимом браузере.
Соответственно в панели управления генератора добавились новые пункты, все как положено с возможностью выбора цвета через colorpicker:
Благодаря появлению возможности использования функций линейного градиента еще в одном популярном браузере (Opera11), существенно расширился и функционал самого генератора кнопок, а стало быть в результате работы с генератором, пользователь получает более гибкий набор правил для быстрого создания, замечательных кнопок, без каких бы то ни было дополнительных файлов изображений и подключения javascript.
Пользуйтесь на благо процветания и улучшения эстетического вида всей глобальной сети, делитесь своими впечатлениями в комментариях. Если заметите какие-то «косячные» моменты в работе генератора обязательно пишите, вместе оно как-то проще решать проблемы, по мере их поступления.
PS: Кстати «кнопарь», что ведёт, при нажатии, на действующий генератор кнопок, как раз и выполнен в этом самом генераторе.
И еще, почитателям тормознутых версий IEшки, просьба у меня к вам убедительная, не бередите душу, пользуйтесь настоящими браузерами.
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
вообщем основную часть описания я вставил в 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>“”вот фраза в боди ssmaker.ru/ec57f6f1.png
Олег. Доброго вам времени суток.
Не нужно в комментариях приводить код кнопки, я прекрасно представляю как он выглядит. С помощью генератора кнопок вы получили рабочий код CSS кнопки, остается связать его с самой кнопкой, т.е. в ссылке кнопки прописать класс соответствующий стилям CSS class=”button”. В итоге будет выглядеть так:
<a class="button" href="#" rel="nofollow">Кнопка</a>ssmaker.ru/8e6d3e65.png — не получается… Я уже несколько дней с ними вожусь
И еще, Олег, код CSS вашей кнопки должен быть заключен между
<style></style>, что судя по скрину, вы не сделали. Еще лучше создайте отдельный файл стилей, например style.css, и уже с помощью его производите эксперименты над версткой, и оформлением элементов страницы, конечно незабыв при этом, правильно подключить этот файл к html странице. Примерно так:<link rel='stylesheet' type='text/css' href='css/style.css' />.Объяснил, куда уж проще))))
Огромное спасибо, все получилось.
Извините за тупость, я недавно начал с этим разбираться.
Олег. Все нормально, так и должно быть, главное есть интерес и желание, остальное все приложится. Рад, что наконец то у вас все получилось ))))
Очень даже неплохой генератор кнопок, мне нравиться, я думаю его еще можно дополнить редактором кода на ciberfox.ru На сегодняшний день это один из лучших русскоязычных онлайн редакторов