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

Данный CSS повернет наше изображение на несколько градусов против часовой стрелки. Разделил по обычаю урок на три части.

Шаг 1. CSS вставка

#ex3 {
        width: 800px;
        margin: 0 auto;
}

#ex3 img {
        margin: 20px;
        border: 5px solid #eee;
        -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
        -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
        box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
}

#ex3 img:hover {
        -webkit-transform: rotate(-7deg);
        -moz-transform: rotate(-7deg);
        -o-transform: rotate(-7deg);
}

Шаг 2. HTML вставка

<!-- HTML вставляем для Jimdo как виджет -->
<div id="ex3">
     <img src="http://site.ru/image.jpg">
</div>

Добавлено: 17 Сентября 2013 04:39:10 Добавил: Андрей Ковальчук Нравится 0

Добавить