25
В этом посте хочу рассказать (показать, научить, описать, объяснить) как устроено мое портфолио.
Сразу скажу, что там используется чистый CSS и ничего более, выглядит очень симпатично.
Пример представлен в упрощенном виде, но можно поковыряться в коде и сделать отображение таким, какое больше нравится, можно выставить картинки по одной и дать их описание, а можно выстроить их следом друг за другом.
Такую штуку на CSS можно использовать при оформлении своих работ в портфолио, создании фотогалерей и т.д. Все красиво, все кроссбраузерно.
Ничего сложного… итак… разбираемся.
HTML-код одной такой картинки в упрощенном варианте выглядит следующим образом:
<div class=»port»>
<ul class=»img-menu»>
<li><a href=»#1″><img src=»»></a></li>
</ul>
</div>
Далее разбираемся с CSS.
.port {
/* Описываем высоту нашего блока*/
height: 237px;
/*задаем внутренние отступы, для того, чтобы при наведении на картинку, она не перекрывала ничего остального*/
padding: 33px 0 0 53px;
} ul {
/*разные браузеры по-разному относятся к листайтемам, поэтому выставляем для UL нулевой внешний отступ*/
margin: 0px;
/*… и внутренний отступ*/
padding: 0px;
} .img-menu li {
/*убираем листайтемы*/
list-style: none;
/*устанавливаем ширину блока с маленькой картинкой с учетом оступов для бэкграунда и границ*/
/*(ширина расчитывается как ширина маленькой картинки + отступ + граница(по 1px сверху и снизу))*/
width: 222px;
/*то же самое с высотой*/
height: 192px;
/*фон на ктором лежит маленькая картинка*/
background: #eee;
/*границы блока*/
border: 1px solid #888;
} .img-menu li a {
/*исправляем проблему убирания курсора с линка под оперой*/
display: block;
} .img-menu li a:hover {
/*устанавливаем относительную позицию для ссылки, в которой лежит картинка*/
position: relative;
} .img-menu li a img {
/*задаем ширину первоначально отображаемой маленькой картинки*/
width: 210px;
/*то же самое проделываем с высотой*/
height: 180px;
/*картинка под линком всегда обведена собственной границей, указывающей на то, что картинка является линком… убираем эту границу*/
border: 0;
/*устанавливаем отсупы от картинки*/
margin: 5px;
} .img-menu li a:hover img {
/*после наведения мышью на маленькую картинку будет появляться большая, устанавливаем ее размер*/
width: 300px;
/*то же самое проделываем с высотой*/
height: 260px;
/*устанавливаем абсолютную позицию всплывающей картинки картинки*/
position: absolute;
/*задаем отрицательную координату слева*/
left: -60px;
/*задаем отрицательную координату сверху*/
top: -40px;
/*границы блока*/
border: 1px solid #888;
/*устанавливаем отступы*/
padding: 5px;
/*фон на ктором лежит всплывающая картинка*/
background: #eee;
}
интересно сделано =)
реализую у себя в блоге)