»

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

urok1. css effekti s izobrazheniyami

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

Рассмотрим небольшой курс из нескольких идущих последовательно друг за другом уроков, в которых мы будем использовать различные эффекты при помощи CSS.

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

Сегодня я расскажу, как сделать некоторые манипуляции с изображениями при помощи CSS кода. Это не очень сложный урок, так как код сам по себе небольшой. Вам понадобится всего лишь скопировать рассмотренные примеры css кода в хедер вашего сайта, предварительно заключив его между тегами <style>...</style>. А так же закачать необходимые изображения на любой хостинг изображений. Можно так же закачать свои картинки прямо на Jimdo. Ну а потом все просто, вставляете код html как widget и все должно работать. Я постараюсь по максимуму показывать работу всех примеров.

Шаг 1. Рассмотрим CSS

Код, приведенный ниже, как уже мною было оговорено, заключаем между тегами <style>...</style> и копируем в <head>...</head>.

css
/*Пример 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. Код можно будет править в соответствии с вашими запросами. Смотрим ниже:

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

Шаг 3. Любуемся результатом

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










В следующем, втором уроке, мы рассмотрим другой CSS эффект, который позволит нам увеличивать изображения при наведении на них курсора мыши.

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

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

    test072 (Пятница, 14 Февраль 2014 16:17)

    Помогите разобраться, делаю все как написано, но фото не отображается в widget/html(( путь прописывал и полный и тока имя фотографии и все равно никак не получается. (фото загружена прямо на jimdo, т.к. шаблон собственный юзаю) .

  • #2

    skayvin163 (Среда, 21 Май 2014 09:17)

    все гуд работает как теперь сделать так что бы картинка открывалась на экран а не просто плавно передвигается и как привизать линк к картинке

  • #3

    Farengate Pulse (Суббота, 24 Май 2014 17:57)

    картинка не может одновременно открывать во фрейме и быть линком