Веб-дизайн / CSS для начинающих. CSS кнопки это просто


'Веб-дизайн

Решил я начать новую серию статей – “CSS для начинающих”, надеюсь, будет полезно многим. Первый урок будет посвящен кнопкам…

Рисуем кнопку
Для начала нам необходимо нарисовать кнопку, вроде этой:
'Веб-дизайн


Для этого лучше всего нам подойдет инструмент “Rounded Rectangle Tool” в Photoshop, с него и начнем – нарисуем нечто вроде:
'Веб-дизайн


Изменяя параметр Radius вы сможете задать желаемое загругление кнопок ( в примере для наглядности контент полностью прозрачный (”Fill Opacity” => 0%)):

Веб-дизайн / CSS для начинающих. CSS кнопки это просто

Ширина объекта в данном примере 320px – т.е. я предполагаю, что кнопок большего размера не будет.
Границу выводим с помощью “Stroke” (из “Blending Options”), тип – градиент – от #000000 до #676767:

Веб-дизайн / CSS для начинающих. CSS кнопки это просто

Теперь не мешало бы и залить кнопочку градиентом (сверху указан параметр opacity, внизу цвет; инструмент “Gradient Overlay” из “Blending Options”):

Веб-дизайн / CSS для начинающих. CSS кнопки это просто

Результат:
'Веб-дизайн


Результат с залитой границей:
'Веб-дизайн

Если мы сделаем цветной фон:

'Веб-дизайн


Ну вот – кнопочка и готова, приступим к следующему шагу…

Простая CSS кнопка
Самый простой вариант – у нас все кнопки одного размера и одного/двух цветов, соответственно готовим небольшой “спрайт” на все случаи жизни (простым копированием слоя с кнопкой):
'Веб-дизайн

Теперь нам остается лишь слегка подправить CSS для таких кнопок:

.button {    cursor:pointer;    display:block;    height:70px;    width:320px;    line-height:70px;    text-align:center;    background-image:url('images/buttons.png');    background-repeat:no-repeat;}.button.green { background-position:0 0 } /* зеленая кнопка */.button.green:hover { background-position:0 -350px } /* активная зеленая кнопка *//* и т.д. */


Сам HTML код элементарен:

<a href="#" title="Label" class="button green">Label</a><a href="#" title="Label" class="button white">Label</a><a href="#" title="Label" class="button black">Label</a><a href="#" title="Label" class="button orange">Label</a><a href="#" title="Label" class="button red">Label</a>


Результат предсказуем:
&#039;Веб-дизайн


Резиновая CSS кнопка
Теперь усложним задачу – мы не имеем представления какого цвета будут кнопки, и какого размера, мы лишь предполагаем, что кнопки не будут больше 320px в ширину.
Строим DOM
Каждая кнопка будет представлять из себя элемент , обернутый в
  • . Элемент нам так же понадобится для создания резиновых кнопок, чтобы внести ясность приведу следующий скрин:
    Веб-дизайн / CSS для начинающих. CSS кнопки это просто


    Ну и сам HTML код:

    <ul class="small">    <li class="button"><a href="#" title="Label">Label<em></em></a></li>    <li class="button green"><a href="#" title="Label">Label<em></em></a></li>    <li class="button white"><a href="#" title="Label">Label<em></em></a></li>    <li class="button black"><a href="#" title="Label">Label<em></em></a></li>    <li class="button orange"><a href="#" title="Label">Label<em></em></a></li>    <li class="button red"><a href="#" title="Label">Label<em></em></a></li></ul>


    Примечание: можно использовать практически любые другие HTML теги, это дело вкуса, так что таким же образом вы можете изменить и элементы формы. Для упрощения HTML’а можно воспользоваться javascript’ом.

    Приведу пример:
    <script type="text/javascript">    $(document).ready(function(){        $('form :button, form :submit').each(function(){            var className = $(this).attr('class');            $(this).wrap('<div class="button '+className+'"></div>');            $(this).after('<em></em>');        });    });</script><form class="rubber" onsubmit="return false;">    <input type="button" class="green" title="Button" value="Button"/>    <input type="submit" class="red" title="Submit" value="Submit"/></form>


    Пишем CSS

    Читаем комментарии по коду:

    .button {    /*      у нас кнопка с закруглением - значит нам необходимо      у DOM элемента так же скруглить углы     */    border-radius:10px;    -moz-border-radius:10px;    -khtml-border-radius:10px;    -webkit-border-radius: 10px;    /*      внутренний элемент <a> должен быть смещен относительно <li>      на 20px - освобождаем место для <em>     */    padding-right:20px;    /*       данные элемент будет relative - т.е.       все элементы внутри него с абсолютным       позиционированием будут плясать от него    */    position:relative;}.button a, .button em{    /* ссылке и элементу em задаем одинаковое фоновое изображение */    background-image:url('css/images/button.png');    background-repeat:no-repeat;}.button a{    /*       ссылку делаем блочным элементом       задаем высоту элемента, а так же свойство       line-height - с его помощью мы выравниваем текст по вертикали    */    display:block;    height:52px;    line-height:52px;    outline:none;    color:#333;    font-size:18px;    text-indent:20px;    text-decoration:none;    text-align:center;    text-shadow: #333 0px -1px 0px;}.button em{    /*       внутренний элемент так же будет блочным       с размером 52х20, с абсолютной позиционированием    */    display:block;    position:absolute;    background-position:100% 0;    width:20px;    height:52px;    top:0px;    right:0px;}/* цвет шрифта для некоторых кнопок лучше поменять */.button.green a,.button.black a,.button.red a{    color:#fff;}/* тут указываем цвет наших кнопок */.button.green { background-color:#009e0f }.button.green:hover{ background-color:#068612 }.button.white{ background-color:#f0f0f0 }.button.white:hover{ background-color:#c0c0c0 }.button.black{ background-color:#000 }.button.black:hover{ background-color:#333 }.button.orange{ background-color:#ff7800 }.button.orange:hover{ background-color:#c60 }.button.red{ background-color:#f00 }.button.red:hover{ background-color:#c00 }


    Наблюдаем результат

    Сравним результат наших трудов в разных браузерах:

    Веб-дизайн / CSS для начинающих. CSS кнопки это просто


    Как вы можете заметить, есть несколько проблем с данной реализацией:
    полупрозрачность в IE6 не работает – можем докрутит хаки, но зачем – IE6 можно считать умершим
    box-radius в IE и Opera не работает – либо отказываемся от данной фичи, либо зарисовываем свободное пространство фоновым цветом (для IE так же есть грязный хак, см.: Curved corner (border-radius) cross browser)

    Кнопочки можно пощупать на демо, все сорцы доступны по следующей ссылке: http://anton.shevchuk.name/wp-content/uplo.../css-button.zip


    Уважаемые посетители,
    Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
    Обратная связь
    Наш специалист ответит вам в течении суток.


    4 августа 2009  0 14 104   css кнопки HTML уроки Версия для печати

  • Похожие публикации

    Как сделать профессиональную иконку человека в Фотошоп

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

    Блог им. TecHMeaT / Rounded corners HTML+CSS+jQuery

    Закругленные уголки опять волнуют хабравчан, за последние 24 часа наблюдал 2 интересных топика с различными способа закругления этих самых уголков. Решил показать то, чем пользуюсь сам. Сразу хочу... читать далее

    Web-разработка / Ссылка Поддержка браузерами модели RGBa

    Модель RGBa отличается от RGB тем, что позволяет дополнительно указать прозрачность цвета. Это тоже самое, что и привычное нам написание background и opacity. Но последнее делает прозрачным все... читать далее

    Быстрая перекраска вещей на сайте

    Существуют моменты когда необходимо предоставить пользователям выбор цвета какой либо вещи. Есть несколько способов выхода из этой ситуации. Здесь я покажу очень простой и незамысловатый способ... читать далее

    как создавать очень красивые и удобные текстовые кнопки

    Эта инструкция научит Вас, как создавать очень красивые и удобные текстовые кнопки (с эффектом нажатия), используя CSS.... читать далее

    Как добавить OpenID на сайт

    OpenID - несомненно, полезный механизм как для пользователей, так и для владельцев сетевых ресурсов. Пользователям он даёт: Возможность запомнить один логин и один пароль и использовать его везде... читать далее

    Прокомментировать


    @

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent

    Архив сайта

    Реклама на сайте Последние новости фк рома интер милан новости. . По материалам: Жерар Пике. "Барселона" - "Интер". 28.04.2010. . По материалам: Россия завершает год на седьмом месте в таблице коэффициентов УЕФА.