Верстка трех видов социальных иконок.
Первая иконка 3d вида, при наведении мышкой поднимается вверх и меняет цвет.
Сделаем каркас для иконки в html.
Зададим секцию с идентификатором id=iconisometric, внутри будет контейнер со списком ul.
Класс у списка зададим iconisometric-ul3.
Список состоит из двух элементов li с ссылками и иконок шрифта font awesome социальных сетей контакта vk и facebook.
1 2 3 4 5 6 7 8 9 10 |
<section id="iconisometric"> <div class="container"> <div class="row"> <ul class="iconisometric-ul3"> <li><a href="#"><i class="fa fa-vk" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> </ul> </div> </div> </section> |
Содержание статьи
Стиль для 3d иконки социальной сети.
Для списка задаем свойство display: flex, чтобы появилось две оси X и Y, также иконки встали в строку.
У элемента списка li уберем точки list-style: none и установим внешние отступы margin: 50px 30px.
Для ссылок position: relative и сделаем блочными элементы display: block, чтобы задать ширину и высоту 70 пикселей для круга, в котором будет иконка.
transform: perspective (1000px) rotate (-30deg) skew (25deg) translate (0,0).
Изменяем перспективу perspective, поворачиваем rotate, деформируем стороны относительно осей X и Y свойством skew и сдвигаем элементы на новое место translate.
Установим плавную анимацию transition: .5s.
Две стороны у иконки зададим элементами.
- &:before будет абсолютное позиционирование. Теперь высоту height: 100% и ширину 20 пикселей. Сместим вверх на top: 10px и в лево left: -20px. Цвет будет серым background-color: #b1b1b1, как тень падает на боковые стороны. Установим под квадрат полоску свойством transform: rotate (0deg) skewX (-45deg).
- &:after Копируем из before и меняем свойства на противоположные.
- &:hover При наведении мышки на иконку они будет подниматься на 20 пикселей вверх transform: perspective (1000px) rotate (-30deg) skew (25deg) translate (20px, -20px) и под иконкой будет появляться серая тень box-shadow: -50px 50px 50px rgba (0,0,0,.5).
Стилизуем иконку fa.
Сделаем по больше размер font-size: 30px, отцентрируем по вертикали line-height: 70px.
Добавим плавное нажатие transition: .5s при наведении мышкой &:hover, сделаем цвет шрифта белый.
Установим стили на 3d кнопку, когда она приподнимется.
Чтобы поменять цвета при наведении у элементов каждой стороны будем использовать &:nth-child (n) это псевдокласс, который на основе номера позиции в списке li выбирает дочерние элементы.
- Для ссылки задаем цвет background-color: #4c75a3.
- У &:before будет потемнее цвет background-color: #2e4a79.
- У &:after посветлее цвет background-color: #4a71ad.
Для второй иконки также подбираем цвета.
Код в main.sass.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
.iconisometric &-ul3 position: absolute display: flex li list-style: none margin: 50px 30px a position: relative display: block width: 70px height: 70px right: 30px background-color: #fff text-align: center transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0) transition: .5s box-shadow: -20px 20px 10px rgba(0,0,0,.5) &:before content: '' position: absolute top: 10px left: -20px height: 100% width: 20px background-color: #b1b1b1 transition: .5s transform: rotate(0deg) skewY(-45deg) &:after content: '' position: absolute bottom: -20px left: -10px height: 20px width: 100% background-color: #b1b1b1 transition: .5s transform: rotate(0deg) skewX(-45deg) &:hover transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px,-20px) box-shadow: -50px 50px 50px rgba(0,0,0,.5) .fa font-size: 30px color: #b641b0 line-height: 70px transition: .5s &:hover color: #fff .iconisometric-ul3 li &:hover .fa color: #fff &:nth-child(2) a background-color: #4c75a3 &:before background-color: #2e4a79 &:after background-color: #4a71ad &:nth-child(1) a background-color: #0077b5 &:before background-color: #036aa0 &:after background-color: #0d82bf |
Иконка социальных сетей изменяет размеры и цвет при наведении.
index.html.
1 2 3 4 5 6 7 8 9 10 |
<section id="icons"> <div class="container"> <div class="row"> <ul class="icon1"> <li><a href="#"><i class="fa fa-vk" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> </ul> </div> </div> </section> |
Код в main.sass.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
ul.icon1 position: absolute display: flex li list-style-type: none margin: 50px 15px a position: relative display: block width: 90px height: 90px text-align: center line-height: 90px background-color: blue color: #fff border-radius: 50% transition: .5s &:before content: '' position: absolute top: 0 left: 0 width: 100% height: 100% border-radius: 50% background-color: #b641b0 transition: .5s transform: scale(.9) z-index: -1 box-shadow: 0 0 45px #b641b0 &:hover transform: scale(1.1) font-size: 2em color: blue box-shadow: 0 0 5px blue text-shadow: 0 0 5px blue |
Иконка с эффектом нажатия, изменяет цвет и прокручивается изображение иконки.
index.html.
1 2 3 4 5 6 7 8 9 10 |
<section id="icon2"> <div class="container"> <div class="row"> <ul class="icon2-ul2"> <li><a href="#"><i class="fa fa-vk" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> </ul> </div> </div> </section> |
Код в main.sass.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
ul.icon2-ul2 position: absolute display: flex li list-style-type: none margin: 50px 15px a position: relative display: block width: 90px height: 90px text-align: center text-decoration: none line-height: 90px background-color: #f3f3f3 min-height: 0 10px padding: 10px box-sizing: border-box box-shadow: 0 10px 15px rgba(0,0,0,0.3) background: linear-gradient(180deg, #ddd, #fff) border-radius: 50% transition: .5s .fa width: 100% height: 100% display: block border-radius: 50% line-height: 70px font-size: 2em color: #272727 background: linear-gradient(180deg, #ddd, #fff) transition: .5s &:hover box-shadow: 0 1px 3px rgba(0,0,0,0.3) ul.icon2-ul2 li a:hover .fa transform: rotateY(360deg) |