Последние обновления

Как сделать эффектное изображение с CSS?


Описание темы отсутсвует
Тема создана:
Ответов: 0
Просмотров: 338
Последний ответ:
Destroy
Администратор
131 7 0

Сегодня собираюсь рассказать в этом посте, о том как сделать при помощи CSS3 изображение, которое выглядит более эффектно. Это Polaroid эффект.

Для создания этого эффекта прибегнем к использованию CSS3 технологии. То есть, браузеры, которое не поддерживают данную технологию не будут понимать наш код так как нужно. Такие как IE 7, к примеру.

HTML код
Для начала начнем с простого html кода. В качестве изображения я избрал свою twitter иконку.

<div class='polaroid'>
<img src='http://lifewebs.ru/twitter.png' alt='twitter_icon' title='twitter_icon' />
</div>


Что просходит тем временем в CSS?

.polaroid {
position: relative;
background: #fff;
width: 200px;
padding: 7px;
margin: 10px;
text-align: center;
-moz-box-shadow: 1px 1px 3px #6666;
-moz-transform: rotate(-5deg);
-webkit-box-shadow: 1px 1px 3px #666;
-webkit-transform: rotate(-4deg);
box-shadow: 1px 1px 3px #222;
-o-transform: rotate(-4deg);
transform: rotate(-4deg);
}

Добавляется тень к нему с помощью свойств -webkit-box-shadow (для браузеров базированых на webkit), -moz-box-shadow (mozilla gecko как я понимаю), это box-shadow (для opera). Т.к свойства специфические пока что, для всех браузеров приходится изъясняться по разному. Opera опять таки не любит никаких префиксов, поэтому просто transform. Для остальных с префиксом -o-.

Здесь нет никаких скриптов, только CSS, и выглядит эффектно. Надеюсь вам это пригодится...

Отредактировано автором в
Зарегистрируйтесь или авторизуйтесь что бы писать