اضافة تاثير متوهج لأيقونات الوسائط الاجتماعية في CSS

عندما تحوم فوق أحد العناصر ، يظهر توهج تلقائيًا ضمن نطاق لوني معين.إذا كان هناك المزيد ، يبدأ رمز معين في التوهج على الجانبين ، والذي يبدو رائعًا على

تقدم المقالة أزرارًا ، هذه عن كيفية إنشاء أيقونات وسائط اجتماعية مستديرة ، حيث يوجد تأثير توهج باستخدام CSS خالص. دعنا نفكر بإيجاز في الغرض من استخدامهم على مورد الإنترنت ، مثل موقع ويب أو مدونة. بادئ ذي بدء ، دعنا نسميها أداة الوسائط الاجتماعية ، والتي تسمح للضيوف والمستخدمين بلصق عناوين URL لملفات تعريف الوسائط الاجتماعية الخاصة بهم ، حيث يتصلون أيضًا بمعلمات الاشتراك. كل هذا يتم حتى يتم عرض أيقونة موقع التواصل الاجتماعي هذا ، بالإضافة إلى أكثر من ذلك بكثير ، حيث سيتم عرض كل شيء في متصفح يفتح في نافذة منفصلة.

بشكل افتراضي ، تكون جميع العلامات المعروضة في المرحلة الأولية ، أو بالأحرى ليس لها تأثير توهج. ولكن عندما تحوم فوق أحد العناصر ، يظهر توهج تلقائيًا ضمن نطاق لوني معين.إذا كان هناك المزيد ، يبدأ رمز معين في التوهج على الجانبين ، والذي يبدو رائعًا على خلفية داكنة. لكن هذا ليس شيئًا ، فهذا لا يعني أن اللوحة المعينة لن يتم عرضها بالطريقة الصحيحة على خلفية فاتحة ، الشيء الرئيسي هنا هو ضبط الظل بشكل صحيح ، وسوف يتألق على خلفية بيضاء.

عند فحص عمل الأزرار:

تركيب الاضافة

fontawesome 1

تقوم بوضعه قبل وسم   <head/>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

Сode Html2

<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>

Сode Css3

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 الثابت نقوم بتخصيص لوحة الألوان بالكامل ، لأنه قد يتضح أن البعض بحاجة إلى التغيير. أو بالأحرى ، قم بتعيين الظل الأكثر اتساقًا مع تصميم الموقع الرئيسي.

معاينة الذهاب الي الموقع تحميل اضغط هنا

wesam developer

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا