Форма входа

mvcreative

Старая форма входа

  • Страница 1 из 1
  • 1
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » CSS подписи для картинок
CSS подписи для картинок
cechДата: Пятница, 02.07.2010, 14:40 | Сообщение # 1
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Изображения занимают едва ли не ключевую роль в вебдизайне. Существует масса способов оформить картинку, некоторые из них весьма банальны, но есть и такие, которые смотрятся очень интересно. Сегодня я хочу поделиться еще двумя оригинальными вариациями на тему оформления изображений.


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


1. Изображение с постоянно видимым описанием.


HTML - заключаем картинку и описание в div и прописываем class="img-desc"


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



CSS


Code
.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


Code
<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


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



Здесь мы добавляем изображению бордюр, тобишь border


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



Теперь разберемся с кнопкой "Всем сюда"


Code
.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


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



После всех этих манипуляций вот, что должно у нас получиться:
До наведения:





Когда мы навели на текст "Всем сюда...":





 
вверх
rybkasДата: Пятница, 02.07.2010, 17:39 | Сообщение # 2
Шептун
Группа: Пользователи
Пользователь №: 22
Сообщений: 36
Награды: 0
Репутация: 0
Статус: оффлайн
Очень интересно)))
Спасибо за урок
 
вверх
saynovДата: Воскресенье, 04.07.2010, 21:54 | Сообщение # 3
Болтун
Группа: Пользователи
Пользователь №: 77
Сообщений: 75
Награды: 0
Репутация: 0
Статус: оффлайн
оригинальные картинки-понравились xD
 
вверх
Angry4178Дата: Суббота, 10.07.2010, 00:51 | Сообщение # 4
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
cech, Хех,прикольно!Часто используется на сайтах-визитках или блогах.


 
вверх
nDiviDДата: Суббота, 10.07.2010, 18:24 | Сообщение # 5
Чего так орать?
Группа: Проверенные
Пользователь №: 21
Сообщений: 614
Награды: 11
Репутация: 39
Статус: оффлайн
Действительно удобно, давно искал, спасибо


Web-create пати uNiceGroup =) Порно бесплатно!
 
вверх
saynovДата: Среда, 14.07.2010, 02:37 | Сообщение # 6
Болтун
Группа: Пользователи
Пользователь №: 77
Сообщений: 75
Награды: 0
Репутация: 0
Статус: оффлайн
2 вопроса:
КСС нужно "заковывать" в отдельный файл, заливать его на сайт, а в ХТМЛ указывать ссылку? Или-как иначе, при добавление поста в блоге осуществить такое?

В 3-м варианте нужно наводить на надпись для смены текста, а можно чтобы переход осуществлялся по наведению на картинку?
fear

 
вверх
cechДата: Среда, 14.07.2010, 07:49 | Сообщение # 7
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
saynov,
1. css безразницы, но лучше конечно в отдельный файл...
2. нет, уже сделано так как есть и что-то сейчас переделывать... Да и вообще только с наведения переход осуществляется такого по-моему не бывает.



 
вверх
saynovДата: Среда, 14.07.2010, 12:08 | Сообщение # 8
Болтун
Группа: Пользователи
Пользователь №: 77
Сообщений: 75
Награды: 0
Репутация: 0
Статус: оффлайн
Quote (cech)
лучше конечно в отдельный файл

сылку на него в ХТМЛ добавлять не надо?
Quote (cech)
только с наведения

Ну я и спрашиваю про него, только не на текст, а на картинку целиком. Может стоит просто где-то отредактировать цифры?
 
вверх
cechДата: Среда, 14.07.2010, 14:01 | Сообщение # 9
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
saynov, ты че? как браузер прочитай твой css если он нигде не объявлен? сам подумай...
И вообще нельзя сделать так чтобы при наведении на картинку переходило куда либо! Ты по-моему фантастики начитался!)



 
вверх
saynovДата: Воскресенье, 18.07.2010, 19:35 | Сообщение # 10
Болтун
Группа: Пользователи
Пользователь №: 77
Сообщений: 75
Награды: 0
Репутация: 0
Статус: оффлайн
cech, у меня очень жесткий случай, ты не мог бы мне все пошагово расписать, куда этот код КСС класть, в какой файл именно, в какое место, что делать потом?

Добавлено (18.07.2010, 19:35)
---------------------------------------------
кто поможет-дам плюс и награду, если сумею tongue

 
вверх
Белый-ЛотосДата: Вторник, 07.12.2010, 18:12 | Сообщение # 11
Молчун
Группа: Пользователи
Пользователь №: 468
Сообщений: 19
Награды: 0
Репутация: 0
Статус: оффлайн
У меня вопрос по первому варианту...CSS код мы суем в сам CSS верх или вниз?
 
вверх
cechДата: Вторник, 07.12.2010, 19:29 | Сообщение # 12
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Белый-Лотос, в смысле?


 
вверх
Белый-ЛотосДата: Вторник, 07.12.2010, 22:31 | Сообщение # 13
Молчун
Группа: Пользователи
Пользователь №: 468
Сообщений: 19
Награды: 0
Репутация: 0
Статус: оффлайн
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 }

Вот этот код мы куда вставляем? в нижнюю часть КСС или верхнюю?

 
вверх
cechДата: Вторник, 07.12.2010, 23:08 | Сообщение # 14
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Белый-Лотос, blink а какая разница? хоть в середину, можешь вставить в теги style если так хочется)


 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » CSS подписи для картинок
  • Страница 1 из 1
  • 1
Поиск: