Подпишись на наши RSS Уроки по Фотошоп , просто щелкнув по иконке.


Новинка! Узнайте о Самом Результативном Способе Изучения Фотошопа, Без Посещения Дорогих Курсов, Без Черно-Белых Самоучителей и Без Метода Тыка!

10 Часов Практических Уроков Записанных с Экрана Монитора с Подробными Аудио-Комментариями сделают из Вас настоящего Учителя Фотошоп!

Подробнее..


Создаём новогоднюю поздравительную открытку
Создаём сложное выделение волос
Превращаем современную фотографию в старую
Создаём разноцветную светящуюся спираль
Наносим естественную татуировку в Фотошопе


Как через CSS заставить кнопку реагировать на нажатие


В CSS есть определенное состояние ссылки, которое я не использую очень часто. По крайней мере, я не использовал его часто до этого, но сейчас я понимаю, что оно может пригодиться. Я говорю о состоянии ссылки "active".


Это состояние начинает работать, когда Вы нажимаете на ссылку. То есть, после нажатия оно активируется. Мы все пользуемся состояниями "hover" или "visited", а состояние "active" может быть полезным когда мы имеем дело со стилизоваными кнопками.


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


В Интернете такое встречается очень редко. Вы просто нажимаете на кнопку и ничего не происходит. Конечно в некотрых браузерах есть некоторые подобные свойства при отображении страниц, но это все равно не то. Дажи кнопки, которые благодаря фоновому рисунку выглядят выпуклыми, при нажатии на них никак не реагируют. Они остаются статическими и неотзывчивыми.


Так быть не должно. Просто используйте состоянием "active" для придания Вашим кнопкам "нажатого" или любого другого вида. Это выделит Ваш сайт или скрипт из общей массы, так как пользователям это будет напоминать их операционную систему.


Хватит болтать, давайте приступим к делу.


Допустим у нас есть кнопка, которая использует рисунок. Разметка будет выглядить так:


<a id="button"></a>


Добавим стилей. Наш CSS будет выглядеть так:


#button {
display: block;
width: 135px;
height: 43px;
background: url(button.png) no-repeat top;
}


Мы превращаем ссылку в блок, придавая ему высоту и ширину и задавая фоновое изображение. Кнопка будет выглядеть так:



Теперь нам необходимо прописать состояние "active":


#button:active {
background: url(button.png) no-repeat bottom;
}


Из-за того, что в моя картинка отображает два состояния, нам необходимо только сместить фоновий рисунок вниз, что и придаст ей вот такой вид:



Здесь находится картинка, о которой я говорю. А вот здесь демо (в Internet Explorer работать не будет - тут находится возможное решение проблемы).


Данный урок подготовлен для Вас командой сайта http://ruseller.com




Если хотите не упустить данный урок, добавьте его в закладки:  

Хотите освоить весь Фотошоп с нуля?

Рекомендую Вам курс "Учитель Фотошопа в видеоформате", который состоит из 2-х частей: теоретической и практической. Все уроки даны в видеоформате с подробным озвучиванием всех выполняемых действий. Именно такой подход в изучении, позволит Вам в максимально короткие сроки овладеть всеми аспектами работы в Фотошоп.

Узнать подробнее

Рейтинг:     Добавлено: 2009-04-03    Просмотров: 1648    Сайт-источник: www.usabilitypost.com

Оцените урок: 1   2   3   4   5   6   7   8   9   10    



Комментарии (0)


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

Ваше имя:

Комментарий:

Введите число показаное на картинке (проверка от автороботов):

  


 

Рассылка - "Лучшие видеоуроки Фотошоп даром". Подписавшись на неё, Вы 2 раза в месяц будете получать на свой почтовый ящик, ссылки на лучшие уроки по работе в программе Adobe Photoshop совершенно бесплатно!

Лучшие уроки по Фотошопу 2 раза в месяц!

Ваше имя на русском: *
Ваш Email адрес: *

Подпишитесь сейчас и получите доступ к разделу "Лучшие уроки Фотошопа".


Если Вы давно мечтаете о создании собственного сайта на движке Drupal, то советую Вам обратить внимание на мой новый видеокурс "Drupal - Как создать профессиональный сайт с нуля". Это более 100 видеоуроков из которых Вы узнаете, как создать 4 сайта различной напрвленности, сложности и функционнальности.

Узнать подробнее


Узнать размеры открытой фотографии можно, даже не выводя на экран диалоговое окно Image Size. Активизируйте инструмент Crop (Кадрирование) и щелкните по кнопке Front Image (Изображение) на панели опций. В полях Width (Ширина), Height (Высота) и Resolution (Разрешение) будут представлены соответствующие данные.

Узнать больше


Внимание!
X
Хотите Получать 2 Видеоурока по Работе В Программе Фотошоп ЕЖЕМЕСЯЧНО?
Ваш e-mail: *
Ваше имя: *