Опубликовано автор в категориях Верстальщику.

your_btn2
В предыдущей статье я рассказал о скрипте, который заменял стандартные элементы формы input и botton на группу элементов для дизайнерского оформления кнопок. Недостатком скрипта можно было то, что его распространение и использование ограничивалось лицензией.

Сегодня я расскажу о не менее эффективном альтернативном способе дизайнерского оформления кнопок, плюсом которого перед вчерашним скриптом является то, что он бесплатен, гибок, и есть интегрированное решение для jQuery.

Данный метод, который был предложен автором блога http://monc.se/, позволяет создавать динамические кнопки с помощью CSS и PNG, управлять прозрачностью и цветом фона. При этом данный метод не работает на 100% в IE 6 но вполне приемлемо упрощается и при этом кнопки не теряют масштабируемость. Под масштабируемостью подразумевается размер шрифта и кнопок и их изменение в любом направлении.

Данный метод решает ряд проблем и недостатков других подобных приемов:

  • Кнопки не масштабируются по вертикали
  • HTML содержит много ненужных тегов
  • Вам нужно несколько изображений для углов и границ
  • Вы не можете применить эффект :hover без каких-либо изысканных решений в коде
  • Вам нужно несколько изображений для различных фоновых цветов

В этом примере для добавления теней и уголков для кнопок будут использоваться PNG изображения . PNG предпочтителен потому, что у вас есть 256 уровней альфа прозрачность по сравнению с использованием только одного в GIF. К сожалению, в Internet Explorer 6 и ниже нельзя реализовать PNG прозрачность, особенно в качестве фонового изображения в CSS, за исключением случаев, с использованием ряда фильтров Microsoft и специальных JavaScript приемов. Но даже в этом случае могут возникнуть проблемы. К счастью, IE7 поддерживает PNG с альфа каналами, а это значит, что приемы описанные в этом примере можно смело использовать в проектах, поскольку, в любом случае, они они красиво упрощаются в «древних» браузерах.

И так, что мы получаем:

  • Полная масштабируемость по всем направлениям
  • Использование одного PNG изображения для кнопки без дублирования
  • Возможность изменения цвета фона за изображением (также на :hover)
  • Чистую HTML-разметку
  • Простой JavaScript для изменения DOM
  • Оформление полностью с помощью CSS
  • Возможность оформлять ссылки в виде кнопок
  • Возможность упрощенного вывода для браузеров без картинок или javscript

Чего мы не получим: полную поддержку в IE6. Но кнопки будут красиво упрощены, так что пользователи IE6 увидят ту же кнопку, но без изображений PNG.

HTML

Наиболее оптимальной разметкой, которая бы не выбилась за рамки семантических норм, и позволила бы реализовать задуманный функционал в этом примера стала разметка типа:

<a href="#"><i></i><span><span></span><i></i>Button</span></a>

Выглядит не очень. Но если вы будете использовать подобный HTML код, то вам не нужно будет использовать дополнительный JavaScript для ссылок. Конструкции для которых будет применяться стиль должны иметь класс .btn:

<a href="#" class="btn">Button</a>

Или так:

<input type="Button" value="Submit this form" class="btn" />

JavaScrpt

Давайте добавим небольшой JavaScript, для конвертации исходных элементов. Этот сценарий вышел довольно вместительным (60 строк), поскольку было необходимо включить некоторые функции для обработки событий и прочее. Но основной принцип заключается в том, что он будет захватывать все ссылки и элементы ввода с классом «btn», а затем конвертировать их в ссылки (если они являются элементами ввода) и, добавлять нужные элементы разметки. Позитивным аспектом замены элементов ввода с помощью JavaScript, является то, что они по-прежнему ведут себя как элементы ввода. Кроме того, они будут выводиться как обычные кнопки, если JavaScript выключен. Посмотреть скрипт можно по этой ссылке Для вызова скрипта на вашей странице просто добавьте ссылку на скрипт в <head> вашей веб-страницы.

Гэри Холл адаптировал этот скрипт для jQuery. Поэтому любой, кто уже использует этот фреймворк может попробоватьвать этот легкий скрипт:

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
 $('.btn').each(function(){
 var b = $(this);
 var tt = b.text() || b.val();
 if ($(':submit,:button',this)) {
 b = $('<a>').insertAfter(this). addClass(this.className).attr('id',this.id);
 $(this).remove();
 }
 b.text('').css({cursor:'pointer'}). prepend('<i></i>').append($('<span>').
 text(tt).append('<i></i><span></span>'));
 });
 });

Графика

Следующий шаг состоит в том, чтобы создать пару изображений PNG. В примере использовано два изображения, общее для фона с градиентом и диагональными линиями, и крупное для кнопки с контурами и белыми углами для основы кнопки. Они должны быть достаточно большими, если вы хотите, получить вместительную кнопку:
shadebtn2

CSS

Далее нам нужно обратиться к CSS. Основная трудность здесь состояла в том, чтобы разместить изображения для четырех углов с помощью CSS без дублирования и наложения. Почему без наложения? Допустим, у вас есть изображение PNG заполнены на 50% черным и предположим оно накладывается на себя же или другое изображение с использованием метода «раздвижных дверей» или подобного, тогда в местах перекрытия мы получим 75% черного. Не хорошо. В итоге, было применено следующее решение:

1
2
3
4
5
6
.btn { display: block; position: relative; background: #aaa; padding: 5px; float: left; color: #fff; text-decoration: none; cursor: pointer; }
.btn * { font-style: normal; background-image: url(btn2.png); background-repeat: no-repeat; display: block; position: relative; }
.btn i { background-position: top left; position: absolute; margin-bottom: -5px; top: 0; left: 0; width: 5px; height: 5px; }
.btn span { background-position: bottom left; left: -5px; padding: 0 0 5px 10px; margin-bottom: -5px; }
.btn span i { background-position: bottom right; margin-bottom: 0; position: absolute; left: 100%; width: 10px; height: 100%; top: 0; }
.btn span span { background-position: top right; position: absolute; right: -10px; margin-left: 10px; top: -5px; height: 0; }

По умолчанию класс .btn имеет свойство background-color: #aaa;. Этот фон будет использоваться в том случае, если к кнопке не будут применены свойства указанные в CSS ниже. Если вы уже объявили в свои CSS line-height ранее, то вам стоит откорректировать правило .btn для IE7. Кроме того, обратите внимание на вторую строку и правило background-image: url(btn2.png). Это правило определяет вашу картинку, которая используется для оформления углов кнопок.

В принципе, мы уже можем использовать наш код. Но сначала нам нужно поставить «грабли» для Internet Explorer 6, добавив следующие правила в код. Здесь правила для IE6 внедрены с помощью звездочки, но для валидности вы можете вынести код в отдельный файл через условные комментарии:

* html .btn span, * html .btn i { float: left; width: auto; background-image: none; cursor: pointer; }

Этот правило избавит нас от багов в IE6, а также уберет картинку для углов из фона, которая в IE 6 будет иметь некрасивый серый фон.

Что дальше?

Теперь почти все готово и мы можем попробовать применить наш метод с помощью использования таких объектов:

<a href="#" class="btn blue">This is a blue button</a>
<a href="#" class="btn green">This should be a green button</a>
<input type="Button" value="Submit this form" class="btn pink" />

Почти хорошо, но для того чтобы как-то разнообразить кнопки можно добавить дополнительные классы оформления, а также стили для hover и active:

 .btn.blue { background: #2ae; }
 .btn.green { background: #9d4; }
 .btn.pink { background: #e1a; }
 .btn:hover { background-color: #a00; }
 .btn:active { background-color: #444; }
 .btn[class] { background-image: url(shade.png); background-position: bottom; }

Последняя строка содержит в себе ссылку на изображение с тенью для фона. Естественно, вы можете использовать разные изображения для разных классов. Селектор [class] использовался для того, чтобы скрыть это изображение от IE6. Этот код в современных браузерах должен отобразить нечто похожее на то, что вы видите на картинке ниже (обратите внимание на то, что линии и нижняя тень были добавлены в коде выше):

btns

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

Для того, чтобы компенсировать упрощение кнопок в IE6 мы можем добавить бордеры кнопкам. Здесь специальные стили для IE 6 исключены звездочками, но для валидности опять же можно использовать условные комментарии:

 * html .btn { border: 3px double #aaa; }
 * html .btn.blue { border-color: #2ae; }
 * html .btn.green { border-color: #9d4; }
 * html .btn.pink { border-color: #e1a; }
 * html .btn:hover { border-color: #a00; }

Примерно так кнопки будут выглядеть в IE 6:

ie6

Кучу примеров этого метода можно посмотреть по этой ссылке.

Постовой:

В условиях кризиса очень важен правильный, доступный и качественный бухгалтерский учет.

А для того, чтобы вести правильный бухгалтерский учет важно иметь объективную и свежую информацию и прогнозы курсов валют.

Ну, а когда все учтено и можно отдохнуть, то самое время посмотреть очень антикризисный сериал остаться в живых.

5 комментариев к записи “Оформление кнопок в форме — 2”

  1. Hiway

    Пузат, на счет диза — это сугубо дело вдохновения и пожеланий. Стоимость диза от 200$. Что касается редизайна, то опять же по стоимости ориентируемся от диза, а если нужна и тема на WordPress, то 80$. Где-то так.

    Ответить

Оставить комментарий

  • (не будет показан)