مقاله آموزشی: طراحی آیکون‌های شبکه‌های اجتماعی با افکت‌های زیبا با CSS

طراحی المان‌های تعاملی زیبا یکی از مهارت‌های ضروری برای توسعه‌دهندگان فرانت‌اند است. در این آموزش، یاد می‌گیرید چگونه آیکون‌های شبکه‌های اجتماعی با افکت‌های حرفه‌ای ایجاد کنید که تجربه کاربری بهتری ارائه می‌دهند.

پیش‌نیازها

  • آشنایی مقدماتی با HTML و CSS

  • آشنایی با Flexbox

مراحل طراحی

۱. ساختار HTML

ابتدا ساختار اصلی HTML را برای آیکون‌ها ایجاد می‌کنیم:

<div class="social-icons">
  <div class="social-icon youtube" data-tooltip="YouTube">
    <i class="fab fa-youtube"></i>
  </div>
  <div class="social-icon telegram" data-tooltip="Telegram">
    <i class="fab fa-telegram"></i>
  </div>
  <div class="social-icon linkedin" data-tooltip="LinkedIn">
    <i class="fab fa-linkedin-in"></i>
  </div>
  <div class="social-icon whatsapp" data-tooltip="WhatsApp">
    <i class="fab fa-whatsapp"></i>
  </div>
</div>

۲. افزودن Font Awesome

برای استفاده از آیکون‌ها، کتابخانه Font Awesome را به پروژه اضافه می‌کنیم:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

۳. استایل‌دهی پایه

استایل‌های پایه برای ظاهر اصلی آیکون‌ها:

.social-icons {
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
}

.social-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), 
              inset 0 2px 3px rgba(255, 255, 255, 0.8);
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

.social-icon i {
  color: #333;
  font-size: 26px;
  transition: all 0.3s ease;
}

۴. ایجاد افکت hover

برای هر شبکه اجتماعی، افکت hover مخصوص به خود را تعریف می‌کنیم:

/* یوتیوب */
.social-icon.youtube:hover {
  background: #FF0000;
}

.social-icon.youtube:hover i {
  color: white;
}

.social-icon.youtube::after {
  color: #FF0000;
}

۵. ایجاد تولتیپ

با استفاده از pseudo-elementهای CSS، تولتیپ ایجاد می‌کنیم:

.social-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: bold;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.social-icon:hover::after {
  opacity: 1;
  visibility: visible;
  bottom: -45px;
}

نکات بهینه‌سازی

  • استفاده از transition برای ایجاد انیمیشن نرم

  • به کارگیری inset shadow برای ایجاد اثر برجستگی

  • استفاده از attribute data-tooltip برای ایجاد تولتیپ پویا

  • طراحی ریسپانسیو با flex-wrap

جمع‌بندی

در این آموزش، یاد گرفتید چگونه آیکون‌های شبکه‌های اجتماعی زیبا و تعاملی با CSS ایجاد کنید. این تکنیک‌ها را می‌توانید برای سایر المان‌های رابط کاربری نیز به کار ببرید.

سورس کد کامل

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>آیکون‌های شبکه‌های اجتماعی</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f5f5f5;
            padding: 20px;
        }
        
        .social-icons {
            display: flex;
            justify-content: center;
            gap: 25px;
            flex-wrap: wrap;
        }
        
        .social-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), 
                        inset 0 2px 3px rgba(255, 255, 255, 0.8);
            position: relative;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .social-icon i {
            color: #333;
            font-size: 26px;
            transition: all 0.3s ease;
        }
        
        .social-icon::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: -35px;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 13px;
            font-weight: bold;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            white-space: nowrap;
        }
        
        .social-icon:hover::after {
            opacity: 1;
            visibility: visible;
            bottom: -45px;
        }
        
        .social-icon:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        }
        
        .social-icon.youtube:hover {
            background: #FF0000;
        }
        
        .social-icon.youtube:hover i {
            color: white;
        }
        
        .social-icon.youtube::after {
            color: #FF0000;
        }
        
        .social-icon.telegram:hover {
            background: #0088cc;
        }
        
        .social-icon.telegram:hover i {
            color: white;
        }
        
        .social-icon.telegram::after {
            color: #0088cc;
        }
        
        .social-icon.linkedin:hover {
            background: #0077b5;
        }
        
        .social-icon.linkedin:hover i {
            color: white;
        }
        
        .social-icon.linkedin::after {
            color: #0077b5;
        }
        
        .social-icon.whatsapp:hover {
            background: #25D366;
        }
        
        .social-icon.whatsapp:hover i {
            color: white;
        }
        
        .social-icon.whatsapp::after {
            color: #25D366;
        }
    </style>
</head>
<body>
    <div class="social-icons">
        <div class="social-icon youtube" data-tooltip="YouTube">
            <i class="fab fa-youtube"></i>
        </div>
        <div class="social-icon telegram" data-tooltip="Telegram">
            <i class="fab fa-telegram"></i>
        </div>
        <div class="social-icon linkedin" data-tooltip="LinkedIn">
            <i class="fab fa-linkedin-in"></i>
        </div>
        <div class="social-icon whatsapp" data-tooltip="WhatsApp">
            <i class="fab fa-whatsapp"></i>
        </div>
    </div>
</body>
</html>

از این کد می‌توانید در پروژه‌های خود استفاده کنید و آن را بر اساس نیازهایتان سفارشی‌سازی نمایید.

 نظر شما چیست؟

آیا این آموزش برایتان مفید بود؟ چه سوال یا پیشنهادی دارید؟

لطفاً نظرات و تجربیات خود را با ما و دیگران به اشتراک بگذارید

/0 دیدگاه /توسط
0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *