Светящийся эффект значков соц-сетей на 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 мы всю цветовую палитру настраиваем, ведь может так получиться, что некоторым нужно изменить. А точнее выставить тот оттенок, который более соответствует основному дизайн сайта. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
