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


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

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

Подробнее..


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


Вывод заголовков изображений при наведении мышки


Демо версия находится здесь. Все файлы скачать можно тут.


HTML


Это комбинация заголовка изображения и техники "тизера". Я сделал так, чтобы заголовок рисунка был доступен при наведении на ссылку. Чтобы это выглядело привлекательнее, я решил добавить кнопку "Подробнее", которая подскажет пользователям, что здесь можно получить больше информации о рисунке.


<div class="imgteaser">
<a href="#">
<img src="Daim1.jpg" alt="Daim Graffiti" />
<span class="more">&raquo; Подробнее</span>
<span class="desc">
<strong>DAIM 2002</strong>
Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip.
</span>
</a>
</div>


CSS


Для начала я создам основной слой вместе со свойствами hover:


.imgteaser {
margin: 0;
overflow: hidden;
float: left;
position: relative;
}
.imgteaser a {
text-decoration: none;
float: left;
}
.imgteaser a:hover {
cursor: pointer;
}


Теперь добавим эффект двойной границы для рисунка:


.imgteaser a img {
float: left;
margin: 0;
border: none;
padding: 10px;
background: #fff;
border: 1px solid #ddd;
}


Теперь давайте оформим кнопку "Подробнее" и вывод заголовка:


.imgteaser a .more {
position: absolute;
right: 20px;
bottom: 20px;
font-size: 1.2em;
color: #fff;
background: #000;
padding: 5px 10px;
filter:alpha(opacity=65);
opacity:.65;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}
.imgteaser a:hover .desc{
display: block;
font-size: 1.2em;
padding: 10px 0;
background: #111;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
color: #fff;
position: absolute;
bottom: 11px;
left: 11px;
padding: 10px;
margin: 0;
width: 566px;
border-top: 1px solid #999;
}
.imgteaser a:hover .desc strong {
display: block;
margin-bottom: 5px;
font-size:1.5em;
}


По умолчанию мы хотим, чтобы кнопка "Подробнее" была видима и при наведении мышки она исчезала, и вместо нее показывался заголовок картинки. По какой-то причине IE6 не прячет кнопку при использовании display: none;, но visibility:hidden; работает отлично.


.imgteaser a .desc { display: none; }
.imgteaser a:hover .more { visibility: hidden;}


Все готово. Эта техника может быть использована при создании галерей изображений, в которых Вам необходимо объяснять детали изображений. Пример подобной галереи Вы можете найти тут. Мне очень нравится, как они выводят количесвто комментариев при наведении на картинку.


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




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

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

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

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

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

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



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


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

Ваше имя:

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

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

  


 

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

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

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

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


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

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


Вы можете в любое время восстановить исходную рабочую среду, выполнив команду меню Window > Workspace > Default Workspace (Окно > Рабочая среда > Рабочая среда по умолчанию). Неиспользуемые рабочие среды легко удалить командой Window > Workspace > Delete Workspace (Окно > Рабочая среда > Удалить рабочую среду).

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


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