Блог

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

Начнем'с ?

HTML

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

Code

<ul class="ch-grid">
  <li>
  <div class="ch-item ch-img-1">
  <div class="ch-info">
  <h3>Use what you have</h3>
  <p>by Angela Duncan <a href="http://drbl.in/eOPF">View on Dribbble</a></p>
  </div>
  </div>
  </li>
  <li>
  <div class="ch-item ch-img-2">
  <div class="ch-info">
  <h3>Common Causes of Stains</h3>
  <p>by Antonio F. Mondragon <a href="http://drbl.in/eKMi">View on Dribbble</a></p>
  </div>
  </div>
  </li>
  <li>
  <div class="ch-item ch-img-3">
  <div class="ch-info">
  <h3>Pink Lightning</h3>
  <p>by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a></p>
  </div>
  </div>
  </li>
</ul

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

Code

.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;
}

Мы можем центрировать списки, используя встроенный дисплей блока и установки выравнивания текста.
Автором Clearfix хака является Николя Галлахер: http://nicolasgallagher.com/micro-clearfix-hack/
Некоторые из примеров будут иметь различную структуру, но мы рассмотрим это в каждом примере более подобно.

Пример 1

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

Code

.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;
}

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

Code

.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:

Code

.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);
}

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

Code

.ch-info h3 {
  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);
}

Абзац элемент имеет 0 непрозрачность и перехода ( мы хотим, чтобы он исчез при наведении курсора мыши, но с задержкой):

Code

.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;
}

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

Code

.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:

Code

.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:

Code

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

И параграф описания будет просто исчезать (с задержкой):

Code

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

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

Пример 2

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

В этом примере мы будем использовать box-shadow для пункта, чтобы заполнить наш круг и чтобы он был фоном описания.
Так, ничего особенного здесь нет, только box-shadow, имеет еще одно значение строки:

Code

.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;
}

И background-images:

Code

.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);
}

Описание будет сокращено:

Code

.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;
}

И стиль типографских элементов:

Code

.ch-info h3 {
  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);
}

В наведении мы анимируем вставки box-shadow (красноватые) с распространением радиуса в 110px:

Code

.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);
}

И мы будет расширять описание:

Code

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

Пример 3

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

Code

<li>
  <div class="ch-item">
  <div class="ch-info">
  <h3>Music poster</h3>
  <p>by Jonathan Quintin <a href="http://drbl.in/eGjw">View on Dribbble</a></p>
  </div>
  <div class="ch-thumb ch-img-1"></div>
  </div>
</li>

Пункт разделение будет иметь стиль, как и раньше (с тонким box-shdow тенью):

Code

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

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

Code

.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 мы создадим небольшую латунную застежку с радиальным градиентом:

Code

.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);
}

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

Code

.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;
}

Desciption элемент будет иметь следующие стили:

Code

.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);
}

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

Code

.ch-info h3 {
  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);
}

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

Code

.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);
}

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

Code

.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 повороты. Таким образом, нам нужно настроить структуру, чтобы иметь контейнер для перспективных сторон спереди и сзади. Таким образом, элементы списка будут выглядеть следующим образом:

Code

<li>
  <div class="ch-item ch-img-1">
  <div class="ch-info-wrap">
  <div class="ch-info">
  <div class="ch-info-front ch-img-1"></div>
  <div class="ch-info-back">
  <h3>Bears Type</h3>
  <p>by Josh Schott <a href="http://drbl.in/ewUW">View on Dribbble</a></p>
  </div>
  </div>
  </div>
  </div>
</li>

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

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

Code

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

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

Code

.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 div необходимо preserve-3D для преобразования стиля, и мы дадим ему переход, так как этот элемент мы будем вращать в 3D:

Code

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

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

Code

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

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

Code

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

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

Code

.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);
}

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

Code

.ch-info h3 {
  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);
}

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

Code

.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. Структур пятого пример будет такая же. как и в предыдущем примере (Пример 4)

Этот пункт имеет обычный стиль:

Code

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

Оболочка из div описание и информация div будет иметь следующий общий стиль:

Code

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

Давайте еще раз "hole" схитрим, установив тот же фон телу оболочки:

Code

.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);

}

“front” и “back” общего стиля:

Code

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

"Фронт" будет иметь переход (он будет уменьшаться и исчезать):

Code

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

И обратно, будет содержать описание 0 непрозрачность изначально и будет расширена до 1.5:

Code

.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;
}

Нам нужно установить указатель событий none, так как мы не хотим, чтобы элемент "блокировался"... Помните, это расширение, мы просто не видим его из-за непрозрачности, но он все еще там. :).
Фоновые изображения и типографские элементы, как обычно, только с несколько разными цветами:

Code

.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 h3 {
  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. Это даст исчезновение на задней план:

Code

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

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

Code

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

Пример 6

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

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

Code

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

Общий стиль обертки и описание элементов:

Code

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

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

Code

.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;
}

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

Code

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

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

Code

.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;
}

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

Code

.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 нерпрозрачности на фоне описания элемента:

Code

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

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

Code

.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 h3 {
  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);
}

При наведении, мы будем вращать переднюю часть и немного анимировать тень окна. Задняя часть исчезнет в цвете фона:

Code

.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);
}

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

Надеюсь, вам понравились эти эффекты и вы нашли в них вдохновение! smile