| webanet | Дата: Воскресенье, 2012-07-01, 03:05 | Сообщение # 1 |
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
|
Инструмент, с помощью которого можно создать кнопки для сайта с помощью стилей. Создать кнопку CSS онлайн
Обычно кнопки создаются с помощью картинок, получают код и вставляют в любое место сайта. Это хорошо для баннеров и некоторых отдельных элементов сайта, но иногда нужно сделать менюшку или хочется сделать полноценную кнопку со всеми атрибутами: изменение цвета при наведении, изменение цвета текста при наведении и многое другое. В этих случаях логичнее делать кнопки на стилях
Генератор CSS cтилей для кнопок удобен тем, что в левой части экрана вы видите то что у вас получается в реальном времени, то есть после каждого изменения в правой части экрана вы видите наглядный результат
В правой части экрана находятся основный настройки. Что мы настроить:
1) Размер будущей кнопки
2) Размер текста
3) Задать интенсивность закругления края
Инструментарий:
Верхний градиент - Да. Генератор поддерживает работу с градиентами, но не все браузеры понимают что это такое. IE ниже 9-ой версии не понимает даже скругление углов border-radius, поэтому заставлять его понимать градиенты gradient было бы жестоко. Если вы предпочитаете IE, то вам нужно работать с генератором именно в этом браузере, чтобы сразу видеть результат
Mozilla Firefox, Opera и Google Chrome отлично отобразят созданные кнопки и мучений особых не доставят
Общий фон кнопки - Это тот цвет, который вы будете видеть во всех браузерах и даже в IE. Ослик отобразит именно этот фон. Остальные браузеры отобразят с учетом верхнего градиента.
Цвет обводки кнопки - Это граница, которую можно выделить, если задать цвет темнее основного фона. Можно его просто слить с основой по цветовой схеме. Тогда границ видно не будет
Цвет при наведении - Это цвет фона кнопки, если навести на неё курсор
Цвет текста - Это цвет шрифта, который будет отображаться по умолчанию
Цвет текста при наведении - Это цвет на который будет меняться основной по умолчанию при наведении на кнопку. Можно сделать не только изменение оттенка фона, так же можно настроить и изменение текста
Фон активной кнопки - Если нажать на кнопку, то мы получим изменение фона
Выбор шрифта - Можно выбрать между Georgia, Helvetica и Lucida Grande
После окончания творческого процесса по настройке, наступает кульминационный момент получения кода. Жмем на кнопку в левой части экрана "Получить CSS"
Получаем код и что с ним делать? Всё просто. Добавляем полученный код в файл стилей CSS. Далее, если нам нужно сделать любую ссылку кнопкой прописываем стили к ссылкам. Пример для меню
Код <li class="button"><a href="/createbuttoncss.html" title="Создать кнопку и получить стиль CSS">Создать кнопку и получить стиль CSS</a></li>
Где и будет прописан стиль к простой ссылке
Вот так вот простая ссылка с
анкором может стать кнопкой
Те кто понимают толк в приготовлении кошек, а так же в CSS и HTML, могут отредактировать полученный код под себя.
|
| |
|
|
