Posted 4 июня, 20159 yr comment_88364 Подскажите код и .hover этих блоков видел тут _fastfrag.ru Link to comment https://ipbmafia.ru/topic/11574-bloki/ Share on other sites Больше вариантов
11 июня, 20159 yr Author comment_88783 up Link to comment https://ipbmafia.ru/topic/11574-bloki/?&do=findComment&comment=88783 Share on other sites Больше вариантов
12 июня, 20159 yr comment_88839 Код: <div class='_sbcollapsable' style='padding: 10px;'> <ul class="item50"> <a href="#"><li class="item55"> <div class="item60"> <i class="fa fa-vk" style="font-size: 40px; margin-bottom: 10px; };"></i> Мы Вконтакте </div> </li></a> <a href="#"><li class="item55"> <div class="item60"> <i class="fa fa-steam" style="font-size: 40px; margin-bottom: 10px; };"></i> Мы В STEAM </div> </li> </a> </ul> Код стиля: .item50 { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .item55 { position: relative; margin: 5px; padding: 0; max-width: 200px; min-width: 100px; -webkit-box-flex: 1; -webkit-flex: 1 100px; -ms-flex: 1 100px; flex: 1 100px; height: 100px; text-align: center; border-radius: 3px; border: 2px solid rgba(152, 151, 151, 0.76); background: rgba(152, 151, 151, 0.76); cursor: pointer; } .item60 { position: relative; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-transform: uppercase; color: #fff; z-index: 10; } Edited 12 июня, 20159 yr by hawk2012 Link to comment https://ipbmafia.ru/topic/11574-bloki/?&do=findComment&comment=88839 Share on other sites Больше вариантов
13 июня, 20159 yr Author comment_88893 а Код: <div class='_sbcollapsable' style='padding: 10px;'> <ul class="item50"> <a href="#"><li class="item55"> <div class="item60"> <i class="fa fa-vk" style="font-size: 40px; margin-bottom: 10px; };"></i> Мы Вконтакте </div> </li></a> <a href="#"><li class="item55"> <div class="item60"> <i class="fa fa-steam" style="font-size: 40px; margin-bottom: 10px; };"></i> Мы В STEAM </div> </li> </a> </ul> Код стиля: .item50 { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .item55 { position: relative; margin: 5px; padding: 0; max-width: 200px; min-width: 100px; -webkit-box-flex: 1; -webkit-flex: 1 100px; -ms-flex: 1 100px; flex: 1 100px; height: 100px; text-align: center; border-radius: 3px; border: 2px solid rgba(152, 151, 151, 0.76); background: rgba(152, 151, 151, 0.76); cursor: pointer; } .item60 { position: relative; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-transform: uppercase; color: #fff; z-index: 10; } а .hover забыл( Link to comment https://ipbmafia.ru/topic/11574-bloki/?&do=findComment&comment=88893 Share on other sites Больше вариантов
13 июня, 20159 yr comment_88900 <div class='_sbcollapsable' style='padding: 10px;'> <ul class="item50"> <a href="https://vk.com/fastfrager"><li class="item55"> <div class="item60"> <i class="fa fa-vk" style=" font-size: 40px; margin-bottom: 10px; }; "></i> Мы Вконтакте </div> </li></a> <a href="http://steamcommunity.com/groups/fastfrager"><li class="item55"> <div class="item60"> <i class="fa fa-steam" style=" font-size: 40px; margin-bottom: 10px; }; "></i> Мы В STEAM </div> </li></a> </ul> <style> .item50 { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .item55 { position: relative; margin: 5px; padding: 0; max-width: 200px; min-width: 100px; -webkit-box-flex: 1; -webkit-flex: 1 100px; -ms-flex: 1 100px; flex: 1 100px; height: 100px; text-align: center; border-radius: 3px; border: 2px solid rgba(152, 151, 151, 0.76); background: rgba(152, 151, 151, 0.76); cursor: pointer; } .item60 { position: relative; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-transform: uppercase; color: #fff; z-index: 10; } .item55:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 0; height: 0; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: .5s ease all, 2s linear -webkit-transform, 0s linear top, 0s linear left; transition: .5s ease all, 2s linear transform, 0s linear top, 0s linear left; border-radius: 300px; background: #fff; z-index: 1; } .item55:hover:before { content: ''; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); border-radius: 0; -webkit-transition: .5s ease all, .1s linear -webkit-transform, 0s linear top, 0s linear left; transition: .5s ease all, .1s linear transform, 0s linear top, 0s linear left; } .item55:hover .item60 { color: rgb(176, 176, 176); } </style> </div> Link to comment https://ipbmafia.ru/topic/11574-bloki/?&do=findComment&comment=88900 Share on other sites Больше вариантов
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.