Сегодня 25 декабря, среда ГлавнаяНовостиО проектеЛичный кабинетПомощьКонтакты Сделать стартовойКарта сайтаНаписать администрации
Поиск по сайту
 
Ваше мнение
Какой рейтинг вас больше интересует?
 
 
 
 
 
Проголосовало: 7278
Кнопка
BlogRider.ru - Каталог блогов Рунета
получить код
Хабрахабр: Web-разработка / Блог / Захабренные
Хабрахабр: Web-разработка / Блог / Захабренные
Голосов: 1
Адрес блога: http://habrahabr.ru/blog/webdev/
Добавлен: 2008-06-12 19:52:21 блограйдером ZaiSL
 

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

2015-12-25 09:41:24 (читать в оригинале)


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


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

Тэги: animation, css, css3, effects, hover, hover-эффект, html, html-верстка, transform, transition, веб-дизайн, веб-разработка, туториал, эффект

 


Самый-самый блог
Блогер Рыбалка
Рыбалка
по среднему баллу (5.00) в категории «Спорт»
Изменения рейтинга
Категория «Музыка»
Взлеты Топ 5
+382
399
Follow_through
+328
331
שימותו הקנאים
+320
334
Tomas50
+317
357
krodico
+307
359
Ланин Сергей
Падения Топ 5


Загрузка...Загрузка...
BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.