Правила форума Подписки
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
Web-социальные кнопки с п... (0)
Станция-призрак Янов. Гор... (0)
S.T.A.L.K.E.R.: Я - Призр... (0)
Блудный сын [SoC/ТЧ] (0)
Блок новых фильмов для uC... (0)
У костра (191)
Анекдоты (145)
Города (94)
Обновление сайта (67)
Создание НПС (63)
StraNNik (1311)
RamzeS (523)
Каратель (178)
Narkostalker (127)
Кракен (93)
sksergei2379 (02.05.2019)
olegan1000 (01.05.2019)
andreianfilofev (10.04.2019)
DRO]-[ (09.04.2019)
ilonakisa3 (02.04.2019)
  • Страница 1 из 1
  • 1
Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Разное » Web-социальные кнопки с приятной анимацией (Rip by Бармен)
Web-социальные кнопки с приятной анимацией
StraNNik
StraNNik
Пропуск №: 1
Регистрация: 20.11.2013
Ранг: Легенда
Сообщений: 1311
Карма: 28 | Хабар: 10
Слышу гимн зашитых ртов
Дата: Четверг, 11.04.2019, 16:49/ Сообщение №: 1


[tealtable]Рипал: Бармен[/tealtable]
[kortable]Ссылка на скачивание![/kortable]
Вставляем в Нижнею часть сайта:

Код
<div class="cont">
   <div class="block_title">Еще больше интересного, <b>в моих соцсетях</b></div>
   <div class="grid">
      <a href="#" target="_blank" rel="noopener" class="item">
      <img src="/images/ic_soc1.jpg" alt="">
      </a>
      <a href="#" target="_blank" rel="noopener" class="item">
      <img src="/images/ic_soc2.jpg" alt="">
      </a>
      <a href="#" target="_blank" rel="noopener" class="item">
      <img src="/images/ic_soc3.jpg" alt="">
      </a>
      <a href="#" target="_blank" rel="noopener" class="item">
      <img src="/images/ic_soc4.jpg" alt="">
      </a>
      <a href="#" target="_blank" rel="noopener" class="item">
      <img src="/images/ic_soc5.jpg" alt="">
      </a>
      <a href="#" target="_blank" rel="noopener" class="item">
      <img src="/images/ic_soc6.jpg" alt="">
      </a>
   </div>
</div>

CSS:

Код
@import url('https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic,cyrillic-ext');
@import url('https://fonts.googleapis.com/css?family=Comfortaa&subset=cyrillic,cyrillic-ext');
.cont {
     position: relative;
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 15px;
}
.block_title {
     color: #1b1b1b;
     font-size: 54px;
     font-family: 'Lobster', cursive;
     position: relative;
     margin-bottom: 70px;
     padding: 0 10px;
     letter-spacing: .02em;
}
.block_title:after {
     position: absolute;
     bottom: -28px;
     left: 0;
     display: block;
     width: 103px;
     height: 8px;
     content: '';
     background: url(/images/bg_block_title.png) 0 0 no-repeat;
}
.block_title b {
     font-family: 'Comfortaa', cursive;
     font-style: normal;
}
.grid {
     display: flex;
     margin-bottom: -30px;
     margin-left: -30px;
     justify-content: flex-start;
     align-items: stretch;
     align-content: flex-start;
     flex-wrap: wrap;
}
.grid .item {
     position: relative;
     top: 0;
     display: block;
     width: calc(16.666% - 30px);
     margin-bottom: 30px;
     margin-left: 30px;
     transition: .2s linear;
     box-shadow: 0 5px 32px rgba(77,112,219,.29);
}
.grid .item:hover {
     top: -18px;
     box-shadow: 0 13px 21px rgba(0,111,252,.52);
}
.grid .item img {
     display: block;
     width: 100%;
}



Тихо на улице, пусто в квартире..Спасибо реактору №4

Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Разное » Web-социальные кнопки с приятной анимацией (Rip by Бармен)
  • Страница 1 из 1
  • 1
Поиск:

Авторское право на игру и использованные в ней материалы принадлежат GSC Game World.
Любое использование материалов сайта возможно только с разрешения его администрации!
Для корректного отображения сайта, рекомендуем использовать обновленный Yandex.Browser
Powered by StraNNik | Хостинг от uCoz | Рекомендуем AdGuard
© 20.11.2013-22.05.2019