Intermediate CSS3 Hover Effects. Пошаговый туториал. Часть 1

Эта статья является логическим продолжением моей предыдущей статьи, посвященной основам CSS3 transitions и, если в ней я показывала принципы работы этих основ на простых примерах, сейчас я хотела бы перейти к более сложным, красивым и интересным эффектам. Из-за большого размера статья разбита на три части. Вторая часть. Третья часть. Демо материалы лежат здесь. Все префиксы проставлены в демо, здесь же я не буду на них акцентировать. Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3. Подготовка к работе. Для создания эффектов понадобится такая дефолтная html-структура. Вместо .eff в коде каждого конкретного эффекта будет использоваться класс .eff-n, где n — номер эффекта:

  <div class="eff">
    <img src="img/ef1.jpg" alt="Effect #1" />
     <div class="caption">
        <h4>Title is Here</h4>
        <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
         </p>
          <a class="btn" href="#" title="View More">View More</a>
        </div>
    </div>

Читать дальше →

 Источник: Уроки CSS на Хабрахабре

Перейти на сайт