CSS подписи для картинок

Главная » Файлы » Скрипты для Юкоз | Новые скрипты для Юкоз | Скрипты на Юкоз

Изображения занимают едва ли не ключевую роль в вебдизайне. Существует масса способов оформить картинку, некоторые из них весьма банальны, но есть и такие, которые смотрятся очень интересно. Несколько таких способов мы уже рассматривали ранее, и сегодня я хочу поделиться еще двумя оригинальными вариациями на тему оформления изображений.

Вернее будет сказать, это способ формления больше описания к картинке, чем ее самой, но надо отметить очень эффектный способ.

1. Изображение с постоянно видимым описанием.
HTML - заключаем картинку и описание в div и прописываем class="img-desc"

Code

1. <div class="img-desc">
  2. <img src="sample.jpg" alt="" />
  3. <cite>Симпатичный диванчик. Устраивайтесь по-удобнее... </cite>
  4. </div>

В CSS:

Code

1. .img-desc {
  2. position: relative;
  3. display: block;
  4. height:335px;
  5. width: 575px;
  6. }
  7. .img-desc cite {
  8. background: #111;
  9. filter:alpha(opacity=55);
  10. opacity:.55;
  11. color: #fff;
  12. position: absolute;
  13. bottombottom: 0;
  14. leftleft: 0;
  15. width: 555px;
  16. padding: 10px;
  17. border-top: 1px solid #999;
  18. }

Ваша оценка:

Рейтинг: 5.0 Всего:1 Добавил: Михалыч

« Назад

Другие новости

Поделиться ссылкой

Ссылка:
BB-code:
HTML:

Комментарии

Всего комментариев: 0