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 на Хабрахабре


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.



Похожие публикации

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

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

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

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

Блог им. madduck / Print.css — стиль для печати для wordpress

Я заметил на многих сайтах отсутствует отдельный стиль для печати. То есть, если кто-то захочет распечатать какой-либо материал с сайта, то на бумаге он будет выглядеть почти так же как и в сети,... читать далее

Блог им. RayZ / Задача: Кнопки в Internet Explorer и волшебные пространства

Столкнулся с проблемой укрощения кнопок под Internet Explorer. Для наглядности имеем следующий код: <html>   <style type="text/css">     .hacked {       width:auto;... читать далее

.NET / Ссылка Fizzler: A CSS Selector Engine for C#

Библиотека, которая позволяет в C# парсить строки с html, используя CSS-селекторы: SelectorEngine engine = new SelectorEngine(htmlString); IList nodes = engine.Parse("#p>a"); Источник:... читать далее

Web-разработка / Ссылка AM framework (HTML+CSS+JS)

Данный фреймворк, есть не что иное, как шаблон сайта "на все случаи жизни". Я ни в коем случае не претендую на лавры творца! И абсолютно не надеюсь на признание моей верстки идеальной. Весь... читать далее

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте