06 Окт
2019
0Комментарии2019
Красивые социальные иконки CSS
Красивые социальные иконки с 3D эффектом.
Код HTML
1 2 3 4 5 6 7 8 | <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <ul class="socialIcons"> <li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li> <li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li> <li><a class="instagram" href="#"><i class="fa fa-instagram"></i></a></li> <li><a class="youtube" href="#"><i class="fa fa-youtube"></i></a></li> </ul> |
Код CSS
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 | .socialIcons { padding: 0; margin: 0; list-style: none; display: inline-block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: auto; height: 90px; text-align: center; } .socialIcons li { display: inline-block; margin: auto 10px; } .socialIcons li a { text-align: center; display: inline-block; font-size: 4rem; height: 100px; width: 100px; line-height: 100px; color: #fff5b2; transition: all .5s ease; transform-origin: left; transform: rotateY(-30deg); text-shadow: 10px 0px 1px #131313, 10px 0px 1px #070707, 10px 0px 1px black, 10px 0px 1px black; } .socialIcons li a:hover { color: #202020; transform: rotate(0deg); text-shadow: 0px 0px 1px #131313, 0px 0px 1px #070707, 0px 0px 1px black, 0px 0px 1px black; } |
Нет комментариев