Hover в css: HTML и CSS с примерами кода

Разное 

Содержание

HTML и CSS с примерами кода

Псевдокласс :hover срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его.

Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как :link, :visited и :active, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило :hover до правил :link и :visited, но после :active, как определено в LVHA-порядке: :link — :visited — :hover — :active.

Псевдокласс :hover может применяться к любому псевдоэлементу.

Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.

Замечания по использованию

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

Псевдоклассы

Синтаксис

/* Selects any <a> element when "hovered" */
a:hover {
  color: orange;
}

Спецификации

Описание и примеры

Пример 1. Выпадающее меню

С псевдоклассом :hover вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать выпадающие меню на чистом CSS (только на CSS, без использования JavaScript). Сущность этой техники — создание правил, типа следуюшего:

Смотрите полный пример выпадающего меню, основанный на CSS.

Пример 2. Галерея полноразмерных изображений и превью

Вы можете использовать псевдокласс :hover, чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.

Пример 3

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hover</title>
    <style>
      a:link {
        color: #0000d0; /* Цвет ссылок */
        padding: 2px; /* Поля вокруг текста */
      }
      a:hover {
        background: #786b59; /* Цвет фона под ссылкой */
        color: #ffe; /* Цвет ссылки */
      }
    </style>
  </head>
  <body>
    <p><a href="1.html">Ссылка 1</a></p>
    <p><a href="2.html">Ссылка 2</a></p>
    <p><a href="3.html">Ссылка 3</a></p>
  </body>
</html>

В данном примере псевдокласс :hover применяется к ссылке (тегу <a>), при этом меняется цвет ссылки и фона под ней. Результат:

Пример 4

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hover</title>
    <style>
      ul {
        width: 180px; /* Ширина меню */
        list-style: none; /* Для списка убираем маркеры */
        margin: 0; /* Нет отступов вокруг */
        padding: 0; /* Убираем поля вокруг текста */
        font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
        font-size: 10pt; /* Размер названий в пункте меню */
      }
      li ul {
        position: absolute; /* Подменю позиционируются абсолютно */
        display: none; /* Скрываем подменю */
        margin-left: 165px; /* Сдвигаем подменю вправо */
        margin-top: -2em; /* Сдвигаем подменю вверх */
      }
      li a {
        display: block; /* Ссылка как блочный элемент */
        padding: 5px; /* Поля вокруг надписи */
        text-decoration: none; /* Подчеркивание у ссылок убираем */
        color: #666; /* Цвет текста */
        border: 1px solid #ccc; /* Рамка вокруг пунктов меню */
        background-color: #f0f0f0; /* Цвет фона */
        border-bottom: none; /* Границу снизу не проводим */
      }
      li a:hover {
        color: #ffe; /* Цвет текста активного пункта */
        background-color: #5488af; /* Цвет фона активного пункта */
      }
      li:hover ul {
        /* При выделении пункта курсором мыши отображается подменю */
        display: block;
      }
      .
 
 
 brd {
        border-bottom: 1px solid #ccc; /* Линия снизу */
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <a href="russian.html">Русская кухня</a>
        <ul>
          <li><a href="linkr1.html">Бефстроганов</a></li>
          <li><a href="linkr2.html">Гусь с яблоками</a></li>
          <li>
            <a href="linkr3.html">Крупеник новгородский</a>
          </li>
          <li>
            <a href="linkr4.html"
              >Раки по-русски</a
            >
          </li>
        </ul>
      </li>
      <li>
        <a href="ukrainian.html">Украинская кухня</a>
        <ul>
          <li><a href="linku1.html">Вареники</a></li>
          <li>
            <a href="linku2.html">Жаркое по-харьковски</a>
          </li>
          <li>
            <a href="linku3.

 
 


 html">Капустняк черниговский</a>
          </li>
          <li>
            <a href="linku4.html"
              >Потапцы с помидорами</a
            >
          </li>
        </ul>
      </li>
      <li>
        <a href="caucasus.html">Кавказская кухня</a>
        <ul>
          <li><a href="linkc1.html">Суп-харчо</a></li>
          <li><a href="linkc2.html">Лилибдж</a></li>
          <li><a href="linkc3.html">Чихиртма</a></li>
          <li>
            <a href="linkc4.html">Шашлык</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="asia.html"
          >Кухня Средней Азии</a
        >
      </li>
    </ul>
  </body>
</html>

В данном примере псевдокласс :hover добавляется к элементу списка (тег <li>) для создания двухуровневого меню. Результат:

См. также

Ссылки

  • Псевдо-класс :hover MDN (рус.)

HTML и CSS с примерами кода

Псевдокласс :hover срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его.

Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как :link, :visited и :active, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило :hover до правил :link и :visited, но после :active, как определено в LVHA-порядке: :link — :visited — :hover — :active.

Псевдокласс :hover может применяться к любому псевдоэлементу.

Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.

Замечания по использованию

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

Псевдоклассы

Синтаксис

/* Selects any <a> element when "hovered" */
a:hover {
  color: orange;
}

Спецификации

Описание и примеры

Пример 1. Выпадающее меню

С псевдоклассом :hover вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать выпадающие меню на чистом CSS (только на CSS, без использования JavaScript). Сущность этой техники — создание правил, типа следуюшего:

Смотрите полный пример выпадающего меню, основанный на CSS.

Пример 2. Галерея полноразмерных изображений и превью

Вы можете использовать псевдокласс :hover, чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.

Пример 3

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hover</title>
    <style>
      a:link {
        color: #0000d0; /* Цвет ссылок */
        padding: 2px; /* Поля вокруг текста */
      }
      a:hover {
        background: #786b59; /* Цвет фона под ссылкой */
        color: #ffe; /* Цвет ссылки */
      }
    </style>
  </head>
  <body>
    <p><a href="1.html">Ссылка 1</a></p>
    <p><a href="2.html">Ссылка 2</a></p>
    <p><a href="3.html">Ссылка 3</a></p>
  </body>
</html>

В данном примере псевдокласс :hover применяется к ссылке (тегу <a>), при этом меняется цвет ссылки и фона под ней. Результат:

Пример 4

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hover</title>
    <style>
      ul {
        width: 180px; /* Ширина меню */
        list-style: none; /* Для списка убираем маркеры */
        margin: 0; /* Нет отступов вокруг */
        padding: 0; /* Убираем поля вокруг текста */
        font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
        font-size: 10pt; /* Размер названий в пункте меню */
      }
      li ul {
        position: absolute; /* Подменю позиционируются абсолютно */
        display: none; /* Скрываем подменю */
        margin-left: 165px; /* Сдвигаем подменю вправо */
        margin-top: -2em; /* Сдвигаем подменю вверх */
      }
      li a {
        display: block; /* Ссылка как блочный элемент */
        padding: 5px; /* Поля вокруг надписи */
        text-decoration: none; /* Подчеркивание у ссылок убираем */
        color: #666; /* Цвет текста */
        border: 1px solid #ccc; /* Рамка вокруг пунктов меню */
        background-color: #f0f0f0; /* Цвет фона */
        border-bottom: none; /* Границу снизу не проводим */
      }
      li a:hover {
        color: #ffe; /* Цвет текста активного пункта */
        background-color: #5488af; /* Цвет фона активного пункта */
      }
      li:hover ul {
        /* При выделении пункта курсором мыши отображается подменю */
        display: block;
      }
      . brd {
        border-bottom: 1px solid #ccc; /* Линия снизу */
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <a href="russian.html">Русская кухня</a>
        <ul>
          <li><a href="linkr1.html">Бефстроганов</a></li>
          <li><a href="linkr2.html">Гусь с яблоками</a></li>
          <li>
            <a href="linkr3.html">Крупеник новгородский</a>
          </li>
          <li>
            <a href="linkr4.html"
              >Раки по-русски</a
            >
          </li>
        </ul>
      </li>
      <li>
        <a href="ukrainian.html">Украинская кухня</a>
        <ul>
          <li><a href="linku1.html">Вареники</a></li>
          <li>
            <a href="linku2.html">Жаркое по-харьковски</a>
          </li>
          <li>
            <a href="linku3. html">Капустняк черниговский</a>
          </li>
          <li>
            <a href="linku4.html"
              >Потапцы с помидорами</a
            >
          </li>
        </ul>
      </li>
      <li>
        <a href="caucasus.html">Кавказская кухня</a>
        <ul>
          <li><a href="linkc1.html">Суп-харчо</a></li>
          <li><a href="linkc2.html">Лилибдж</a></li>
          <li><a href="linkc3.html">Чихиртма</a></li>
          <li>
            <a href="linkc4.html">Шашлык</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="asia.html"
          >Кухня Средней Азии</a
        >
      </li>
    </ul>
  </body>
</html>

В данном примере псевдокласс :hover добавляется к элементу списка (тег <li>) для создания двухуровневого меню. Результат:

См. также

Ссылки

  • Псевдо-класс :hover MDN (рус.)

HTML и CSS с примерами кода

Псевдокласс :hover срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его.

Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как :link, :visited и :active, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило :hover до правил :link и :visited, но после :active, как определено в LVHA-порядке: :link — :visited — :hover — :active.

Псевдокласс :hover может применяться к любому псевдоэлементу.

Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.

Замечания по использованию

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

Псевдоклассы

Синтаксис

/* Selects any <a> element when "hovered" */
a:hover {
  color: orange;
}

Спецификации

Описание и примеры

Пример 1. Выпадающее меню

С псевдоклассом :hover вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать выпадающие меню на чистом CSS (только на CSS, без использования JavaScript). Сущность этой техники — создание правил, типа следуюшего:

Смотрите полный пример выпадающего меню, основанный на CSS.

Пример 2. Галерея полноразмерных изображений и превью

Вы можете использовать псевдокласс :hover, чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.

Пример 3

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hover</title>
    <style>
      a:link {
        color: #0000d0; /* Цвет ссылок */
        padding: 2px; /* Поля вокруг текста */
      }
      a:hover {
        background: #786b59; /* Цвет фона под ссылкой */
        color: #ffe; /* Цвет ссылки */
      }
    </style>
  </head>
  <body>
    <p><a href="1.html">Ссылка 1</a></p>
    <p><a href="2.html">Ссылка 2</a></p>
    <p><a href="3.html">Ссылка 3</a></p>
  </body>
</html>

В данном примере псевдокласс :hover применяется к ссылке (тегу <a>), при этом меняется цвет ссылки и фона под ней. Результат:

Пример 4

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hover</title>
    <style>
      ul {
        width: 180px; /* Ширина меню */
        list-style: none; /* Для списка убираем маркеры */
        margin: 0; /* Нет отступов вокруг */
        padding: 0; /* Убираем поля вокруг текста */
        font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
        font-size: 10pt; /* Размер названий в пункте меню */
      }
      li ul {
        position: absolute; /* Подменю позиционируются абсолютно */
        display: none; /* Скрываем подменю */
        margin-left: 165px; /* Сдвигаем подменю вправо */
        margin-top: -2em; /* Сдвигаем подменю вверх */
      }
      li a {
        display: block; /* Ссылка как блочный элемент */
        padding: 5px; /* Поля вокруг надписи */
        text-decoration: none; /* Подчеркивание у ссылок убираем */
        color: #666; /* Цвет текста */
        border: 1px solid #ccc; /* Рамка вокруг пунктов меню */
        background-color: #f0f0f0; /* Цвет фона */
        border-bottom: none; /* Границу снизу не проводим */
      }
      li a:hover {
        color: #ffe; /* Цвет текста активного пункта */
        background-color: #5488af; /* Цвет фона активного пункта */
      }
      li:hover ul {
        /* При выделении пункта курсором мыши отображается подменю */
        display: block;
      }
      . brd {
        border-bottom: 1px solid #ccc; /* Линия снизу */
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <a href="russian.html">Русская кухня</a>
        <ul>
          <li><a href="linkr1.html">Бефстроганов</a></li>
          <li><a href="linkr2.html">Гусь с яблоками</a></li>
          <li>
            <a href="linkr3.html">Крупеник новгородский</a>
          </li>
          <li>
            <a href="linkr4.html"
              >Раки по-русски</a
            >
          </li>
        </ul>
      </li>
      <li>
        <a href="ukrainian.html">Украинская кухня</a>
        <ul>
          <li><a href="linku1.html">Вареники</a></li>
          <li>
            <a href="linku2.html">Жаркое по-харьковски</a>
          </li>
          <li>
            <a href="linku3. html">Капустняк черниговский</a>
          </li>
          <li>
            <a href="linku4.html"
              >Потапцы с помидорами</a
            >
          </li>
        </ul>
      </li>
      <li>
        <a href="caucasus.html">Кавказская кухня</a>
        <ul>
          <li><a href="linkc1.html">Суп-харчо</a></li>
          <li><a href="linkc2.html">Лилибдж</a></li>
          <li><a href="linkc3.html">Чихиртма</a></li>
          <li>
            <a href="linkc4.html">Шашлык</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="asia.html"
          >Кухня Средней Азии</a
        >
      </li>
    </ul>
  </body>
</html>

В данном примере псевдокласс :hover добавляется к элементу списка (тег <li>) для создания двухуровневого меню. Результат:

См. также

Ссылки

  • Псевдо-класс :hover MDN (рус.)

html — css hover: эфект (для списка)

(!) Осторожно, пиксели.

Задолбался переделывать ваш код, сделал с нуля, наверно сможете уже допилить его к себе)
Вместо кругляшек выступают обычные блоки с border-radius: 50%. А при наведении — убираю радиус бордеров справа.

JsFiddle

.bubu {
  padding: 5px 0; 
  border: 1px solid red; /* для наглядности */
  width: 160px; 
  position: relative; /* У кругляшек абсолютная позиция. 
  А этот фрагмент у родительского блока, будет удерживать их внутри */
  cursor: pointer;
  box-sizing: border-box;/*Это важно, чтобы при наведении padding не сдвигал блок*/
  transition: 0.5s;
}

.bubble {
  width: 16px; height: 16px; position: absolute;
  right: 15px; top: 6px;
  background-color: #236; border-radius: 8px;
  transition: 0.2s;
}

.bubu:hover .bubble {
  right: 0; width: 31px; 
  /* собственная ширина была 16, right: 15; 
   * Теперь right: 0; а ширина стала 16 + 15 px
   */
  border-radius: 8px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #bc007c;
}

.bubu:hover {
  padding-left: 15px;
  color: #bc007c;
}
<ul>
  <a href="#">
    <li>Новые<div></div></li>
  </a>
  <li>Бубу<div></div></li>
  <li>Чебурашки<div></div></li>
</ul>

P.s. вместо padding-left, padding-right по-отдельности, можно прописать сразу 4 числа в один. Начиная с верхнего padding-top, дальше всё идет по стрелке часов:

padding: верх право вниз лево;
____________

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

сокращается до:

padding: 10px 20px 30px 40px;

Та же история и с margin. А если там всего два числа, первая означает верх-вниз, второе: лево-право.

Ищем поддержку hover на css / Хабр

Доброго времени суток, дорогие хабрахабровцы!

При создании адаптивной версии сайта, часто бывают ситуации, когда надо знать: поддерживает ли браузер пользователя hover, или нет. К примеру, выпадающее при наведении подменю, или же различные анимации, привязанные к событию hover — все это нужно только на ПК. На touch-устройствах поведение элементов должно меняться. Так как же задать определенные стили только для устройств с поддержкой hover на css, не забывая о кроссбраузерности?

В начале сразу хочу сказать о том, что есть js-библиотека Modernizr, которая решает эту задачу. Но… Прикручивать эту библиотеку только для определения поддержки hover, вместо написания одного медиа-запроса в css — не лучший вариант, на мой взгляд.

Но и с медиа-запросами не все так просто. Давайте посмотрим, какие есть варианты!

1. media (hover)

div{color:red;}
@media (hover){
/*Поддерживает hover*/
div{color:green;}
}

Данный медиа-запрос позволит отдельно прописывать стили только для устройств, с поддержкой hover. Но давайте посмотрим на поддержку браузерами: caniuse.com/#feat=css-media-interaction

Как видим, он не поддерживается IE и Firefox. Т.е. наш код будет воспринимать эти браузеры, как без поддержки hover. Такой вариант нам не подходит!

2. media (pointer:coarse)

div{color:green;}
@media (pointer:coarse){
/*touch-устройство*/
div{color:red;}
}

Этот запрос работает в точности наоборот, т.е. только для touch-устройств. Поддержка такая же, как и у media (hover), но т.к. IE и Firefox являются браузерами для ПК — то в них и так не должен срабатывать данный медиа-запрос.

Такое решение вполне подходит для тех случаев, когда нужно прописать стили именно для touch-устройств. Но в основном, стоит задача — прописать стили именно для hover. А это означает, что придется сначала писать стили для всех браузеров, а потом сбрасывать их в медиа-запросе. Это не только увеличивает код, но и довольно неудобно, т.к. надо дублировать каждое свойство, измененное при событии hover на элементе.

3. media (hover) +

Выбирая из двух вышеупомянутых вариантов, первый наиболее привлекательный. Была бы еще браузерная поддержка побольше…

Но, к счастью, у нас есть целый ряд медиа-запросов, которые поддерживаются только в определенных браузерах. Специфичность такой поддержки можно посмотреть на этом сайте.

Итак, данный код будет работать только в IE:

@media (min-width:0\0) {}

А этот медиа-запрос сработает только для Firefox:
@media (min--moz-device-pixel-ratio:0) {}

Так давайте же объединим все 3 запроса!
div{color:red;}
@media (hover) , (min-width:0\0) , (min--moz-device-pixel-ratio:0){
/*Поддерживает hover*/
div{color:green;}
}

В результате получаем универсальный медиа-запрос, срабатывающий при поддержке hover.
Запрос поддерживается во всех основных браузерах, и как бонус, корректно работает на Blackberry и в Opera Mini (чего не было во 2 варианте).

Демо сравнения 3х подходов. Зеленый цвет = поддержка hover:

Hover-эффекты для круглых элементов с использованием CSS Transitions

В сегодняшнем уроке мы будем экспериментировать с hover-эффектами для круглых элементов. Поскольку сейчас у нас есть возможность использовать свойство border-radius, мы можем создавать круглые формы, и они все чаще появляются в качестве элементов дизайна на веб-сайтах. Один из вариантов использования, который мне более всего нравится, это круглые миниатюры, которые выглядят гораздо интереснее, чем обычные, прямоугольные. И сейчас мы собираемся создать несколько необычных эффектов при наведении на такие элементы!

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

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

Итак, давайте начнем!

HTML

Для большинства примеров, мы будем использовать следующую структуру:

<ul>
    <li>
        <div>
            <div>
                <h4>Use what you have</h4>
                <p>by Angela Duncan <a href=»http://drbl.in/eOPF»>View on Dribbble</a></p>
            </div>
        </div>
    </li>
    <li>
        <div>
            <div>
                <h4>Common Causes of Stains</h4>
                <p>by Antonio F. Mondragon <a href=»http://drbl.in/eKMi»>View on Dribbble</a></p>
            </div>
        </div>
    </li>
    <li>
        <div>
            <div>
                <h4>Pink Lightning</h4>
                <p>by Charlie Wagers <a href=»http://drbl.in/ekhp»>View on Dribbble</a></p>
            </div>
        </div>
    </li>
</ul>

Хотя мы могли бы использовать изображения здесь, мы дадим себе немного больше свободы, и используем фоновые изображения вместо картинок. Мы определим их в классах, которые начинаются с «ch-img-«. Кроме того, у нас будут блоки с описанием отдельных элементов, и их названием.

Теперь, давайте создадим некоторые hover-эффекты!

CSS

Давайте определим общие стили для списка и элементов списка:

.ch-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
}
 
.ch-grid:after,
.ch-item:before {
    content: »;
    display: table;
}
 
.ch-grid:after {
    clear: both;
}
 
.ch-grid li {
    width: 220px;
    height: 220px;
    display: inline-block;
    margin: 20px;
}

Мы можем отцентрировать элемент списка, используя display: inline-block и определив свойство text-align.

Хак clearfix от Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/

Некоторые из примеров будут иметь немного другую структуру, но мы рассмотрим это в каждом конкретном примере более подробно.

Пример 1

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

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    cursor: default;
    box-shadow:
        inset 0 0 0 16px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.4s ease-in-out;
}

Мы определим два класса для элемента: один — это ch-item, а другой будет использоваться для определения фонового изображения:

 

.ch-img-1 {
    background-image: url(../images/1.jpg);
}
 
.ch-img-2 {
    background-image: url(../images/2.jpg);
}
 
.ch-img-3 {
    background-image: url(../images/3.jpg);
}

Описание элемента будет позиционироваться абсолютно, и мы зададим ему полупрозрачный фон, установив значение для RGBA. Его прозрачность будет равна 0, и мы будем уменьшать масштаб его также до 0:

.ch-info {
    position: absolute;
    background: rgba(63,147,147, 0.8);
    width: inherit;
    height: inherit;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
}

Заголовок элемента будет иметь некоторые отступы и сглаженные тени для текста:

.ch-info h4 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 22px;
    margin: 0 30px;
    padding: 45px 0 0 0;
    height: 140px;
    font-family: ‘Open Sans’, Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}

Тег P имеет непрозрачность равную 0 и переход (мы хотим, чтобы он появлялся при наведении курсора мыши, но с задержкой):

.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
    opacity: 0;
    transition: all 1s ease-in-out 0.4s;
}

Ссылка будет в верхнем регистре, и мы поменяем цвет при наведении на желтый:

.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: ‘Open Sans’, Arial, sans-serif;
}
 
.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

А теперь, самое интересное, что будет происходить при наведении мыши!
Этот элемент будет анимирован, и его тень изменит радиус с 16px до 1px:

.ch-item:hover {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.1),
        0 1px 2px rgba(0,0,0,0.1);
}

Описание будет плавно появляться и масштабироваться до 1:

.ch-item:hover .ch-info {
    transform: scale(1);
    opacity: 1;
}

Параграф будет просто появляться (с задержкой):

.ch-item:hover .ch-info p {
    opacity: 1;
}

С первым примером мы закончили! Давайте взглянем на следующий.

Пример 2

HTML структура в данном случае такая же, как и в первом примере.

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

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow:
        inset 0 0 0 0 rgba(200,95,66, 0.4),
        inset 0 0 0 16px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.4s ease-in-out;
}

Изображения для фона:

.ch-img-1 {
    background-image: url(../images/4.jpg);
}
 
.ch-img-2 {
    background-image: url(../images/5.jpg);
}
 
.ch-img-3 {
    background-image: url(../images/6.jpg);
}

Описание будет опять же спрятано:

.ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
    backface-visibility: hidden;
}

Зададим стили для типографских элементов:

.ch-info h4 {
    color: #fff;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 2px;
    font-size: 22px;
    margin: 0 30px;
    padding: 65px 0 0 0;
    height: 110px;
    font-family: ‘Open Sans’, Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
 
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}
 
.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: ‘Open Sans’, Arial, sans-serif;
}
 
.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

При наведении мы анимируем внутреннюю тень элемента (она будет у нас красноватая) до 110px в радиусе. Она покроет весь круг:

.ch-item:hover {
    box-shadow:
        inset 0 0 0 110px rgba(200,95,66, 0.4),
        inset 0 0 0 16px rgba(255,255,255,0.8),
        0 1px 2px rgba(0,0,0,0.1);
}

Мы увеличим описание, чтобы оно появилось:

.ch-item:hover .ch-info {
    opacity: 1;
    transform: scale(1);  
}

Пример 3

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

<li>
    <div>
        <div>
            <h4>Music poster</h4>
            <p>by Jonathan Quintin <a href=»http://drbl.in/eGjw»>View on Dribbble</a></p>
        </div>
        <div></div>
    </div>
</li>

Блок элемента будет иметь такие же стили, как и раньше (с тонкой тенью):

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

Для эскиза определим свойство transform-origin и переходы. Это будет элемент, который мы хотим, чтобы он поворачивался вниз при наведении курсора мыши, и при этом раскрывал описание элементов:

.ch-thumb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
    transform-origin: 95% 40%;
    transition: all 0.3s ease-in-out;
}

С помощью псевдо-класса :after мы создадим небольшую медную защелку с радиальным градиентом:

.ch-thumb:after {
    content: »;
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    top: 40%;
    left: 95%;
    margin: -4px 0 0 -4px;
    background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    box-shadow: 0 0 1px rgba(255,255,255,0.9);
}

Давайте определим фоновые изображения для каждого элемента:

.ch-img-1 {
    background-image: url(../images/7.jpg);
    z-index: 12;
}
 
.ch-img-2 {
    background-image: url(../images/8.jpg);
    z-index: 11;
}
 
.ch-img-3 {
    background-image: url(../images/9.jpg);
    z-index: 10;
}

Описание элемента будет иметь следующие стили:

.ch-info {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    overflow: hidden;
    background: #c9512e url(../images/noise.png);
    box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}

Типографские элементы стилизованны следующим образом:

.ch-info h4 {
    color: #fff;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 2px;
    font-size: 18px;
    margin: 0 60px;
    padding: 22px 0 0 0;
    height: 85px;
    font-family: ‘Open Sans’, Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
 
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}

Ссылка будет в виде маленького кружка, который должен двигаться вправо при наведении:

.ch-info p a {
    display: block;
    color: #333;
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    color: #fff;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 24px;
    margin: 7px auto 0;
    font-family: ‘Open Sans’, Arial, sans-serif;
    opacity: 0;
    transition:
        transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    transform: translateX(60px) rotate(90deg);
}
 
.ch-info p a:hover {
    background: rgba(255,255,255,0.5);
}

Так как мы хотим, чтобы движение и изменение прозрачности происходили с задержкой, но фон изменялся без неё, мы разделим переходы.

При наведении мы повернем эскиз и переместим/повернем ссылку:

.ch-item:hover .ch-thumb {
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
    transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
}

Пример 4

Четвертый пример будет включать в себя элементы 3D. Таким образом, нам нужно немного изменить структуру, чтобы иметь контейнер для перспективы и лицевую и обратную сторону. Таким образом, элемент списка будет выглядеть следующим образом:

<li>
    <div>              
        <div>
            <div>
                <div></div>
                <div>
                    <h4>Bears Type</h4>
                    <p>by Josh Schott <a href=»http://drbl.in/ewUW»>View on Dribbble</a></p>
                </div>  
            </div>
        </div>
    </div>
</li>

Как вы можете видеть, мы добавили фоновое изображение для блока элемента, а также лицевой части переворачивающегося элемента.
Трюк заключается в том, чтобы задать такой же фон для ch-info-wrap, как и на остальной странице. Это создаст иллюзию, что наш элемент имеет отверстие.

Этот элемент будет иметь обычные стили:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
}

Дополнительный блок будет использоваться для перспективы, и мы добавим ему переход для тени:

.ch-info-wrap{
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    perspective: 800px;
    transition: all 0.4s ease-in-out;
    top: 20px;
    left: 20px;
    background: #f9f9f9 url(../images/bg.jpg);
    box-shadow:
        0 0 0 20px rgba(255,255,255,0.2),
        inset 0 0 3px rgba(115,114, 23, 0.8);
 
}

Блок с классом ch-info будет иметь значение preserve-3d для transform-style, и мы зададим ему переход, так как этот элемент будет вращаться в 3D:

.ch-info{
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    transition: all 0.4s ease-in-out;
    transform-style: preserve-3d;
}

Лицевая и обратная стороны будут иметь следующие стили:

.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    backface-visibility: hidden;
}

Обратная сторона будет поворачиваться, так что мы не должны видеть ее изначально:

.ch-info .ch-info-back {
    transform: rotate3d(0,1,0,180deg);
    background: #000;
}

И снова, фоновые изображения:

.ch-img-1 {
    background-image: url(../images/10.jpg);
}
 
.ch-img-2 {
    background-image: url(../images/11.jpg);
}
 
.ch-img-3 {
    background-image: url(../images/12.jpg);
}

… и типографские элементы:

.ch-info h4 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    margin: 0 15px;
    padding: 40px 0 0 0;
    height: 90px;
    font-family: ‘Open Sans’, Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
 
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}
 
.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: ‘Open Sans’, Arial, sans-serif;
}
 
.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

При наведении, мы будем изменять тени враппера и поворачивать так, чтобы мы видели обратную сторону:

.ch-item:hover .ch-info-wrap {
    box-shadow:
        0 0 0 0 rgba(255,255,255,0.8),
        inset 0 0 3px rgba(115,114, 23, 0.8);
}
 
.ch-item:hover .ch-info {
    transform: rotate3d(0,1,0,-180deg);
}

Пример 5

В этом примере мы хотим уменьшить внутреннюю часть эскиза до 0 и сделать, чтобы описание элементов появлялось и масштабировалось до 1.

Структура пятого примера будет такой же, как и в предыдущем примере.

Этот элемент имеет обычные стили:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
}

Враппер и блок с описанием будут иметь следующие общие стили:

.ch-info-wrap,
.ch-info{
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
}

Давайте еще раз используем трюк, как и в прошлом примере, и установим такой же фон для враппера, что и для страницы:

.ch-info-wrap {
    top: 20px;
    left: 20px;
    background: #f9f9f9 url(../images/bg.jpg);
    box-shadow:
        0 0 0 20px rgba(255,255,255,0.2),
        inset 0 0 3px rgba(115,114, 23, 0.8);
 
}

Общие стили для «переднего» и «заднего» блока:

.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
}

«Передний» будет иметь переход (он будет уменьшаться и исчезать):

.ch-info .ch-info-front {
    transition: all 0.6s ease-in-out;
}

«Задний» блок, который содержит описание, будет иметь изначально прозрачность равную 0, а затем будет увеличиваться до 1.5:

.ch-info .ch-info-back {
    opacity: 0;
    background: #223e87;
    pointer-events: none;
    transform: scale(1.5);
    transition: all 0.4s ease-in-out 0.2s;
}

Фоновые изображения и типографские элементы будут иметь такие же стили как и в предыдущих примерах, только с несколькими разными цветами:

.ch-img-1 {
    background-image: url(../images/13.jpg);
}
 
.ch-img-2 {
    background-image: url(../images/14.jpg);
}
 
.ch-img-3 {
    background-image: url(../images/15.jpg);
}
 
.ch-info h4 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 18px;
    margin: 0 15px;
    padding: 40px 0 0 0;
    height: 80px;
    font-family: ‘Open Sans’, Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
 
.ch-info p {
    color: #fff;
    padding: 10px 5px 0;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}
 
.ch-info p a {
    display: block;
    color: #e7615e;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: ‘Open Sans’, Arial, sans-serif;
}
 
.ch-info p a:hover {
    color: #fff;
}

При наведении мы уменьшим внутреннюю часть эскиза до 0 и установим непрозрачность равную 0 для «переднего» блока.

.ch-item:hover .ch-info-front {
    transform: scale(0);
    opacity: 0;
}

Та часть, которая содержит описание, будет изменена в размере и появится на экране.

.ch-item:hover .ch-info-back {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

Пример 6

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

Элемент будет иметь такие же стили, как и раньше:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
}

Общие стили для враппера и элемента с описанием:

.ch-info-wrap,
.ch-info{
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    transition: all 0.4s ease-in-out;
}

Оболочка будет иметь перспективу:

.ch-info-wrap {
    top: 20px;
    left: 20px;
    background: #f9f9f9 url(../images/bg.jpg);
    box-shadow:
        0 0 0 20px rgba(255,255,255,0.2),
        inset 0 0 3px rgba(115,114, 23, 0.8);
    perspective: 800px;
}

Элементу info установим следующие стили для трансформации:

.ch-info {
    transform-style: preserve-3d;
}

Передняя и задняя стороны будут иметь переход. Обратите внимание, что на этот раз мы не будем устанавливать backface-visibility: hidden, так как мы хотим показать обратную сторону внутренней части эскиза, когда она переворачивается вниз:

.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    transition: all 0.6s ease-in-out;
}

Давайте установим правильный transform-origin, так чтобы мы могли открыть его вниз:

.ch-info .ch-info-front {
    transform-origin: 50% 100%;
    z-index: 100;
    box-shadow:
        inset 2px 1px 4px rgba(0,0,0,0.1);
}

Мы установим RGBA значение с непрозрачностью равную 0 для фона элемента с описанием:

.ch-info .ch-info-back {
    background: rgba(230,132,107,0);
}

И обычные стили для других элементов:

.ch-img-1 {
    background-image: url(../images/16.jpg);
}
 
.ch-img-2 {
    background-image: url(../images/17.jpg);
}
 
.ch-img-3 {
    background-image: url(../images/18.jpg);
}
 
.ch-info h4 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    margin: 0 25px;
    padding: 40px 0 0 0;
    height: 90px;
    font-family: ‘Open Sans’, Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
 
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}
 
.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: ‘Open Sans’, Arial, sans-serif;
}
 
.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

При наведении, мы будем вращать переднюю часть и немного анимировать тень.

.ch-item:hover .ch-info-front {
    transform: rotate3d(1,0,0,-180deg);
    box-shadow:
        inset 0 0 5px rgba(255,255,255,0.2),
        inset 0 0 3px rgba(0,0,0,0.3);
}
 
.ch-item:hover .ch-info-back {
    background: rgba(230,132,107,0.6);
}

Пример 7

Последний пример будет в виде вращающегося куба, где мы открываем описание, поворачивая его на бок. Так как мы будем вращать каждую из граней, нам не нужна дополнительная оболочка. Итак, наш HTML-код будет выглядеть следующим образом:

<li>
    <div>            
        <div>
            <div></div>
            <div>
                <h4>Mouse</h4>
                <p>by Alexander Shumihin <a href=»http://drbl.in/eAoj»>View on Dribbble</a></p>
            </div>  
        </div>
    </div>
</li>

Мы определим для элемента свойство perspective:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    perspective: 900px;
}

Для элемента с классом ch-info понадобится preserve-3d:

.ch-info{
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

Лицевая и обратная сторона будут иметь переходы, transform-origin будет установлен как 50% 0%:

.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    transition: all 0.4s linear;
    transform-origin: 50% 0%;
}

Давайте создадим симпатичную тень для передней части:

.ch-info .ch-info-front {
    box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);
}

Противоположная сторона будет спрятана изначально:

.ch-info .ch-info-back {
    transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    background: #000;
    opacity: 0;
}

Зададим обычные стили для фоновых изображений и текстовых элементов:

.ch-img-1 {
    background-image: url(../images/19.jpg);
}
 
.ch-img-2 {
    background-image: url(../images/20.jpg);
}
 
.ch-img-3 {
    background-image: url(../images/21.jpg);
}
 
.ch-info h4 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 24px;
    margin: 0 15px;
    padding: 60px 0 0 0;
    height: 110px;
    font-family: ‘Open Sans’, Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
 
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}
 
.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: ‘Open Sans’, Arial, sans-serif;
}
 
.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

Мы будем использовать translate3d, чтобы перемещать лицевую часть по оси Y нашего 3D пространства, и rotate3d, чтобы на самом деле повернуть её. Мы также постепенно её спрячем, чтобы какая-либо часть не была видна впоследствии:

.ch-item:hover .ch-info-front {
    transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    opacity: 0;
}

Противоположная сторона будет поворачиваться «назад» до 0 градусов (первоначально она была повернута вниз):

.ch-item:hover .ch-info-back {
    transform: rotate3d(1,0,0,0deg);
    opacity: 1;
}

И вот и всё!

Надеюсь, вам понравилось, и эти эффекты будут вам полезны!

Демонстрация

Скачать исходные файлы

Перевод статьи с tympanus.net/codrops


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Решение проблемы с CSS :hover

:hover — псевдокласс, определяющий стиль элемента при наведении на него указателя.

Проблемы с псевдоклассом :hover начались еще с тех пор, как на сенсорных устройствах был установлен первый браузер. Конечно, проблемы пытались решить и решали, но полноценным решением это вряд ли можно было назвать. Однако с новыми медиазапросами (Media Queries) 4 уровня проблема, кажется, решена окончательно.

“Хм … а в чем, собственно говоря, заключается проблема?”

Допустим, вы просто добавили псевдокласс :hover к элементу вашей веб-страницы. Следовательно, когда пользователь наводит курсор мыши на этот элемент, то он активирует некоторые правила CSS и меняет свой внешний вид. Легче легкого!

Однако на сенсорном экране с псевдоклассом :hover возникают проблемы: после того, как нажатие выполнено, эффект наведения закрепляется на элементе. Более того, это происходит, даже тогда, когда элемента не касались напрямую. Например, когда пользователь в процессе прокрутки страницы задевает элемент и его отображение меняется, согласно CSS правилам :hover.

Такая же проблема возникает при перетаскивании пользователем элементов с :hover по веб-странице. Это происходит, потому что технически — ваш палец (или стилус) и есть указатель, который и активирует :hover. Но проблема состоит в том, что даже после прекращения перетаскивания элемента — эффекты, активированные :hover, остаются.

Подобное поведение элементов может запутать пользователя и подобная практика будет отрицательно сказываться на вашем продукте. Эту проблему необходимо как-то решить.

“Не может же быть, чтобы эту проблему не пытались как-то решить…”

Да, определенные решения выдвигались. Лучшим из них было использование JavaScript для определения наличия сенсорного экрана и последующее применение класса к body . После чего, добавляя к какому-либо элементу псевдокласс :hover, будет происходить явное обращение к этому классу.

body.nontouch nav a:hover {
    background: yellow;
}

Однако подобное решение имеет несколько недостатков:

  1. Разработчик может создать JS-сценарий обнаружения, который работает сегодня, но что с ним будет через пару месяцев, когда появится какая-то новая технология? Ноутбуки с сенсорными экранами? Съемные сенсорные экраны? Apple Pencil? Никто не хотел бы беспокоиться об этом во время разработки.
  2. Использование основанного на компонентах JS-фреймворка с инкапсулированными стилями неудобно. Так как каждый раз, когда активируется :hover, стили этого элемента должны ссылаться на этот глобальный класс.
  3. Это решение может работать по-разному на разных устройствах. Возможно, что для специальных устройств придется придумывать специальное решение. Однако должен быть стандартизированный способ, работающий на всех устройствах.
Media Queries Level 4

Медиазапросы великолепны. Они в одиночку внедрили адаптивный веб-дизайн и их по праву считают краеугольным камнем современной мобильной веб-разработки. Организация W3C добавила функции взаимодействия с мультимедиа в качестве рекомендации для L4 Media Queries, которые мы можем использовать для распознавания устройств с сенсорным экраном.

Четвертый уровень медиазапросов включает в себя: hover,any-hover, pointer, any-pointer. Они предоставляют информацию о возможности применения hover и типе пользовательского ввода. Например, @media (hover: hover) будет true, если hover элемента активируется курсором мыши. А @media (any-pointer: coarse) будет true, если какой-либо ввод имеет ограниченную точность (например, касание по сенсору). Эти мультимедийные функции предоставляют достаточно информации для правильного взаимодействия с hover.

Одна из проблем заключается в том, что медиазапросы на данный момент являются рекомендательными. Это означает, что они могут измениться или даже быть удалены в любое время. Помните об этом при работе с ними. На данный момент это определенно работает, и мы возлагаем большие надежды на эти спецификации. Тот факт, что все основные браузеры реализовали эти запросы (кроме, конечно, IE), делает наше будущее еще более оптимистичным.

«Так что же делать?»

С точки зрения разработчика, мы ищем решение, которое будет наиболее простым в использовании и обслуживании.

С точки зрения UX, мы ищем решение, которое было бы наиболее приятным для пользователя.

Это означает, что на устройствах с сенсорным экраном не будут использоваться hover-эффекты. Особый случай здесь — это ноутбуки с сенсорными экранами. Однако мы можем предполагать, что на таких ноутбуках большую часть времени используется тачпад или компьютерная мышь. Даже если hover-эффект зависает, пользователь может легко использовать мышь / сенсорную панель, чтобы устранить проблему. К счастью, ноутбуки со съемными сенсорными экранами переходят в режим планшета после отсоединения. А это значит, что медиазапрос все правильно обработает и никаких проблем не возникнет.

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

Перевод статьи Mezo Istvan: Finally, a CSS only solution to :hover on touchscreens

CSS-переходов и анимации наведения, интерактивное руководство

Мир веб-анимации превратился в бескрайние джунгли инструментов и технологий. Библиотеки, такие как GSAP и Framer Motion и React Spring, появились, чтобы помочь нам добавить движение в DOM.

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

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

Целевая аудитория

Это руководство предназначено для разработчиков с любым уровнем опыта. Его можно рассматривать как «CSS-переходы 101». Тем не менее, я добавил несколько интересных и малоизвестных лакомых кусочков — независимо от вашего уровня опыта, держу пари, вы чему-то научитесь!

Главный компонент, который нам нужен для создания анимации, — это изменяющийся CSS.

Вот пример кнопки, которая перемещается при наведении курсора, без анимации :

В этом фрагменте кода используется псевдокласс : hover , чтобы указать дополнительное объявление CSS, когда указатель мыши находится поверх нашей кнопки, аналогично onMouseEnter событие в JavaScript.

Чтобы сдвинуть элемент вверх, мы используем преобразование : translateY (-10px) . Хотя для этого мы могли бы использовать margin-top , преобразование : перевод — лучший инструмент для этой работы.Позже мы увидим почему.

По умолчанию изменения в CSS происходят мгновенно. В мгновение ока наша кнопка телепортировалась на новое место! Это несовместимо с миром природы, где все происходит постепенно.

Мы можем указать браузеру интерполировать из одного состояния в другое с метко названным свойством transition :

transition может принимать несколько значений, но требуются только два:

  1. Имя свойства, которое мы хотим анимировать

  2. Продолжительность анимации

Если вы планируете анимировать несколько свойств, вы можете передать его в виде списка, разделенного запятыми:

  Выбор всех свойств  
  transition-property  принимает особое значение:  все .Когда  все  указаны, любое изменяемое свойство CSS будет перенесено. 
 
 Может возникнуть соблазн использовать это значение, поскольку оно экономит нам много времени при вводе при анимации нескольких свойств, но  я рекомендую не использовать его.  
 
 По мере развития вашего продукта вы (или кто-то из вашей команды), вероятно, в какой-то момент в будущем обновите этот код. Неожиданная анимация могла проскользнуть. 
 
 Анимация похожа на соль: слишком много ее портит блюдо.Стоит быть действительно точным с анимируемыми свойствами. 
 
 Когда мы говорим элементу перейти из одной позиции в другую, браузеру необходимо определить, как должен выглядеть каждый «промежуточный» фрейм. 
 
 Например: предположим, что мы перемещаем элемент слева направо в течение 1 секунды. Плавная анимация должна работать со скоростью 60 кадров в секунду *, а это значит, что нам нужно найти 60 отдельных позиций между началом и концом. 
 
 Давайте начнем с того, что они будут равномерно распределены: 
 
 Щелкните меня! 
 
 Чтобы прояснить, что здесь происходит: каждый блеклый кружок представляет момент времени.Когда круг перемещается слева направо, это кадры, которые были показаны пользователю. Это как флипбук. 
 
 В этой анимации мы используем линейную функцию синхронизации  . Это означает, что элемент движется в постоянном темпе; наш круг перемещается на одинаковую величину каждый кадр. 
 
 В CSS доступно несколько функций времени. Мы можем указать, какой из них мы хотим использовать со свойством  transition-timer-function : 
 
 
 Или мы можем передать его напрямую в сокращенное свойство  transition : 
 
 
  linear  редко бывает лучшим выбором — в конце концов, в реальном мире почти ничего не движется в эту сторону *.Хорошая анимация имитирует мир природы, поэтому мы должны выбрать что-то более органичное! 
 
 Давайте пробежимся по нашим вариантам. 
 
 
  
 Ссылка на эту товарную позицию 
 легкость выхода  
  легкость выхода  врывается, как дикий бык, но у него заканчивается энергия. В конце концов, он корчит, как сонная черепаха. 
 
 Попробуйте прокрутить по временной шкале; обратите внимание, насколько резким является движение в первых нескольких кадрах и насколько оно становится незаметным к концу. 
 
 Если бы мы изобразили смещение элемента во времени, это выглядело бы примерно так: 
 
  Когда бы вы использовали  смещения ?  Чаще всего используется, когда что-то поступает за пределами экрана (например,модальное появление). Создается впечатление, что что-то ворвалось издалека и останавливается перед пользователем. 
 
 
  
 Ссылка на эту товарную позицию 
 easy-in  
  easy-in  неудивительно, что это противоположность  easy-out . Он запускается медленно и ускоряется: 
 
 Как мы видели,  easy-out  полезен для вещей, которые попадают в поле зрения вне экрана.  easy-in , естественно, пригодится для обратного: перемещения чего-либо за пределы области просмотра.
 
 Эта комбинация полезна, когда что-то входит и выходит из области просмотра, например, из модального окна. Вскоре мы рассмотрим, как смешивать и согласовывать функции синхронизации. 
 
 Обратите внимание, что  easy-in  в значительной степени полезно исключительно для анимаций, которые заканчиваются закадровым или невидимым элементом; в противном случае резкая остановка может вызвать раздражение. 
 
 
  
 Ссылка на данную товарную позицию 
 легкость входа-выхода  
 Далее,  легкость входа-выхода . Это комбинация двух предыдущих функций синхронизации: 
 
 Эта функция синхронизации является симметричной  .У него равное количество ускорений и замедлений. 
 
 Я считаю эту кривую наиболее полезной для всего, что происходит в цикле (например, когда элемент постепенно появляется и исчезает, снова и снова). 
 
 Это большой шаг вперед по сравнению с  linear , но перед тем, как вы начнете использовать его во всем, давайте рассмотрим еще один вариант. 
 
 Если бы у меня была своя точка зрения от авторов языка CSS, когда дело доходит до переходов, так это то, что  легкость  плохо названа. Это совсем не описательно; буквально все функции тайминга в той или иной степени являются облегчениями! 
 
 Если не считать придирки,  easy  просто потрясающе.В отличие от  для легкости установки , он несимметричен; Он имеет кратковременное ускорение и замедление  лота . 
 
   легкость  — значение по умолчанию  — если вы не укажете функцию синхронизации, будет использоваться  легкость . Честно говоря, мне это кажется правильным.  easy  — отличный вариант в большинстве случаев. Если элемент перемещается, но не входит в область просмотра и не выходит из нее, обычно хорошим выбором будет  легкость . 
  Время постоянно  
 Важное замечание обо всех этих демонстрациях:  время постоянно .Функции синхронизации описывают, как значение должно переходить от 0 до 1 за фиксированный интервал времени, а не , а , как быстро должна завершиться анимация. Некоторые функции синхронизации могут казаться быстрее или медленнее, но в этих примерах все они выполняются ровно за 1 секунду. 
 
 
  
 Ссылка на этот заголовок 
 Пользовательские кривые  
 Если предоставленные встроенные параметры не соответствуют вашим потребностям, вы можете определить свою собственную кривую плавности, используя функцию синхронизации кубической кривой Безье! 
 
 
 Все значения, которые мы видели до сих пор, на самом деле являются просто предустановками для этой функции  кубической кривой Безье .Требуется 4 числа, представляющих 2 контрольные точки. 
 
 Кривые Безье действительно хороши, но они выходят за рамки этого руководства. Но я скоро напишу о них больше! 
 
 А пока вы можете начать создавать свои собственные временные функции Безье, используя этот замечательный помощник от Lea Verou: 
 
 Как только вы придумаете кривую анимации, которая вас устраивает, нажмите «Копировать» вверху и вставьте ее в ваш CSS! 
 
 Вы также можете выбрать из этого расширенного набора функций синхронизации.Но будьте осторожны: некоторые из наиболее диковинных опций не работают в CSS. 
 
 Начиная с пользовательских кривых Безье, может быть трудно придумать кривую, которая кажется естественной. Однако после некоторой практики это невероятно выразительный инструмент  . 
  Мне пора прийти в себя  
 Я должен признаться: приведенные выше демонстрации, демонстрирующие различные функции синхронизации, были преувеличены. 
 
 По правде говоря, временные функции, такие как  easy-in , более тонкие, чем изображено, но я хотел подчеркнуть эффект, чтобы облегчить понимание.Это стало возможным благодаря функции синхронизации  кубической кривой Безье ! 
 Показать еще   
 Ранее мы упоминали, что анимация должна работать со скоростью 60 кадров в секунду. Однако когда мы проводим вычисления, мы понимаем, что это означает, что у браузера есть только 16,6 миллисекунды для рисования каждого кадра. На самом деле времени совсем немного; для справки, моргание занимает около 100-300 мсек! 
 
 Если наша анимация слишком затратна в вычислительном отношении, она будет казаться рывкой и заиканием. Рамки будут выпадать, так как устройство не успевает.
 
 Убедитесь в этом сами, настроив новый элемент управления «Число кадров в секунду»: 
 
 На практике низкая производительность часто проявляется в виде  переменной частоты кадров , так что это не идеальная симуляция. 
 
 Анимация — это удивительно глубокая и интересная область, выходящая далеко за рамки этого вводного руководства. Но давайте рассмотрим абсолютно важные, важные моменты: 
 
     
  1.  
     Некоторые свойства CSS намного дороже анимировать, чем другие.Например, высота   — очень дорогое свойство, поскольку оно влияет на макет. Когда высота элемента уменьшается, это вызывает цепную реакцию; всем его братьям и сестрам также нужно будет подняться, чтобы заполнить пространство! 
     
    2.  
  2.  
     Другие свойства, такие как  background-color , анимировать довольно дорого. Они не влияют на макет, но требуют свежего слоя краски на каждой раме, что недешево. 
     
    3.  
  3.  
     Два свойства —  преобразовать  и непрозрачность   — очень дешево для анимации.Если анимация в настоящее время настраивает свойство, например  width  или  left ,  можно значительно улучшить , переместив его в  transform  (хотя не всегда можно добиться того же эффекта). 
     
    4.  
  4.  
     Обязательно протестируйте анимацию на самом низком устройстве, на которое нацелен ваш сайт / приложение. Ваша машина для разработки, вероятно, во много раз быстрее ее. 
     
    5.  
 
 Если вам интересно узнать больше о производительности анимации, я выступал на эту тему на React Rally.Он углубляется в эту тему: 
  
 
  
 Ссылка на этот заголовок 
 Аппаратное ускорение  
 В зависимости от вашего браузера и ОС вы могли заметить любопытное небольшое несовершенство в некоторых из предыдущих примеров: 
 
  Pay close внимание к буквам.  Обратите внимание, как они выглядят слегка глючными в начале и в конце перехода, как будто все встало на свои места? 
 
 Это происходит из-за переключения между CPU и GPU компьютера.Позволь мне объяснить. 
 
 Когда мы анимируем элемент, используя преобразование   и непрозрачность  , браузер иногда пытается оптимизировать эту анимацию. Вместо того, чтобы растрировать пиксели в каждом кадре, он передает все на графический процессор в виде текстуры. Графические процессоры очень хорошо справляются с подобными преобразованиями на основе текстур, и в результате мы получаем очень гладкую и производительную анимацию. Это известно как «аппаратное ускорение». 
 
 Вот проблема: графические процессоры и процессоры отображают   немного по-разному.Когда центральный процессор передает его графическому процессору, и наоборот, вы видите, как все немного сдвигается. 
 
 Мы можем решить эту проблему, добавив следующее свойство CSS: 
 
 
  will-change  — это свойство, которое позволяет нам намекнуть браузеру, что мы собираемся анимировать выбранный элемент и что он должен оптимизировать для этот случай. 
 
 На практике это означает, что браузер позволяет графическому процессору обрабатывать этот элемент  все время . Больше никаких переключений между процессором и графическим процессором, никакой контрольной «фиксации на месте».
 
  will-change  позволяет нам целенаправленно определять, какие элементы следует аппаратно ускорять. У браузеров есть своя непостижимая логика вокруг этого материала, и я бы не хотел оставлять это на волю случая. 
 
 Есть еще одно преимущество аппаратного ускорения: мы можем воспользоваться преимуществом рендеринга субпикселей  . 
 
 Посмотрите эти две анимации ниже. Один выполняется с использованием  с верхним краем , поэтому он не может быть аппаратно ускорен. Заметили разницу между ними? 
 
 Свойства, такие как  margin-top , не могут выполнять субпиксельную визуализацию, что означает, что их необходимо округлять до ближайшего пикселя, создавая ступенчатый эффект резкости. transform , тем временем, может плавно переключаться между пикселями благодаря уловке сглаживания графического процессора. 
  Компромиссы  
 Ничто в жизни не дается бесплатно, и аппаратное ускорение — не исключение. 
 
 Передав отрисовку элемента графическому процессору, он будет потреблять больше видеопамяти, а этот ресурс может быть ограничен, особенно на мобильных устройствах более низкого уровня. 
 
 Это не такая большая проблема, как раньше — я провел несколько тестов на Xiaomi Redmi 7A, популярном бюджетном смартфоне в Индии, и, похоже, он работает нормально.Только не применяйте широко  будет менять  к элементам, которые не двигаются. Обдумайте, где вы его используете. 
  Альтернативные свойства  
 Аппаратное ускорение существует уже давно — фактически, дольше, чем свойство  изменит свойство ! 
 
 В течение долгого времени это выполнялось с помощью трехмерного преобразования, такого как  transform: translateZ (0px) . Даже со значением 0px браузер по-прежнему передает его графическому процессору, поскольку перемещение в трехмерном пространстве определенно является сильной стороной графического процессора.Также есть  backface-visibility: hidden . 
 
 Когда вышел  will-change , он должен был дать разработчикам правильный, семантически значимый способ намекнуть браузеру, что элемент следует оптимизировать. Однако на первых порах у  будут проблемы с заменой . 
 
 К счастью, похоже, что все эти проблемы были решены. Я провел некоторое тестирование и обнаружил, что получаю лучшие результаты в современных браузерах с  будет заменять .Но вы всегда должны проводить собственное тестирование, чтобы убедиться, что эти методы работают на целевых устройствах и браузерах. 
 
 
  
 Ссылка на этот заголовок 
 Движение, управляемое действием  
 Давайте еще раз взглянем на нашу поднимающуюся кнопку «Hello World». 
 
 Hello World 
 
 В нынешнем виде у нас есть «симметричный» переход — анимация входа такая же, как и анимация выхода: 
 
     
  •    
     При наведении курсора мыши на элемент он смещается вверх на 10 пикселей. 250 мс 
     
    •  
  •    
     Когда мышь отодвигается, элемент смещается вниз на 10 пикселей за 250 мс 
     
    •  
 
 Маленькая милая деталь — дать каждому действию собственные настройки перехода.Для анимации наведения мне нравится делать анимацию входа быстрой и быстрой, в то время как анимация выхода может быть немного более расслабленной и вялой: 
 
 Другой распространенный пример — модальные окна. Для модальных окон может быть полезно входить с анимацией  с легкостью выхода и , а для выхода с более быстрой анимацией  - с легкостью в : 
 
 Это небольшая деталь, но она говорит о гораздо большей идее. 
 
 Я считаю, что большинство разработчиков думают в терминах  состояний : например, вы можете посмотреть на эту ситуацию и сказать, что у нас есть состояние «зависания» и состояние по умолчанию.Вместо этого, что, если бы мы думали о  действиях ? Мы анимируем, основываясь на том, что делает пользователь, думая в терминах событий, а не состояний. У нас есть анимация ввода мыши и анимация выхода мыши. 
 
 Тобиас Алин показывает, как эта идея может создать семантически значимую анимацию следующего уровня в своем блоге Meaningfun Motion with Action-Driven Animation. 
 
 
  
 Ссылка на этот заголовок 
 Задержки  
 Что ж, мы довольно далеко продвинулись в своем стремлении овладеть переходами CSS, но есть пара заключительных деталей, о которых стоит рассказать.Поговорим о задержках перехода. 
 
 Я считаю, что почти каждый уже сталкивался с этим разочаровывающим опытом раньше: 
 
  Изображение любезно предоставлено Беном Каменсом  
 
 Как разработчик, вы, вероятно, можете понять, почему это происходит: раскрывающийся список остается открытым только при наведении курсора! Когда мы перемещаем мышь по диагонали для выбора дочернего элемента, наш курсор выходит за пределы, и меню закрывается. 
 
 Эту проблему можно решить довольно элегантным способом, не прибегая к JS.Мы можем использовать  transition-delay ! 
 
 
  transition-delay  позволяет нам сохранять статус-кво в течение короткого промежутка времени. В этом случае, когда пользователь перемещает указатель мыши за пределы  .dropdown-wrapper , в течение 300 мс ничего не происходит. Если их мышь повторно входит в элемент в пределах этого 300-миллисекундного окна, переход никогда не происходит. 
 
 По прошествии 300 мс переход   срабатывает нормально, и выпадающий список исчезает через 400 мс. 
  Почему без стенографии?  
 До сих пор мы использовали сокращение  transition  для объединения всех наших значений, связанных с переходом. transition-delay  также можно использовать с сокращением: 
 
 Показать еще   
 
  
 Ссылка на этот заголовок 
 Мерцание гибели  
 Когда элемент перемещается вверх или вниз при наведении курсора, мы должны быть очень осторожны. не вводите случайно «мерцание судьбы»: 
 
  Предупреждение:  Этот GIF-файл включает мерцающее движение, которое потенциально может вызвать припадки у людей с светочувствительной эпилепсией. 
 Reveal 
 Вы могли заметить похожий эффект на некоторых демонстрациях на этой странице! 
 
 Неполадка возникает, когда мышь приближается к границе элемента.Эффект наведения выводит элемент из-под мыши, что заставляет его падать обратно под мышью, что вызывает повторное срабатывание эффекта наведения… много раз в секунду. 
 
 Как решить эту проблему? Уловка состоит в том, чтобы отделить триггер   от эффекта  . Вот быстрый пример: 
 
 У нашего
Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *