DavidGuetta Опубликовано 4 июня, 2015 Поделиться Опубликовано 4 июня, 2015 Подскажите код и .hover этих блоков видел тут _fastfrag.ru Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
DavidGuetta Опубликовано 11 июня, 2015 Автор Поделиться Опубликовано 11 июня, 2015 up Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
hawk2012 Опубликовано 12 июня, 2015 Поделиться Опубликовано 12 июня, 2015 (изменено) Код: <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; } Изменено 12 июня, 2015 пользователем hawk2012 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
DavidGuetta Опубликовано 13 июня, 2015 Автор Поделиться Опубликовано 13 июня, 2015 а Код: <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 забыл( Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Zaxar_D Опубликовано 13 июня, 2015 Поделиться Опубликовано 13 июня, 2015 <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> Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.