Чтение RSS
По вопросам сотрудничества и рекламы на портале MixliP, обращаться на почту admin@turklib.ru
MixliP - Территория вебмастера! На нашем сайте вы найдете все для веб-мастеров и не только =) ! Различные скрипты для вашего сайта. И еще на нашем сайте немало софта! Заходи не пожалеешь!


ВЫЕЗЖАЮЩИЕ ИКОНКИ МЕНЮ ПРИ НАВЕДЕНИИ

ВЫЕЗЖАЮЩИЕ ИКОНКИ МЕНЮ ПРИ НАВЕДЕНИИ

Меню с векторными иконками. Слегка спрятанные изначально иконки, выезжают при наведении на них курсора мыши. Очень напоминает популярный плагин социальных иконок для wordpress.
ВЫЕЗЖАЮЩИЕ ИКОНКИ МЕНЮ ПРИ НАВЕДЕНИИ

 <div class="menu">
      <i class="icon-cloud-download azul"></i>
      <i class="icon-camera-retro verde"></i>
      <i class="icon-envelope-alt vermelho"></i>
      <i class="icon-truck laranja"></i>
      <i class="icon-gift roxa"></i>
      <i class="icon-frown azul"></i>
      <i class="icon-linux vermelho"></i>
      <i class="icon-windows verde"></i>
    </div>
 
    <div class="menu">
      <i class="icon-facebook azul"></i>
      <i class="icon-twitter verde"></i>
      <i class="icon-google-plus vermelho"></i>
      <i class="icon-instagram laranja"></i>
      <i class="icon-foursquare roxa"></i>
      <i class="icon-github azul"></i>
      <i class="icon-linkedin vermelho"></i>
      <i class="icon-youtube verde"></i>
    </div>



ВЫЕЗЖАЮЩИЕ ИКОНКИ МЕНЮ ПРИ НАВЕДЕНИИ

Иконки, как и в нашем недавнем примере, также заключены в файл шрифта font-awesome.css.
@import "./css/font-awesome.css";
 
*, *::before, *::after{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box; 
}
 
.azul {
  color: #0F6698;
}
 
.verde {
  color: #669900; 
}
 
.vermelho {
  color: #cc3333;
}
 
.laranja {
  color: #ff6600;
}
 
.roxa {
  color: #663399;
}
 
.verde-claro {
  color: #cccc33;
}
 
.menu {
  border-bottom: 1px solid #000;
  text-align: center;
  height: 60px;
  overflow: hidden;
  margin: 20px auto;
  width: 480px;
  font-size: 3em;
  cursor: default;
}
 
.menu i {
  position: relative;
  top: 30px;
  transition: .2s ease;
}
 
.menu i:hover {
  top: 13px;
}

Просмотры: 2073 Комментарии (0)
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


Владельцы и пользователи сайта MixliP.ru не осуществляют никакой продажи либо перепродажи программных и иных продуктов интеллектуальной собственности. На нашем сайте не хранится ни одного файла или документа, который нарушал бы смежное или авторское право.


Сайт MixliP.ru представляет собой набор новостей и ссылок на внешние общедоступные источники в сети Интернет, не подконтрольные администрации сайта MixliP.ru, а, следовательно, не несет никакой ответственности за их содержание.


Вся информация о программном обеспечении и скриптах, размещенная на данном сайте, предоставлена исключительно в ознакомительных целях и только для просмотра, и призвана помочь посетителям сайта MixliP.ru выбрать для себя и в последствии приобрести соответствующие лицензионные авторские программные продукты.


Читать полностью информацию правообладателям.


Сайт работает на хостинге BEGET.RU


Рекомендует Mixlip.RU





Наши друзья

Полезное

NEW - Анализ сайта

Оптимизация вашего сайта.

Читайте также

 Пользователи онлайн

  • Всего на сайте: 14
    Пользователей: 0
    Гостей: 11
    Роботов: 3
    Yandex Inktomi Spider Google