Просмотр новых публикаций
Последние сообщения с форума
 | Джокер2 - Безумие на двоих (2024) Автор темы: kishnin81, Раздел: Кинообзор онлайн | 0 Ответов Сб 14:32 | kishnin81 |
| Дэдпул и Росомаха (2024) Автор темы: kishnin81, Раздел: Кинообзор онлайн | 0 Ответов Вт 15:59 | kishnin81 |
| Бесплатные VPS/VPDS Автор темы: kishnin81, Раздел: Прочие статьи | 7 Ответов Пн 10:11 | safonovs3f |
| Как узнать имя пользователя на удаленном компьютере Автор темы: kishnin81, Раздел: Прочие статьи | 1 Ответов Пн 10:10 | safonovs3f |
| ВТБ халявные акции за обучение Автор темы: kishnin81, Раздел: Прочие статьи | 3 Ответов Пн 10:10 | safonovs3f |
Внимание! Если Вы видите рекламму на нашем ресурсе, установите для вашего браузера расширение Adblock Plus | AdBlocker Ultimate | Блокировщик рекламы |
Мы ВКонтакте
Сообщество вконтакте
Главная страница сайта
Статистика
Краткая статистика сайта.
Комментарии
3 последних комментариев.
Годно! Спасибо за данную тему, интересно))
Поиск по сайту
Поиск по всему сайту, форуму и тегам!
Поиск по тегам
Облако популярных тегов.
Светящийся эффект значков соц-сетей на CSS
В материале представлен кнопки, это как создать круглые значки социальных сетей, где присутствует эффект свечения с использованием чистого CSS. Кратко рассмотрим для чего они нужны на интернет ресурсе, как сайт или блог. Для начало назовем их виджет социальных сетей, который позволяет гостям и пользователям вставлять URL-адреса своих профилей социальных сетей, где также проводится подключение на параметры подписки. Все это делается для того, чтобы отображались значок этого сайта социальной сети, а также многое другое, где все будет показано в открывающееся в отдельном окне браузера.
По умолчанию все представленные знаки находятся на начальной стадии, а точнее на них не присутствует эффект свечения. Но когда только стоит навести на один из элементов, то автоматически появляется свечение под заданной гаммой цвета А если подробнее, то конкретный значок начинает светиться по сторонам, что на темном фоне смотрится просто великолепно. Но это не о чем, не говорит, что на светлом фоне не так будет отображаться заданная палитра, тут главное правильно выставить оттенок, и он на белом фоне засверкает.
При проверки по работе кнопок:
Установка:
Шрифтовые кнопки в HEAD
Код
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"> HTML
Код
<ul>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>CSS
Код
ul{
display: flex;
}
ul li{
position: relative;
display: block;
color: #666;
font-size: 30px;
height: 60px;
width: 60px;
background: #171515;
line-height: 60px;
border-radius: 50%;
margin: 0 15px;
cursor: pointer;
transition: .5s;
}
ul li:before{
position: absolute;
content: '';
top: 0;
left: 0;
height: inherit;
width: inherit;
/* background: #d35400; */
border-radius: 50%;
transform: scale(.9);
z-index: -1;
transition: .5s;
}
ul li:nth-child(1):before{
background: #4267B2;
}
ul li:nth-child(2):before{
background: #1DA1F2;
}
ul li:nth-child(3):before{
background: #E1306C;
}
ul li:nth-child(4):before{
background: #2867B2;
}
ul li:nth-child(5):before{
background: #ff0000;
}
ul li:hover:before{
filter: blur(3px);
transform: scale(1.2);
/* box-shadow: 0 0 15px #d35400; */
}
ul li:nth-child(1):hover:before{
box-shadow: 0 0 15px #4267B2;
}
ul li:nth-child(2):hover:before{
box-shadow: 0 0 15px #1DA1F2;
}
ul li:nth-child(3):hover:before{
box-shadow: 0 0 15px #E1306C;
}
ul li:nth-child(4):hover:before{
box-shadow: 0 0 15px #2867B2;
}
ul li:nth-child(5):hover:before{
box-shadow: 0 0 15px #ff0000;
}
ul li:nth-child(1):hover{
color: #456cba;
box-shadow: 0 0 15px #4267B2;
text-shadow: 0 0 15px #4267B2;
}
ul li:nth-child(2):hover{
color: #26a4f2;
box-shadow: 0 0 15px #1DA1F2;
text-shadow: 0 0 15px #1DA1F2;
}
ul li:nth-child(3):hover{
color: #e23670;
box-shadow: 0 0 15px #E1306C;
text-shadow: 0 0 15px #E1306C;
}
ul li:nth-child(4):hover{
color: #2a6cbb;
box-shadow: 0 0 15px #2867B2;
text-shadow: 0 0 15px #2867B2;
}
ul li:nth-child(5):hover{
color: #ff1a1a;
box-shadow: 0 0 15px #ff0000;
text-shadow: 0 0 15px #ff0000;
}Надеюсь, вам понравятся эти светящиеся эффекты, но главное, что вы отлично разобрались в основные коды, стоящие за созданием этого виджета светящихся значков социальных сетей.
Но и про стилистику не нужно забывать, ведь в закрепленном CSS мы всю цветовую палитру настраиваем, ведь может так получиться, что некоторым нужно изменить. А точнее выставить тот оттенок, который более соответствует основному дизайн сайта.
Демонстрация
 |
Информация: Посетители, находящиеся в группе Гости, не могут скачивать файлы с данного сайта. |
Пароль к архивам: ComInet
Автор материала
...
Логин на сайте: ...
Группа: ...
Статус: ...
Комментариев:
0
Copyright ©