CSS

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

Сегодня я расскажу, как сделать некоторые манипуляции с изображениями при помощи CSS кода. Это не очень сложный урок, так как код сам по себе небольшой. Вам понадобится всего лишь скопировать рассмотренные примеры css кода в хедер вашего сайта, предварительно заключив его между тегами <style>...</style>. А так же закачать необходимые изображения на любой хостинг изображений. Можно так же закачать свои картинки прямо на Jimdo. Ну а потом все просто, вставляете код html как widget и все должно работать. Я постараюсь по максимуму показывать работу всех примеров.
Шаг 1. Рассмотрим CSS
Код, приведенный ниже, как уже мною было оговорено, заключаем между тегами <style>...</style> и копируем в <head>...</head>.
/*Пример 1*/
.ex1 img{
    height: 100px;
    width: 100px;
    border: 5px solid #ccc;
    float: left;
    margin: 15px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}

.ex1 img:hover {
    margin-top: 2px;
}

Шаг 2. Вставляем HTML как виджет
Далее вставляем html в нужное нам место на сайте при помощи Widget / HTML. Код можно будет править в соответствии с вашими запросами. Смотрим ниже:
<!-- Здесь мы указываем класс нашего div контейнера (он у нас уже задан) и вставляем ссылки на наши изображения -->
    <div class="ex1">
        <img src="http://...">
        <img src="http://...">
        <img src="http://...">
        <img src="http://...">
    </div>

Шаг 3. Любуемся результатом
Как видите, картинки плавно передвигаются вверх при наведении на них курсора мыши. Данный эффект будет смотреться очень оригинально именно на Jimdo сайтах, так как мы с вами очень ограничены здесь в возможностях.

Теги:
изображения, эффект
Похожие новости:
Добавлено: 17 Сентября 2013 04:34:31 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...