Слушал на днях одного инфо-тренера, разглагольствовавшего о том, как сделать web-страницы более продаваемыми. Оказывается, подмечено, что чаще всего люди жмут на кнопки ярко-красного цвета. Мол сделай кнопку красной и придет успех! Так вот, друзья мои. Кнопки должны быть не сколько красными, сколько интересными. И сейчас я поделюсь с вами 7 примерами стильных и необычных кнопок. Берите ваши блокноты и ручки: мы начинаем!
HTML
Для большинства примеров мы будем использовать следующую структуру:
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3>Твори, что хочешь</h3>
<p>Козьма Прутков <a href="/">Смотреть на webSketches.ru</a></p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3>Двигайся к цели</h3>
<p>Козьма Прутков <a href="/">Смотреть на webSketches.ru</a></p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-3">
<div class="ch-info">
<h3>Реализуй свои мечты</h3>
<p>Козьма Прутков <a href="/">Смотреть на webSketches.ru</a></p>
</div>
</div>
</li>
</ul>
Хотя мы могли использовать здесь картинки, мы дадим себе немного больше свободы, используя вместо них фоновые изображения. Мы определим их в классах, начинающихся с ch-img-
. Кроме того, мы отделим описание кнопки от заголовка. Теперь, давайте сделаем какие-нибудь эффекты при наведении!
CSS
Давайте определим некоторsые общие стили для списка и элементов списка:
.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;
}
Мы можем отцентрировать элементы списка с помощью свойства inline-block и задав выравнивание по центру у их родителя.
Пример 1
В первом примере мы откроем описание, увеличив его масштаб, а также проанимируем внутреннюю тень самого элемента. Давайте спозиционируем элемент и установим для него тень и переход:
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
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);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
Как вы уже заметили, у нас есть два класса элемента (не элемента списка, а его дочернего блока): один из них – элемент с классом ct-item, а второй будет использован для того, чтобы установить определенное фоновое изображение:
.ch-img-1 {
background-image: url(1_1.jpg);
}
.ch-img-2 {
background-image: url(1_2.jpg);
}
.ch-img-3 {
background-image: url(1_3.jpg);
}
Для блока с описанием зададим абсолютное позиционирование и полупрозрачный фон с помощью RGBA. Его прозрачность будет 0.8, и мы будем изменять ее до 0:
.ch-info {
position: absolute;
background: rgba(63,147,147, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
Заголовок будет иметь отступы и текст с тенью:
.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: Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
Для абзаца задана прозрачность, которая изменяется до 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;
-webkit-transition: all 1s ease-in-out 0.4s;
-moz-transition: all 1s ease-in-out 0.4s;
-o-transition: all 1s ease-in-out 0.4s;
-ms-transition: all 1s ease-in-out 0.4s;
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: 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);
}
Блок с заголовком и описанием будет появляться:
.ch-item:hover .ch-info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
Наше описание также появится, но с задержкой:
.ch-item:hover .ch-info p {
opacity: 1;
}
Это был первый пример! Давайте взглянем на следующий.
Пример 2
HTML код в этом примере будет такой же, как в первом. Ничего менять не нужно. В этом примере мы будем использовать свойство box-shadow чтобы заполнить наш круг и служить фоном для описания. Ничего сложного для понимания здесь нет, просто мы добавили еще одну сроку к box-shadow
:
.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(2_1.jpg);
}
.ch-img-2 {
background-image: url(2_2.jpg);
}
.ch-img-3 {
background-image: url(2_3.jpg);
}
Спрячем описание, уменьшив его:
.ch-info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
Зададим типографский стиль для текста:
.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: 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: 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;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
Пример 3
В этом примере мы будем играть с вращением. HTML код будет немного отличаться от первых двух примеров, так как мы должны добавить миниатюру. Таким образом, элемент списка будет выглядеть следующим образом:
<li>
<div class="ch-item">
<div class="ch-info">
<h3>Пивной постер</h3>
<p>Джон Герлач <a href="/">Слушать на Европа +</a></p>
</div>
<div class="ch-thumb ch-img-1"></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);
}
Для элемента с миниатюрами зададим определенные координаты точки, относительно которой будет происходить трансформация. Это будет тот самый элемент, который должен поворачиваться вниз при наведении так, чтобы при этом показывалось описание кнопки:
.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);
-webkit-transform-origin: 95% 40%;
-moz-transform-origin: 95% 40%;
-o-transform-origin: 95% 40%;
-ms-transform-origin: 95% 40%;
transform-origin: 95% 40%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
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: rgb(14,14,14);
background: -moz-radial-gradient(center, ellipse cover,
rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
background: -webkit-gradient(radial, center center, 0px,
center center, 100%, color-stop(0%,rgba(14,14,14,1)),
color-stop(100%,rgba(125,126,125,1)));
background: -webkit-radial-gradient(center, ellipse cover,
rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: -o-radial-gradient(center, ellipse cover,
rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: -ms-radial-gradient(center, ellipse cover,
rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
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(3_1.jpg);
z-index: 12;
}
.ch-img-2 {
background-image: url(3_2.jpg);
z-index: 11;
}
.ch-img-3 {
background-image: url(3_3.jpg);
z-index: 10;
}
Блок с описанием будет стилизован следующим образом:
.ch-info {
position: absolute;
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
background: #c9512e url(noise.png);
box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}
Тексты будут расположены и оформлены следующим образом:
.ch-info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 18px;
margin: 0 20px;
padding: 62px 0 0 0;
height: 45px;
font-family: 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: 54px;
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: 26px;
margin: 7px auto 0;
font-family: Arial, sans-serif;
opacity: 0;
-webkit-transition:
-webkit-transform 0.3s ease-in-out 0.2s,
opacity 0.3s ease-in-out 0.2s,
background 0.2s linear 0s;
-moz-transition:
-moz-transform 0.3s ease-in-out 0.2s,
opacity 0.3s ease-in-out 0.2s,
background 0.2s linear 0s;
-o-transition:
-o-transform 0.3s ease-in-out 0.2s,
opacity 0.3s ease-in-out 0.2s,
background 0.2s linear 0s;
-ms-transition:
-ms-transform 0.3s ease-in-out 0.2s,
opacity 0.3s ease-in-out 0.2s,
background 0.2s linear 0s;
transition:
transform 0.3s ease-in-out 0.2s,
opacity 0.3s ease-in-out 0.2s,
background 0.2s linear 0s;
-webkit-transform: translateX(60px) rotate(90deg);
-moz-transform: translateX(60px) rotate(90deg);
-o-transform: translateX(60px) rotate(90deg);
-ms-transform: translateX(60px) rotate(90deg);
transform: translateX(60px) rotate(90deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.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);
-webkit-transform: rotate(-110deg);
-moz-transform: rotate(-110deg);
-o-transform: rotate(-110deg);
-ms-transform: rotate(-110deg);
transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
-moz-transform: translateX(0px) rotate(0deg);
-o-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
Пример 4
Четвертый пример включает эффект трехмерного вращения. Поэтому нам нужно немного изменить код, чтобы добавить контейнер для 3D перспективы, передней и задней сторон элемента.
<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>Уроки Adobe Illustrator</h3>
<p>Иван Иванов <a href="/">Пробный урок</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;
}
Дополнительный контейнер будет использоваться для создания перспективы и изменении ее тени box-shadow:
.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(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%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
Передняя и задняя стороны будут иметь следующие общие стили:
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: 50% 50%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
Задняя сторона будет повернута так чтобы первоначально мы ее не видели:
.ch-info .ch-info-back {
-webkit-transform: rotate3d(0,1,0,180deg);
-moz-transform: rotate3d(0,1,0,180deg);
-o-transform: rotate3d(0,1,0,180deg);
-ms-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);
background: #000;
}
И снова, фоновые изображения:
.ch-img-1 {
background-image: url(4_3.jpg);
}
.ch-img-2 {
background-image: url(4_2.jpg);
}
.ch-img-3 {
background-image: url(4_3.jpg);
}
... и текстовые элементы:
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin: 0 15px;
padding: 40px 0 0 0;
height: 50px;
font-family: 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: 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 {
-webkit-transform: rotate3d(0,1,0,-180deg);
-moz-transform: rotate3d(0,1,0,-180deg);
-o-transform: rotate3d(0,1,0,-180deg);
-ms-transform: rotate3d(0,1,0,-180deg);
transform: rotate3d(0,1,0,-180deg);
}
Пример 5
В этом примере мы хотим при наведении уменьшать внутреннюю часть миниатюр до 0, а описание наоборот увеличить и сделать непрозрачным. Структура элементов пятого примера будет такой же, как и в предыдущем примере.
Элементы имеют уже привычные нам стили:
.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%;
}
LПовторим трюк с эффектом дыры, установив такой же фон для контейнера, как и для тела документа:
.ch-info-wrap {
top: 20px;
left: 20px;
background: #f9f9f9 url(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;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: all 0.4s ease-in-out 0.2s;
-moz-transition: all 0.4s ease-in-out 0.2s;
-o-transition: all 0.4s ease-in-out 0.2s;
-ms-transition: all 0.4s ease-in-out 0.2s;
transition: all 0.4s ease-in-out 0.2s;
}
Чтобы элемент не блокировал все остальное, нам нужно установить pointer-events на нулевой отметке... помните, его масштаб увеличивается – мы не видим этого из-за прозрачности, но он все еще там.
Фоновые изображения и параметры текста описываются как обычно, посто поменялись цвета :
.ch-img-1 {
background-image: url(5_1.jpg);
}
.ch-img-2 {
background-image: url(5_2.jpg);
}
.ch-img-3 {
background-image: url(5_3.jpg);
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 18px;
margin: 0 15px;
padding: 40px 0 0 0;
height: 48px;
font-family: 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: Arial, sans-serif;
}
.ch-info p a:hover {
color: #fff;
}
При наведении мы будем уменьшать внутреннюю часть миниатюр до 0 и установим прозрачность до 0. Это приведет к тому, что они исчезнут.
.ch-item:hover .ch-info-front {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
}
Часть, содержащая описание, будет уменьшена до 1 и затемнена. Мы также вернем pointer-events
предыдущее значение, поскольку теперь мы сможем кликнуть по ссылке:
.ch-item:hover .ch-info-back {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
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(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;
}
Для элементов, содержащих информацию, сделаем следующее:
.ch-info {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
Передняя и задняя сторона будут открываться с переходом. Заметьте, что на этот раз мы не будем делать заднюю сторону невидимой, поскольку нам надо, чтобы внутренняя часть миниатюры была видна при переворачивании:
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
Теперь скорректируем свойство transform-origin, чтобы его можно было открыть:
.ch-info .ch-info-front {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
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(6_1.jpg);
}
.ch-img-2 {
background-image: url(6_2.jpg);
}
.ch-img-3 {
background-image: url(6_3.jpg);
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin: 0 25px;
padding: 40px 0 0 0;
height: 50px;
font-family: 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: Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255,242,34, 0.8);
}
При наведении, мы будем вращать переднюю часть и анимировать тень блока. Задняя часть будет исчезать за счет непрозрачного фона:
.ch-item:hover .ch-info-front {
-webkit-transform: rotate3d(1,0,0,-180deg);
-moz-transform: rotate3d(1,0,0,-180deg);
-o-transform: rotate3d(1,0,0,-180deg);
-ms-transform: rotate3d(1,0,0,-180deg);
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 class="ch-item">
<div class="ch-info">
<div class="ch-info-front ch-img-2"></div>
<div class="ch-info-back">
<h3>Только
ты</h3>
<p>Элвис Пресли <a href="/">Скачать в mp3</a></p>
</div>
</div>
</div>
</li>
Теперь наделим элемент трехмерной перспективой:
.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%;
}
Давайте сделаем хорошую тень с помощью box-shadow для передней части:
.ch-info .ch-info-front {
box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);
}
Противоположная сторона будет вращаться изначально для того, чтобы появиться в качестве вниз грани куба:
.ch-info .ch-info-back {
-webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
-moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
-o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
-ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
background: #000;
opacity: 0;
}
Ну и обычные стили для фоновых изображений и текстовых элементов:
.ch-img-1 {
background-image: url(7_1.jpg);
}
.ch-img-2 {
background-image: url(7_2.jpg);
}
.ch-img-3 {
background-image: url(7_3.jpg);
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 24px;
margin: 0 15px;
padding: 60px 0 0 0;
height: 60px;
font-family: 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: Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255,242,34, 0.8);
}
Мы используем translate3d
для перемещения передней части по оси Y нашего трехмерного пространства и rotate3d
для самого вращения. Мы также затемним ее, поскольку не хотим, чтобы она была видна.
.ch-item:hover .ch-info-front {
-webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
-moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
-o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
-ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
opacity: 0;
}
Противоположная сторона будет вращаться "назад" до 0 градусов (помните, изначально она была повернута вниз):
.ch-item:hover .ch-info-back {
-webkit-transform: rotate3d(1,0,0,0deg);
-moz-transform: rotate3d(1,0,0,0deg);
-o-transform: rotate3d(1,0,0,0deg);
-ms-transform: rotate3d(1,0,0,0deg);
transform: rotate3d(1,0,0,0deg);
opacity: 1;
}
Voila! Целая куча эффектов при наведении, которые позволят вам приковать внимание пользователя, заставить его поиграться с кнопками и, в конце концов, нажать на них. Надеюсь, вам понравилось эти эффекты и вы найдете где их применить!