Делаем кнопки в Photoshop и CSS - Мои статьи - Статьи - Помощь студенту
Помощь студентуСтатьиМои статьиДелаем кнопки в Photoshop и CSS
11 Декабря 2016, Воскресенье
01:22
>>> Качественная веб-разработка <<<
01:22
Меню сайта
>Г Л А В Н А Я

>Ф А Й Л Ы

>С Т А Т Ь И

>Р Е Ф Е Р А Т Ы

>Ф О Р У М

>О Т З Ы В Ы

>Т Е С Т Ы

>F l a s h И Г Р Ы

>Ф О Т О Ш О П


Советуем...
Работа с массивами с++ (2)
Заменить наименьшие элементы в массиве на среднее арифметическое его значений. Создать функции для вычисления среднего арифметического элементов массива и определения его минимума.

Algebry v.1.6
Algebry v.1.6 - Универсальная программа по математике: решение уравнений, различные вычисления и многое другое.
- Построение графиков
- Решение геометрических задач
- Операции с дробями
- Решение уравнений

Работа с Турбо Паскалем #2/2
Хороший учебник по языку Паскаль. Очень много полезной информации, все описывается без лишних слов.

Первая часть.

Архив со шпорами по мат. анализу, линейной алгебре и аналитической геометрии
МЕГА-пак шпор по Высшей математики. В этом архиве Вы точно найдете то, что Вам необходимо.


Опрос
Зацените дизайн сайта
Всего ответов: 370

Сотрудничество
Поставьте себе на сайт и сообщите мне


код кнопки:


Связь с админом
395799449
Написать админу
Оставить отзыв


Статьи
Главная » Статьи » Мои статьи

Делаем кнопки в Photoshop и CSS

Рисуем кнопку

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

CSS Button Preview

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

Button in Photoshop - Step 0

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

Button in Photoshop - Step 1

Ширина объекта в данном примере 320px – т.е. я предполагаю, что кнопок большего размера не будет.

Границу выводим с помощью “Stroke” (из “Blending Options”), тип – градиент – от #000000 до #676767:

Button in Photoshop - Step 2

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

Button in Photoshop - Step 4

Результат:

Button in Photoshop - Step 3

Результат с залитой границей:

CSS Button Photoshop Result

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

CSS Button Photoshop Result
CSS Button Photoshop Result
CSS Button Photoshop Result

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

Простая CSS кнопка

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

CSS Buttons Sprite

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

01..button {
02.    cursor:pointer;
03.    display:block;
04.    height:70px;
05.    width:320px;
06.    line-height:70px;
07.    text-align:center;
08.    background-image:url('images/buttons.png');
09.    background-repeat:no-repeat;
10.}
11..button.green { background-position:0 0 } /* зеленая кнопка */
12..button.green:hover { background-position:0 -350px } /* активная зеленая кнопка */
13./* и т.д. */

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

1.<a href="#" title="Label" class="button green">Label</a>
2.<a href="#" title="Label" class="button white">Label</a>
3.<a href="#" title="Label" class="button black">Label</a>
4.<a href="#" title="Label" class="button orange">Label</a>
5.<a href="#" title="Label" class="button red">Label</a>

Результат предсказуем:

CSS Button Sprite Result

Резиновая CSS кнопка

Теперь усложним задачу – мы не имеем представления какого цвета будут кнопки, и какого размера, мы лишь предполагаем, что кнопки не будут больше 320px в ширину.

Строим DOM

Каждая кнопка будет представлять из себя элемент <a>, обернутый в <li>. Элемент <em> нам так же понадобится для создания резиновых кнопок, чтобы внести ясность приведу следующий скрин:

HTML Button

Ну и сам HTML код:

1.<ul class="small">
2.    <li class="button"><a href="#" title="Label">Label<em></em></a></li>
3.    <li class="button green"><a href="#" title="Label">Label<em></em></a></li>
4.    <li class="button white"><a href="#" title="Label">Label<em></em></a></li>
5.    <li class="button black"><a href="#" title="Label">Label<em></em></a></li>
6.    <li class="button orange"><a href="#" title="Label">Label<em></em></a></li>
7.    <li class="button red"><a href="#" title="Label">Label<em></em></a></li>
8.</ul>

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

01.<script type="text/javascript">
02.    $(document).ready(function(){
03.        $('form :button, form :submit').each(function(){
04.            var className = $(this).attr('class');
05. 
06.            $(this).wrap('<div class="button '+className+'"></div>');
07.            $(this).after('<em></em>');
08.        });
09.    });
10.</script>
11.<form class="rubber" onsubmit="return false;">
12.    <input type="button" class="green" title="Button" value="Button"/>
13.    <input type="submit" class="red" title="Submit" value="Submit"/>
14.</form>

Пишем CSS

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

01..button {
02.    /*
03.      у нас кнопка с закруглением - значит нам необходимо
04.      у DOM элемента так же скруглить углы
05.     */
06.    border-radius:10px;
07.    -moz-border-radius:10px;
08.    -khtml-border-radius:10px;
09.    -webkit-border-radius: 10px;
10. 
11.    /*
12.      внутренний элемент <a> должен быть смещен относительно <li>
13.      на 20px - освобождаем место для <em>
14.     */
15.    padding-right:20px;
16. 
17.    /*
18.       данные элемент будет relative - т.е.
19.       все элементы внутри него с абсолютным
20.       позиционированием будут плясать от него
21.    */
22.    position:relative;
23.}
24..button a, .button em{
25.    /* ссылке и элементу em задаем одинаковое фоновое изображение */
26.    background-image:url('css/images/button.png');
27.    background-repeat:no-repeat;
28.}
29..button a{
30.    /*
31.       ссылку делаем блочным элементом
32.       задаем высоту элемента, а так же свойство
33.       line-height - с его помощью мы выравниваем текст по вертикали
34.    */
35.    display:block;
36.    height:52px;
37.    line-height:52px;
38. 
39.    outline:none;
40.    color:#333;
41.    font-size:18px;
42.    text-indent:20px;
43.    text-decoration:none;
44.    text-align:center;
45.    text-shadow: #333 0px -1px 0px;
46.}
47..button em{
48.    /*
49.       внутренний элемент так же будет блочным
50.       с размером 52х20, с абсолютной позиционированием
51.    */
52.    display:block;
53.    position:absolute;
54.    background-position:100% 0;
55.    width:20px;
56.    height:52px;
57.    top:0px;
58.    right:0px;
59.}
60./* цвет шрифта для некоторых кнопок лучше поменять */
61..button.green a,
62..button.black a,
63..button.red a
64.{
65.    color:#fff;
66.}
67./* тут указываем цвет наших кнопок */
68..button.green { background-color:#009e0f }
69..button.green:hover{ background-color:#068612 }
70..button.white{ background-color:#f0f0f0 }
71..button.white:hover{ background-color:#c0c0c0 }
72..button.black{ background-color:#000 }
73..button.black:hover{ background-color:#333 }
74..button.orange{ background-color:#ff7800 }
75..button.orange:hover{ background-color:#c60 }
76..button.red{ background-color:#f00 }
77..button.red:hover{ background-color:#c00 }

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

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

CSS Button Compare Result



Источник: http://anton.shevchuk.name/html-and-css/css-for-beginners-simple-css-buttons/
Категория: Мои статьи | Добавил: DiP_admin (16 Августа 2009) | Автор: Дмитрий E W
Просмотров: 3411
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Разделы новостей
Мои статьи [25]
Учебные статьи [9]
Заработок [53]
ВЕБ-мастеру [0]
Online-сервисы [0]
Интересное [0]

Статистика

Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Все пользователи

Яндекс цитирования Rambler's Top100 Каталог сайтов OpenLinks.RU Каталог сайтов iLinks.RU Каталог сайтов :: Развлекательный портал iTotal.RU Каталог сайтов Bi0 Каталог сайтов Всего.RU