 CSS подписи для картинок |
 |
 |
|
 |
 |
 |
 |
 |
  |
| INDIGO |
 20/08/10 - 08:10 Сообщение #1
|
Активный участник
|
Изображения занимают едва ли не ключевую роль в вебдизайне. Существует масса способов оформить картинку, некоторые из них весьма банальны, но есть и такие, которые смотрятся очень интересно. Несколько таких способов мы уже рассматривали ранее, и сегодня я хочу поделиться еще двумя оригинальными вариациями на тему оформления изображений.
Вернее будет сказать, это способ формления больше описания к картинке, чем ее самой, но надо отметить очень эффектный способ. 1. Изображение с постоянно видимым описанием. HTML - заключаем картинку и описание в div и прописываем class="img-desc" <div class="img-desc"> <img src="sample.jpg" alt="" /> <cite>Симпатичный диванчик. Устраивайтесь по-удобнее... </cite> </div> CSS .img-desc { position: relative; display: block; height:335px; width: 575px; } .img-desc cite { background: #111; filter:alpha(opacity=55); opacity:.55; color: #fff; position: absolute; bottombottom: 0; leftleft: 0; width: 555px; padding: 10px; border-top: 1px solid #999; } Вот, что что у нас должно получиться:  2. Изображение с всплывающим описанием HTML <div class="imgteaser"> <a href="#"> <img src="Daim1.jpg" alt="Daim Graffiti" /> <span class="more">» Всем сюда...</span> <span class="desc"> <strong>ПРИЕХАЛИ</strong> Наша турфирма доставит вас на край мира с незабываемыми ощущениями. </span> </a> </div> CSS .imgteaser { margin: 0; overflow: hidden; float: leftleft; position: relative; } .imgteaser a { text-decoration: none; float: leftleft; } .imgteaser a:hover { cursor: pointer; } Здесь мы добавляем изображению бордюр, тоесть border .imgteaser a img { float: leftleft; margin: 0; border: none; padding: 10px; background: #fff; border: 1px solid #ddd; } Теперь разберемся с кнопкой "Всем сюда" .imgteaser a .more { position: absolute; rightright: 20px; bottombottom: 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; bottombottom: 11px; leftleft: 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 .imgteaser a .desc { display: none; } .imgteaser a:hover .more { visibility: hidden;} После всех этих манипуляций вот, что должно у нас получиться: До наведения:  Когда мы навели на текст "Всем сюда...":  -------------------- И всё-таки жизнь прекрасна |
 |
Публикаций: 395 [ Просмотреть все публикации ] 
Комментариев: 86 [Последние комментарии]
|
| Hut |
17/08/11 - 13:57 Сообщение #2
|
Активный участник
Предупреждения: 
|
Интересно. Давно так хотел на Ucoz сделать, но он уже в прошлом. На DLE поставлю обязательно. Спасибо )
|
| |
Публикаций: 0 [ Просмотреть все публикации ] Комментариев: 3 [Последние комментарии] |
 |
1чел. читают эту тему (гостей: 1)
Пользователей: 0
| Сейчас: 18/05/12 - 18:44 |
pluSoft.ru © 2011
Наверх
- ]]>
]]> - ]]>]]>
-
]]>
]]>