бесплатные списки прокси
[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
форум webanet » Помоги себе сам компьютеры и интернет » Вы решили создать свой сайт? » Генератор стилей для кнопок CSS (сервис позволяющий создать кнопку стилями)
Генератор стилей для кнопок CSS
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>


Где
Код
class="button"
и будет прописан стиль к простой ссылке
Вот так вот простая ссылка с
анкором может стать кнопкой

Те кто понимают толк в приготовлении кошек, а так же в CSS и HTML, могут отредактировать полученный код под себя.
Прикрепления: 7195098.gif(36.6 Kb)
 
форум webanet » Помоги себе сам компьютеры и интернет » Вы решили создать свой сайт? » Генератор стилей для кнопок CSS (сервис позволяющий создать кнопку стилями)
  • Страница 1 из 1
  • 1
Поиск: