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

>Ф А Й Л Ы

>С Т А Т Ь И

>Р Е Ф Е Р А Т Ы

>Ф О Р У М

>О Т З Ы В Ы

>Т Е С Т Ы

>F l a s h И Г Р Ы

>Ф О Т О Ш О П


Советуем...
Текстовые файлы Паскаль
Дан текстовый файл с изображениями целых чисел. В выходной файл поместить обратные величины двухзначных чисел. Пример: для 26 – 0.038, для 87 – 0.011, и т.д. На экран вывести количество чисел во входном файле, количество чисел в выходном файле, размер входного и выходного файла в байтах.

CDhack cs 1.6 - Самый мощный чит для CS ( Counter Strike )
Очень мощный чит для CS1.6 Возможность видеть противника сквозь стены, самонаведение в голову и другие части тела, автоматическая стрельба по своим или по противнику, подсветка оружия и других боеприпасов, отключение отдачи, все становиться светлым, даже на плохо или не освещенных участках карты, луч, показывающий, куда направлен прицел, маленькая точка в центре прицела и многое другое. Скачать чит для Counter Strike Контры бесплатно без регистрации CDhack

Mat JV v0.15
 Программа Mat JV предназначена для решения задач линейной алгебры. Основной
особеннстью Mat JV является пошаговое решение задач.

    - Решение системы алгебраических уравнений методом Гаусса.
    - Решение системы алгебраических уравнений по правилу Крамера.
    - Нахождение определителя матрицы.
    - Вычисление математических выражений.

    Решение может быть получено как численно так и в дробном виде.

Основные функции работы с матрицами С++
Приемы и примеры работы с матрицами на С++. Это и транспонирование матрицы на с++, и возведение матрицы в квадрат на с++, и приведение матрицы к диагональному виду на с++.


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

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


код кнопки:


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

Статистика

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


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

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

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