Лідери

Привет, чтобы сделать такой блок: Нужно в любое удобное для вас место, вставить вот этот код: <div class="_sbcollapsable"> <ul class="item50"> <a href="https://vk.com/***"><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/***"><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>

Всем привет, сегодня я вам покажу как сделать такой ник: Создаем группу, к которой хотим подключить CSS. В Префикс имени пользователя пишем это: <span class="voodnik"> А в Суффикс имени пользователя: </span> А в style.css это: .voodnik { background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ); background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ); color: rgba(0, 0, 0, 0.47); -webkit-background-clip: text; background-clip: text; } Таким образом мы подключим CSS к нашей группе.

Как же все таки сделать такое меню? Ответ прост. В любое удобное место вставляем код: <div class="_sbcollapsable"> <ul class="main_menu"> <li> <a href="http://truegames.ru/index.php?/forum/61-%d0%b7%d0%b0%d1%8f%d0%b2%d0%ba%d0%b8-%d0%bd%d0%b0-%d1%80%d0%b0%d0%b7%d0%b1%d0%b0%d0%bd/"><font color="#B7C351">Заявки на разбан</font></a> </li> <li> <a href="http://truegames.ru/index.php?/forum/47-%d0%b6%d0%b0%d0%bb%d0%be%d0%b1%d1%8b-%d0%bd%d0%b0-%d0%b0%d0%b4%d0%bc%d0%b8%d0%bd%d0%be%d0%b2/"><font color="#B7C351">Жалобы на Админов</font></a> </li> <li> <a href="http://truegames.ru/index.php?/topic/9389-%D1%81%D0%BD%D1%8F%D1%82%D1%8B%D0%B5-%D0%B0%D0%B4%D0%BC%D0%B8%D0%BD-%D0%BF%D1%80%D0%B8%D0%B2%D0%B8%D0%BB%D0%B5%D0%B3%D0%B8%D0%B8/">Список снятых Администраторов</a> </li> <li> <a href="http://truegames.ru/index.php?/topic/16632-%D0%BF%D0%B5%D1%80%D0%B5%D1%87%D0%B5%D0%BD%D1%8C-%D1%81%D0%BC%D0%BE%D1%82%D1%80%D0%B8%D1%82%D0%B5%D0%BB%D0%B5%D0%B9-%D0%B2%D1%81%D0%B5%D1%85-%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80%D0%BE%D0%B2/">Список Смотрителей серверов</a> </li> <li> <a href="http://truegames.ru/index.php?/forum/39-%D0%BE%D0%B1%D0%BD%D0%BE%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80%D0%BE%D0%B2/">Обновления на Серверах</a> </li> <li> <a href="http://truegames.ru/index.php?/topic/7764-%D0%BE-%D1%80%D0%B0%D0%B7%D0%BD%D0%BE%D0%BC-%D0%BA%D0%BE%D0%BC%D0%BD%D0%B0%D1%82%D0%B0-%D0%BE%D0%B1%D1%89%D0%B5%D0%BD%D0%B8%D1%8F-1/page__hl__%D1%84%D0%BB%D1%83%D0%B4%D0%B8%D0%BB%D0%BA%D0%B0">Флудилка - общение</a> </li> <a href="http://buy.truegames.ru/" class="menu_admin">Онлайн покупка Админ/VIP</a> </ul> </div> </div> А вот и сам Style: .main_menu li a:hover { background-color: #499343; border-radius: 2px; color: #c9c43a; } a:hover { color: #222; } .main_menu { position: relative; background: #282828; padding: 15px 2px 4px; } .main_menu li:first-child { border-top: 0; } .main_menu li { border-bottom: 1px solid #040404; border-top: 1px solid rgba(255, 0, 0, .16); } .main_menu li a { background-image: url(http://truegames.ru/public/style_images/tg/triagle_menu.png); background-repeat: no-repeat; background-position: 16px center; font-style: oblique; text-shadow: 0 1px 1px rgba(0,0,0,0.48); color: #eee; display: block; transition: 200ms ease; height: 21px; padding: 0 0 0 35px; font-size: 14px; line-height: 21px; } .menu_admin { font-size: 14px; text-align: center; display: block; height: 35px; line-height: 35px; background: #d14c4c; font-style: oblique; border: 1px solid #e25f5f; color: #eee; text-shadow: 0 1px 1px rgba(0,0,0,0.48); }