Эта статья является логическим продолжением моей предыдущей статьи, посвященной основам CSS3 transitions и, если в ней я показывала принципы работы этих основ на простых примерах, сейчас я хотела бы перейти к более сложным, красивым и интересным эффектам.
Из-за большого размера статья разбита на три части. Первая часть. Третья часть.
Демо материалы лежат здесь. Все префиксы проставлены в демо, здесь же я не буду на них акцентировать.
Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.
Эффект #12
Поскольку нельзя так сделать, чтобы градиент из дефолтного состояния с помощью transition плавно переходил в другой градиент (transition в данном случае попросту не работает), для этого эффекта нам понадобится добавить в дефолтную html-структуру два блока с градиентами, ну и блок с .overlay и иконкой тоже:
<div class="effect eff-12"> <img src="img/ef12.jpg" alt="Effect #12" /> <div class="overlay"> <div class="icon"></div> </div> <div class="gradient"></div> <div class="inner-gradient"></div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Устанавливаем первый градиент. Подробнее о том, как составлять линейные градиенты, я писала для эффекта #11.
.eff-12 .gradient { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1; background: linear-gradient(60deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%); transition: all 0.25s linear 0.2s; } И второй градиент, который появится при наведении:
.eff-12 .inner-gradient { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%); transition: all 0.25s linear 0.2s; } Теперь скроем .caption, который должен будет при наведении выехать слева направо:
.eff-12 .caption { position: absolute; top: 0px; left: 100%; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; } У прочих элементов .caption дефолтные стили.
Блок .overlay с иконкой подробнее объяснен в описании эффекта #10:
.eff-12 .overlay { width: 0px; height: 0px; border: 50px solid transparent; border-bottom: 50px solid rgba(255,255,255,0.6); border-right: 50px solid rgba(255,255,255,0.6); position: absolute; right: 0; bottom: 0; transform-origin: right; transition: all 0.2s linear 0s; } .eff-12 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 9px; left: 5px; transition: all 0.01s linear 0.2s; } Теперь собираем эффект.
Сначала выцветает первый градиент:
.eff-12:hover .gradient { opacity: 0; } Одновременно с этим делаем блок со вторым градиентом непрозрачным:
.eff-12:hover .inner-gradient { opacity: 1; } Убираем .overlay и иконку:
.eff-12:hover .overlay { transform: scaleX(0); } .eff-12:hover .overlay .icon { opacity: 0; transition-delay: 0s; } И выезжает .caption:
.eff-12:hover .caption { left: 0px; transition-delay: 0.35s; } Эффект #13
Для этого эффекта дефолтная html-структура дополнится только блоком с иконкой:
<div class="effect eff-13"> <img src="img/ef13.jpg" alt="Effect #13" /> <div class="overlay"> <div class="icon"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> В первую очередь, мы меняем стили для изображения. Чтобы у нас была возможность при наведении “отдалить” от нас картинку, ее надо сначала “приблизить”, что достигается увеличением:
.eff-13 img { min-width: 100%; min-height: 100%; transform: scale(1.3); transition: all 0.15s linear 0s; } Дальше даем стили иконке и .overlay. Иконке даем дополнительный transition, чтобы она исчезала спустя 0.1s после запуска анимации (установим на hover), а возвращалась сразу при отмене hover:
.eff-13 .overlay { width: 100%; height: 45px; position: absolute; left: 0; bottom: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-13 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 11px; left: 45%; opacity: 1; transition: all 0.01s linear 0s; } Устанавливаем стили для .caption и его элементов: каждому необходим свой собственный transition, поскольку появляются они с разным значением transition-delay (укажем значение задержки отдельно на hover), а кроме того, выставляем значение прозрачности на 0.
.eff-13 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff-13 .caption h4 { width: 80%; margin: 40px auto 0px auto; background: rgba(0,0,0,0.7); font-weight: 400; text-transform: uppercase; font-size: 22px; padding: 6px 0px; position: relative; opacity: 0; transition: all 0.2s linear 0s; } .eff-13 .caption h4:before { content: ""; width: 0px; height: 0px; display: block; border: 20px solid transparent; border-top: 20px solid rgba(0,0,0,0.7); position: absolute; top: 100%; left: 42%; } .eff-13 .caption p { width: 100%; max-width: calc(80% - 20px); margin: 40px auto 0px auto; background: rgba(0,0,0,0.8); font-weight: 400; padding: 6px 10px; font-size: 14px; opacity: 0; transition: all 0.2s linear 0s; } .eff-13 .caption a { display: inline-block; margin: 30px auto 0px auto; background-color: #7F3B1B; color: inherit; padding: 7px 20px; font-size: 15px; box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2); border-radius: 5px; opacity: 0; text-decoration: none; transition: all 0.2s linear 0s; } Собираем эффект.
Отдаляем изображение, уменьшая его до дефолтного размера:
.eff-13:hover img { transform: scale(1); } Сжимаем к центру подложку и заставляем иконку исчезнуть:
.eff-13:hover .overlay { transform: scaleX(0); transition-delay: 0.1s; } .eff-13:hover .overlay .icon { transition-delay: 0.1s; opacity: 0; } Делаем элементы .caption видимыми:
.eff-13:hover .caption h4, .eff-13:hover .caption p, .eff-13:hover .caption a { opacity: 1; } .eff-13:hover .caption h4 { transition-delay: 0.5s; } .eff-13:hover .caption p { transition-delay: 0.4s; } .eff-13:hover .caption a { transition-delay: 0.3s; } Эффект #14
Для этого эффекта дополним дефолтную html-структуру полупрозрачным блоком с иконкой:
<div class="effect eff-14"> <img src="img/ef14.jpg" alt="Effect #14" /> <div class="overlay"> <div class="icon"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Сначала стилизуем картинку. Чтобы ее можно было подвинуть таким образом, мы добавляем ей столько дополнительных пикселей к ширине, на сколько планируем двигать, и к высоте, соответственно, чтобы не нарушить пропорций. Заранее смещаем картинку на добавленное число пикселей в направлении, противоположном движению, чтобы подвинуть слева направо. Если не сместим, получим движение справа налево.
.eff-14 img { min-width: 100%; min-height: 100%; height: calc(100% + 30px); width: calc(100% + 30px); transform: translate(-30px,0); transition: all 0.15s linear 0s; } Теперь зададим полупрозрачный блок с иконкой, о необходимости transition для которой я подробнее рассказывала для эффекта #13:
.eff-14 .overlay { width: 100%; height: 45px; position: absolute; left: 0; bottom: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-14 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 11px; left: 45%; transition: all 0.01s linear 0s; } Проставляем стили для элементов .caption. В этот раз значение transition-timing-function будет сложнее, чем обычно, чтобы создать bounce-эффект, кроме того, смещаем их вверх, на высоту, с которой им предстоит “падать”:
.eff-14 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff-14 .caption h4 { width: 80%; margin: 40px auto 0px auto; background: rgba(0,0,0,0.7); font-weight: 400; text-transform: uppercase; font-size: 22px; padding: 6px 0px; position: relative; top: -200px; transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s; } .eff-14 .caption h4:before { content: ""; width: 0px; height: 0px; display: block; border: 20px solid transparent; border-top: 20px solid rgba(0,0,0,0.7); position: absolute; top: 100%; left: 42%; } .eff-14 .caption p { width: 100%; max-width: calc(80% - 20px); margin: 40px auto 0px auto; background: rgba(0,0,0,0.8); font-weight: 400; padding: 6px 10px; font-size: 14px; position: relative; top: -250px; transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s; } .eff-14 .caption a { display: inline-block; margin: 30px auto 0px auto; background-color: #7F3B1B; color: inherit; padding: 7px 20px; font-size: 15px; box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2); border-radius: 5px; top: -300px; position: relative; text-decoration: none; transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s; } Собираем эффект.
Смещаем картинку слева направо. Если бы нам понадобилось смещать ее справа налево, то здесь мы бы указали необходимое число пикселей в первом параметре, а в дефолтном значении выше проставили бы в этом параметре 0px:
.eff-14:hover img { transform: translate(0,0); } Дальше уменьшаем подложку:
.eff-14:hover .overlay { transform: scaleX(0); transition-delay: 0.1s; } .eff-14:hover .overlay .icon { transition-delay: 0.1s; opacity: 0; } И опускаем элементы .caption:
.eff-14:hover .caption h4, .eff-14:hover .caption p, .eff-14:hover .caption a { top: 0px; } .eff-14:hover .caption h4 { transition-delay: 0.5s; } .eff-14:hover .caption p { transition-delay: 0.4s; } .eff-14:hover .caption a { transition-delay: 0.3s; } Эффект #15
Для этого эффекта дополним дефолтную html-структуру полупрозрачным блоком с иконкой:
<div class="effect eff-15"> <img src="img/ef15.jpg" alt="Effect #15" /> <div class="overlay"> <div class="icon"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Стилизуем картинку. В этом эффекте мы двигаем ее и слева направо, и сверху вниз, и увеличиваем. Таким образом, мы увеличиваем ее ширину и высоту на количество пикселей, на которое собираемся двигать по горизонтали и вертикали (оно должным быть равным, иначе исказятся пропорции картинки), далее, сдвигаем саму картинку влево и вверх на столько же пикселей, чтобы оттуда можно было двигать вправо и вниз (если мы это не сделаем, а укажем количество пикселей на hover, то сможем подвинуть картинку снизу вверх и справа налево):
.eff-15 img { min-width: 100%; min-height: 100%; height: calc(100% + 30px); width: calc(100% + 30px); transform: translate(-30px,-30px) scale(1); transition: all 0.15s linear 0s; } Теперь зададим полупрозрачный блок с иконкой, о необходимости transition для которой я подробнее рассказывала для эффекта #13:
.eff-15 .overlay { width: 100%; height: 45px; position: absolute; left: 0; bottom: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-15 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 11px; left: 45%; transition: all 0.01s linear 0s; } И зададим стили для элементов .caption. Устанавливаем значение transition-timing-function, чтобы создать bounce-эффект, кроме того, смещаем их влево, за пределы блока с эффектом:
.eff-15 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff-15 .caption h4 { width: 80%; margin: 40px auto 0px auto; background: rgba(0,0,0,0.7); font-weight: 400; text-transform: uppercase; font-size: 22px; padding: 6px 0px; position: relative; left: 400px; transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s; } .eff-15 .caption h4:before { content: ""; width: 0px; height: 0px; display: block; border: 20px solid transparent; border-top: 20px solid rgba(0,0,0,0.7); position: absolute; top: 100%; left: 42%; } .eff-15 .caption p { width: 100%; max-width: -webkit-calc(80% - 20px); max-width: -o-calc(80% - 20px); max-width: -moz-calc(80% - 20px); max-width: -ms-calc(80% - 20px); max-width: calc(80% - 20px); margin: 40px auto 0px auto; background: rgba(0,0,0,0.8); font-weight: 400; padding: 6px 10px; font-size: 14px; position: relative; left: 400px; transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s; } .eff-15 .caption a { display: inline-block; margin: 30px auto 0px auto; background-color: #7F3B1B; color: inherit; padding: 7px 20px; font-size: 15px; box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2); border-radius: 5px; left: 400px; position: relative; text-decoration: none; transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s; } Собираем эффект.
Смещаем картинку и увеличиваем. Если бы нам понадобилось двигать ее влево и вверх, мы проставили бы здесь в обоих параметрах translate нужное количество пикселей, а в дефолтном значении проставили бы нулевые значения:
.eff-15:hover img { transform: translate(0px,0px) scale(1.1); } Уменьшаем подложку:
.eff-15:hover .overlay { transform: scaleX(0); transition-delay: 0.1s; } .eff-15:hover .overlay .icon { transition-delay: 0.1s; opacity: 0; } И выдвигаем на место элементы .caption:
.eff-15:hover .caption h4, .eff-15:hover .caption p, .eff-15:hover .caption a { left: 0px; } .eff-15:hover .caption h4 { transition-delay: 0.3s; } .eff-15:hover .caption p { transition-delay: 0.35s; } .eff-15:hover .caption a { transition-delay: 0.4s; } Эффект #16
Для этого эффекта мы дополняем дефолтную html-структуру блоком с подложкой и блоком с треугольными секторами:
<div class="effect eff-16"> <img src="img/ef16.jpg" alt="Effect #16" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> <div class="triangle triangle-3"></div> <div class="triangle triangle-4"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Стилизуем подложку с иконкой:
.eff-16 .overlay { width: 45px; height: 100%; position: absolute; right: 0; top: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-16 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 46%; left: 6px; } Стили для .triangle-set:
.eff-16 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } Теперь переходим непосредственно к треугольникам. Чтобы создать равносторонний треугольник, требуется взять блок, задать ему ширину и высоту — 0px, задать ему прозрачный border такой ширины, какая должна быть высота вашего тр0еугольника, а после этого задать цветной border такой же ширины в одном из четырех направлений, чтобы сформировать треугольник в нужную сторону.
Вот общие стили для всех треугольников эффекта. Пока тут заданы только прозрачные границы:
.eff-16 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; opacity: 0; transition: all 0.2s linear 0s; } Теперь добавляем стили для каждого из треугольников. Для треугольника, “направленного” вниз, задаем цветной border-top:
.eff-16 .triangle-1 { border-top: 150px solid rgba(255,255,255,0.6); top: 0px; left: 0px; } Для “направленных” вправо, вверх и влево тоже задаем border соответственно направлению:
.eff-16 .triangle-2 { border-right: 150px solid rgba(255,255,255,0.6); top: 0px; right: 0px; } .eff-16 .triangle-3 { border-bottom: 150px solid rgba(255,255,255,0.6); bottom: 0px; right: 0px; } .eff-16 .triangle-4 { border-left: 150px solid rgba(255,255,255,0.6); bottom: 0px; left: 0px; } Скрываем .caption за левым краем блока с эффектом:
.eff-16 .caption { position: absolute; top: 0px; left: -100%; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; } Стили элементов .caption остаются дефолтными.
Собираем эффект.
Сначала исчезает .overlay:
.eff-16:hover .overlay { right: -45px; } .eff-16:hover .overlay .icon { opacity: 0; } Потом по одному начинают появляться треугольники:
.eff-16:hover .triangle { opacity: 1; } .eff-16:hover .triangle-1 { transition-delay: 0.2s; } .eff-16:hover .triangle-2 { transition-delay: 0.55s; } .eff-16:hover .triangle-3 { transition-delay: 0.4s; } .eff-16:hover .triangle-4 { transition-delay: 0.35s; } И, наконец, выезжает .caption:
.eff-16:hover .caption { left: 0px; transition-delay: 0.6s; } Эффект #17
Для этого эффекта мы дополняем дефолтную html-структуру блоком с подложкой и блоком с треугольными секторами:
<div class="effect eff-17"> <img src="img/ef17.jpg" alt="Effect #17" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> <div class="triangle triangle-3"></div> <div class="triangle triangle-4"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Стилизуем .overlay и иконку:
.eff-17 .overlay { width: 45px; height: 100%; position: absolute; right: 0; top: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-17 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 46%; left: 6px; } Стили для .triangle-set:
.eff-17 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } О том, как именно составляются равносторонние треугольники, я писала подробнее в эффекте #16. В данном случае, мы еще и разворачиваем каждый треугольник на 90 градусов:
.eff-17 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; opacity: 0; transform: rotate(-90deg); transition: all 0.2s linear 0s; } И стили для каждого треугольника:
.eff-17 .triangle-1 { border-top: 150px solid rgba(255,255,255,0.6); top: 0px; left: 0px; } .eff-17 .triangle-2 { border-right: 150px solid rgba(255,255,255,0.6); top: 0px; right: 0px; } .eff-17 .triangle-3 { border-bottom: 150px solid rgba(255,255,255,0.6); bottom: 0px; right: 0px; } .eff-17 .triangle-4 { border-left: 150px solid rgba(255,255,255,0.6); bottom: 0px; left: 0px; } Осталось скрыть .caption:
.eff-17 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; opacity: 0; transition: all 0.2s linear 0s; } У элементов .caption остаются дефолтные стили.
Собираем эффект.
Сначала убираем .overlay:
.eff-17:hover .overlay { right: -45px; } .eff-17:hover .overlay .icon { opacity: 0; } Проявляем и разворачиваем треугольники:
.eff-17:hover .triangle { opacity: 1; transform: rotate(0deg); } .eff-17:hover .triangle-1 { transition-delay: 0.2s; } .eff-17:hover .triangle-2 { transition-delay: 0.35s; } .eff-17:hover .triangle-3 { transition-delay: 0.4s; } .eff-17:hover .triangle-4 { transition-delay: 0.55s; } И появляется .caption:
.eff-17:hover .caption { opacity: 1; transition-delay: 0.6s; } Эффект #18
Для этого эффекта мы дополняем дефолтную html-структуру блоком с подложкой и блоком с треугольными секторами:
<div class="effect eff-18"> <img src="img/ef18.jpg" alt="Effect #18" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> <div class="triangle triangle-3"></div> <div class="triangle triangle-4"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Стилизуем подложку и иконку:
.eff-18 .overlay { width: 45px; height: 100%; position: absolute; right: 0; top: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-18 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 46%; left: 6px; } Добавляем треугольники. Подробнее о том, как создавать треугольники, я писала к эффекту #16. Сначала стили для .triangle-set:
.eff-18 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } Далее наша задача уменьшить треугольники. Scale здесь не поможет: ширина и высота блоков, все равно, равна 0px, поэтому уменьшать размер мы будем с помощью изменения ширины border:
.eff-18 .triangle { position: absolute; width: 0px; height: 0px; opacity: 0; border: 5px solid transparent; transition: opacity 0.15s linear 0s, border-width 0.35s linear 0.1s; } И прячем .caption вниз, за край блока с эффектом:
.eff-18 .caption { position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; } У элементов .caption стили остаются дефолтными.
Собираем эффект.
Убираем .overlay:
.eff-18:hover .overlay { right: -45px; } .eff-18:hover .overlay .icon { opacity: 0; } Меняем прозрачность и размер треугольников:
.eff-18:hover .triangle { opacity: 1; border-width: 150px; } И выдвигаем вверх .caption:
.eff-18:hover .caption { top: 0px; transition-delay: 0.35s } Эффект #19
Как и для предыдущих трех эффектов, мы дополняем дефолтную html-структуру полупрозрачным блоком с иконкой и блоком с треугольниками:
<div class="effect eff-19"> <img src="img/ef19.jpg" alt="Effect #19" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> <div class="triangle triangle-3"></div> <div class="triangle triangle-4"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> В первую очередь, стилизуем шестиугольник. Чтобы шестиугольник получился, его надо разобрать на три части: прямоугольник в середине и два треугольника, верхний и нижний. О том, как составлять простые равносторонние треугольники, я уже рассказывала в эффекте #16, но в данном случае нам понадобится чуть усложненный вариант. Чтобы создать равнобедренный треугольник, достаточно дать ему прозрачные border одного размера, а видимый border — другого (как мы помним, видимый border регулирует высоту треугольника):
.eff-19 .overlay { width: 100px; height: 60px; position: absolute; left: 102px; top: 119px; background: rgba(255,255,255,0.6); transition: all 0.2s linear 0s; } .eff-19 .overlay:before { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-bottom: 25px solid rgba(255,255,255,0.6); position: absolute; top: -75px; left: 0px; } .eff-19 .overlay:after { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-top: 25px solid rgba(255,255,255,0.6); position: absolute; top: 60px; left: 0px; } И иконка:
.eff-19 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 20px; left: 32px; } Теперь применим эти знания, чтобы создать четыре треугольника, появляющихся при наведении.
Стили для .triangle-set:
.eff-19 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } Стили для треугольников. Сейчас их видимые .border равны 0px, об этом я подробнее рассказывала в эффекте #18:
.eff-19 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; transition: all 0.3s linear 0s; } .eff-19 .triangle-1 { border-top: 0px solid rgba(255,255,255,0.6); top: 0px; left: 0px; } .eff-19 .triangle-2 { border-right: 0px solid rgba(255,255,255,0.6); top: 0px; right: 0px; } .eff-19 .triangle-3 { border-bottom: 0px solid rgba(255,255,255,0.6); bottom: 0px; right: 0px; } .eff-19 .triangle-4 { border-left: 0px solid rgba(255,255,255,0.6); bottom: 0px; left: 0px; } Прячем .caption:
.eff-19 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; opacity: 0; transition: all 0.2s linear 0s; } У прочих элементов .caption стили остаются дефолтными.
Собираем эффект.
Прячем .overlay, он крутится и становится прозрачным. Прокручиваем его на такое количество градусов, чтобы вращение не было ни слишком быстрым, ни слишком медленным:
.eff-19:hover .overlay { transform: rotate(200deg); opacity: 0; } .eff-19:hover .overlay .icon { opacity: 0; } Теперь появляются треугольники:
.eff-19:hover .triangle { opacity: 1; transition-delay: 0.2s; } .eff-19:hover .triangle-1 { border-top: 30px solid rgba(255,255,255,0.7); } .eff-19:hover .triangle-2 { border-right: 30px solid rgba(255,255,255,0.7); } .eff-19:hover .triangle-3 { border-bottom: 30px solid rgba(255,255,255,0.7); } .eff-19:hover .triangle-4 { border-left: 30px solid rgba(255,255,255,0.7); } И .caption:
.eff-19:hover .caption { opacity: 1; transition-delay: 0.3s; } Эффект #20
Для создания этого эффекта дополняем дефолтную html-структуру шестиугольным блоком с иконкой и блоком с двумя элементами, которые будут появляться в правом нижнем и левом верхнем углах эффекта:
<div class="effect eff-20"> <img src="img/ef20.jpeg" alt="Effect #20" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Стилизуем .overlay. Про создание шестиугольников более подробно я рассказывала в эффекте #19:
.eff-20 .overlay { width: 100px; height: 60px; position: absolute; left: 102px; top: 119px; background: rgba(255,255,255,0.6); transition: all 0.2s linear 0s; } .eff-20 .overlay:before { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-bottom: 25px solid rgba(255,255,255,0.6); position: absolute; top: -75px; left: 0px; } .eff-20 .overlay:after { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-top: 25px solid rgba(255,255,255,0.6); position: absolute; top: 60px; left: 0px; } .eff-20 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 20px; left: 32px; } Стили для .triangle-set:
.eff-20 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } Теперь поговорим об угловых блоках. Как мы помним, чтобы создать треугольник, мы создаем блок с шириной и высотой, равными 0px, делаем все border прозрачными, кроме той, что определяет направление треугольника. Для того, чтобы создать блоки, подобные этому, необходимо сделать непрозрачными два border, а не один. Для левого верхнего элемента — левый и верхний border, для нижнего правого — нижний и правый соответственно. Кроме того, мы сдвигаем каждый блок на 100% влево и вправо за пределы блока с эффектом соответственно:
.eff-20 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; transition: all 0.3s linear 0s; } .eff-20 .triangle-1 { border-top: 40px solid rgba(255,255,255,0.6); border-left: 40px solid rgba(255,255,255,0.6); top: 0px; left: -100%; } .eff-20 .triangle-2 { border-right: 40px solid rgba(255,255,255,0.6); border-bottom: 40px solid rgba(255,255,255,0.6); bottom: 0px; right: -100%; } Для .caption важно обозначить более сложный transition-timing-function, чтобы .caption, как бы упруго подскакивал при выезжании снизу:
.eff-20 .caption { position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s; } Стили для элементов .caption остаются дефолтными.
Собираем эффект.
Закручиваем .overlay, более подробно о выборе оптимального количества градусов, я рассказывала в эффекте #19:
.eff-20:hover .overlay { transform: rotate(200deg); opacity: 0; } .eff-20:hover .overlay .icon { opacity: 0; } Выдвигаем блоки в углы:
.eff-20:hover .triangle { transition-delay: 0.2s; } .eff-20:hover .triangle-1 { left: 0px; } .eff-20:hover .triangle-2 { right: 0px; } И выдвигаем .caption снизу:
.eff-20:hover .caption { top: 0px; transition-delay: 0.5s; } Эффект #21
Для создания этого эффекта, нам понадобится, кроме дефолтной html-структуры, блок с подложкой и иконкой и блок с полупрозрачным элементом, появляющимся при наведении:
<div class="effect eff-21"> <img src="img/ef21.jpg" alt="Effect #21" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle"></div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Стилизуем .overlay. Про создание шестиугольников более подробно я рассказывала в эффекте #19:
.eff-21 .overlay { width: 100px; height: 60px; position: absolute; left: 102px; top: 119px; background: rgba(255,255,255,0.6); transition: all 0.2s linear 0s; } .eff-21 .overlay:before { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-bottom: 25px solid rgba(255,255,255,0.6); position: absolute; top: -75px; left: 0px; } .eff-21 .overlay:after { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-top: 25px solid rgba(255,255,255,0.6); position: absolute; top: 60px; left: 0px; } .eff-21 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 20px; left: 32px; } Стилизуем .triangle. В отличие от треугольников, о которых я рассказывала в эффекте #18, и для которых нужно, чтобы только один border был видимым, в отличие от угловых элементов из эффекта #20, строящегося на двух видимых border, этот элемент строится на трех. С помощью значения border-left мы можем контролировать размер треугольной выемки по левому краю. Прямо сейчас мы выставляем слишком большое значение border-left, и потому никакой выемки нет:
.eff-21 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; border-top: 150px solid rgba(255,255,255,0.6); border-left: 500px solid rgba(255,255,255,0.6); border-bottom: 150px solid rgba(255,255,255,0.6); top: 0px; left: 0px; opacity: 0; transition: all 0.3s linear 0s; } Прячем .caption за левый край экрана и устанавливаем более сложный transition-timing-function:
.eff-21 .caption { position: absolute; top: 0px; left: -100%; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s; } Внутренние элементы .caption остаются с дефолтными стилями.
Теперь собираем эффект.
Закручиваем .overlay, более подробно о выборе оптимального количества градусов, я рассказывала в эффекте #19:
.eff-21:hover .overlay { transform: rotate(200deg); opacity: 0; } .eff-21:hover .overlay .icon { opacity: 0; } Делаем .triangle непрозрачным и формируем у него треугольную выемку, изменяя свойство .border-left:
.eff-21:hover .triangle { opacity: 1; border-left: 100px solid rgba(255,255,255,0.6); } И выдвигаем .caption:
.eff-21:hover .caption { left: 0px; transition-delay: 0.3s; } ссылка на оригинал статьи http://habrahabr.ru/post/274005/
Добавить комментарий