Pull to refresh
16
0
Наталия @eisenfox

Верстальщик

Send message

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

Reading time20 min
Views15K
Эта статья является логическим продолжением моей предыдущей статьи, посвященной основам CSS3 transitions и, если в ней я показывала принципы работы этих основ на простых примерах, сейчас я хотела бы перейти к более сложным, красивым и интересным эффектам.

Из-за большого размера статья разбита на три части. Первая часть. Вторая часть

Демо материалы лежат здесь. Все префиксы проставлены в демо, здесь же я не буду на них акцентировать.

Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.

Читать дальше →
Total votes 13: ↑10 and ↓3+7
Comments2

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

Reading time21 min
Views13K
Эта статья является логическим продолжением моей предыдущей статьи, посвященной основам CSS3 transitions и, если в ней я показывала принципы работы этих основ на простых примерах, сейчас я хотела бы перейти к более сложным, красивым и интересным эффектам.

Из-за большого размера статья разбита на три части. Первая часть. Третья часть.

Демо материалы лежат здесь. Все префиксы проставлены в демо, здесь же я не буду на них акцентировать.

Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.

Читать дальше →
Total votes 13: ↑10 and ↓3+7
Comments0

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

Reading time26 min
Views14K
Эта статья является логическим продолжением моей предыдущей статьи, посвященной основам 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>


Читать дальше →
Total votes 11: ↑4 and ↓7-3
Comments0

CSS3 hover effects. Пошаговый туториал

Reading time26 min
Views105K
При создании этого мануала, моей целью было взять три десятка различных эффектов, частью — довольно распространенных, частью — придуманных мной, разместить их от простых к более сложным, и на их примере показать новичкам, никогда не имевшим дело с CSS3 возможностями, как эти возможности работают и как их применить на практике. Именно по этой причине статья вышла подробная, пошаговая, мне было важно описать и разобрать каждую деталь.

Демо материалы лежат здесь.

Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.

Подготовка к работе.

Итак, для того, чтобы создавать наши эффекты нам понадобится вот такая простая дефолтная html-структура:

<div class="effect>
  <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>

Читать дальше →
Total votes 23: ↑21 and ↓2+19
Comments8

Information

Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Date of birth
Registered
Activity