»

 Будь в курсе событий:

urok3 css effekti s izobrajeniyami

Урок 3. CSS эффекты с изображениями
Урок 3. CSS эффекты с изображениями

Третий и последний в своей серии урок по созданию css эффектов при наведении на изображение. Рассмотрим эффект разворота.

Урок 3. CSS эффекты с изображениями

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

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

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

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

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

Шаг 3. Живой пример

Всем, кому пригодился данный урок, оставляйте свои комментарии. До встречи!

Оставить комментарий

Комментарии: 3
  • #1

    Хоткин Андрей Анатольевич (Среда, 09 Октябрь 2013 00:12)

    если можно, то подробнее куда засунуть CSS вставку, пробовал по http://farengate.jimdo.com/2011/06/03/css-integration/
    не получилось, как отдельный файл сделать - не знаю. с хтмл все понятно он ссылается на модуль css...с которым пока трудности...

  • #2

    Хоткин Андрей Анатольевич (Четверг, 10 Октябрь 2013 10:08)

    все разобрался - если кому поможет уточняю как))
    1 - скопировал "CSS вставка" тут с сайта и сохранил в блокноте с расширением css;
    2 - В секции <head> html-файла добавил строку (Обработать head в настройках): <link rel="stylesheet" type="text/css" href="mystyle.css">
    3 - вместо mystyle.css вставил свою прямую ссылку на файл css, далее по примеру...все работает. Спасибо!

  • #3

    Farengate Pulse (Четверг, 10 Октябрь 2013 14:30)

    Здравствуйте Андрей, немного неудобно Вы решили использовать css в случае Jimdo. Если у Вас стандартный шаблон, то просто в область head можно вставить css путем добавления строки:

    <style type="text/css">
    здесь вписываем свой css
    </style>

    ну а если у Вы используете свой собственный шаблон, то непосредственно в окно css вставляется сам код. А так Вы задействуете сторонние сервисы (dropbox) для вставки кода css, что не совсем верно в данном случае.