مجموعة صور ست اب رهيبة جدا 2024

مقدمه :-

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

طريقة اضافات الايقونات :-

توجه الى المدونه

اضغط على تحرير HTML

ضع هذه الاكواد في المكان المخصص لها .

اكواد Css

$redColor: rgba(244,67,54,1);
$blueColor:rgba(33,150,243,1);
.flex-center {
  width: 100%;
  min-height: 50vh;
  
  background: #000;
  
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.icon-3d {
  padding: 10px;
  -webkit-animation: icon3d 200ms 10;
  animation: icon3d 200ms 10;
  color: #fff;
  &:hover {
    -webkit-animation: icon3d 200ms infinite;
          animation: icon3d 200ms infinite;
  }
}
@keyframes icon3d {
  0% {
    text-shadow: 5px 4px $redColor, -5px -6px $blueColor;
  }
  25% {
    text-shadow: -5px -6px $redColor, 5px 4px $blueColor;
  }
  50% {
    text-shadow: 5px -4px $redColor, -8px 4px $blueColor;
  }
  75% {
    text-shadow: -8px -4px $redColor, -5px -4px $blueColor;
  }
  100% {
    text-shadow: -5px 0 $redColor, 5px -4px $blueColor;
  }
}

اكود HTML

<div class="flex-center">

  <i class="fa fa-twitter fa-4x icon-3d"></i>

  <i class="fa fa-facebook fa-4x icon-3d"></i>

  <i class="fa fa-instagram fa-4x icon-3d"></i>

  <i class="fa fa-whatsapp fa-4x icon-3d"></i>

</div>