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

>Ф А Й Л Ы

>С Т А Т Ь И

>Р Е Ф Е Р А Т Ы

>Ф О Р У М

>О Т З Ы В Ы

>Т Е С Т Ы

>F l a s h И Г Р Ы

>Ф О Т О Ш О П


Советуем...
Оптика, атомная физика - Савельев И.В.
Очень хороший учебник по физике, все подробно и понятно описывается, все темы по Оптике и атомной физике. Советую качать тем, кто начал учить только за день до экзамена.

Шпора Все формулы по физике
На одном листе А4 размещены почти все основные формулы по физике. Если лень самому делать шпоры, то качайте этот файл.

Основы работы с CSS
Курс посвящен практике применения языка гипертекстовой разметки с применением каскадных таблиц стилей (Cascade Style Sheets). На большом количестве примеров рассматриваются основные приемы использования CSS.

Шпора по математике.
В предверии ЕГЭ по математике выкладываю шпору по алгебре. Конечно не весь материал, но помочь поможет.
Графики функций;  таблицы производных и интегралов; таблица синусов, косинусов, тангенсов и котангенсов; тригонометрические уравнения; и другое......



Опрос
Вы учитесь в СУЗе/ВУЗе
Всего ответов: 244

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


код кнопки:


Связь с админом
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
Просмотров: 3750
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Разделы новостей
Мои статьи [25]
Учебные статьи [9]
Заработок [53]
ВЕБ-мастеру [0]
Online-сервисы [0]
Интересное [0]

Статистика

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


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

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

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