7 эффектных кнопок с помощью CSS Transitions

Опубликовано: 1 мая 2014 г.
  • кнопки
  • Пример
Слушал на днях одного инфо-тренера, разглагольствовавшего о том, как сделать 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

Эффекты при наведении с помощью CSS Transitions

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

.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

Эффекты при наведении с помощью CSS Transitions

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

Эффекты при наведении с помощью CSS Transitions

В этом примере мы будем играть с вращением. 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

Эффекты при наведении с помощью CSS Transitions

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

Эффекты при наведении с помощью CSS Transitions

В этом примере мы хотим при наведении уменьшать внутреннюю часть миниатюр до 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

Эффекты при наведении с помощью CSS Transitions

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

Эффекты при наведении с помощью CSS Transitions

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

Популярные статьи
2D игра на Unity. Подробное руководство. Часть 1
  • unity
2D игра на Unity. Подробное руководство. Часть 1
Адаптивный слайдер без Javascript на CSS3
  • слайдер
Адаптивный слайдер без Javascript на CSS3
Работа с Unity в 2D
  • unity
Работа с Unity в 2D
2D игра на Unity. Подробное руководство. Часть 3
  • unity
2D игра на Unity. Подробное руководство. Часть 3
2D игра на Unity. Подробное руководство. Часть 4
  • unity
2D игра на Unity. Подробное руководство. Часть 4
2D игра на Unity. Подробное руководство. Часть 5
  • unity
2D игра на Unity. Подробное руководство. Часть 5
2D игра на Unity. Подробное руководство. Часть 6
  • unity
2D игра на Unity. Подробное руководство. Часть 6
Учебник по новому GUI в Unity. Часть 2.
  • unity
Учебник по новому GUI в Unity. Часть 2.
Учебник по новому GUI в Unity. Часть 1.
  • unity
Учебник по новому GUI в Unity. Часть 1.
HTML LESS LESS React
Онлайн журнал для профессиональных веб-дизайнеров и программистов
БлогПлагиныГрафикаИнструменты
CanvasSPAcssjavascriptjqueryphotoshopphpunitywordpress{"fieldValue":[{"image_preview":"","image_demo":"","example":""}],"fieldSettings":{"autoincrement":1}}{"fieldValue":[{"image_preview":"https://cdn-images-1.medium.com/max/800/1*OIBUnA4NokXK14IMR5csTw.jpeg","image_demo":"https://cdn-images-1.medium.com/max/800/1*OIBUnA4NokXK14IMR5csTw.jpeg","example":""}],"fieldSettings":{"autoincrement":1}}Аудио/Видеоаккордеонанимациябазы данныхбраузерные игрыверсткагалереяграфикакартыкнопкименюпараллаксподсказкипопаппрелоадерслайдертаймерформычекбоксыэлементы интерфейса
© 2009-2017 WebSketches.ru