بایگانی‌های CSS

آموزش ساخت دکمه با افکت اسلاید متن حرفه‌ای در CSS

در این مقاله، نحوه ایجاد یک دکمه جذاب با افکت اسلاید متن را به شما آموزش می‌دهم. این افکت بدون استفاده از جاوااسکریپت و تنها با HTML و CSS خالص پیاده‌سازی شده است.

موارد استفاده

دکمه‌های دانلود
دکمه‌های Call-to-Action
تغییر وضعیت دکمه‌ها
المان‌های تعاملی در رابط کاربری

<!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>
        /* استایل‌های پایه */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, sans-serif;
        }
        
        /* استایل دکمه */
        .btn {
            position: relative;
            width: 200px;
            height: 50px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.4s;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        /* استایل متن‌های دکمه */
        .btn span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        /* متن اولیه */
        .btn .initial {
            opacity: 1;
        }
        
        /* متن جایگزین */
        .btn .hidden {
            opacity: 0;
        }
        
        /* افکت هنگام هاور */
        .btn:hover {
            background: #45a049;
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }
        
        .btn:hover .initial {
            opacity: 0;
            transform: translate(-150%, -50%);
        }
        
        .btn:hover .hidden {
            opacity: 1;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <button class="btn">
        <span class="initial">همین حالا شروع کنید</span>
        <span class="hidden">دانلود <i class="fas fa-download"></i></span>
    </button>
</body>
</html>

توضیح گام به گام

1. ساختار HTML

از یک تگ <button> به عنوان پایه استفاده می‌کنیم
داخل دکمه دو <span> قرار می‌دهیم:
- متن اولیه (initial)
- متن جایگزین (hidden)

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

دکمه را با position: relative آماده می‌کنیم
متن‌ها را با position: absolute در وسط دکمه قرار می‌دهیم
از transform: translate(-50%, -50%) برای تراز دقیق مرکز استفاده می‌کنیم

3. افکت انتقال

برای هر دو متن transition تعریف می‌کنیم
از opacity برای محو کردن/ظاهر کردن استفاده می‌کنیم
با transform موقعیت متن‌ها را تغییر می‌دهیم

4. بهبود ظاهری

اضافه کردن سایه با box-shadow
تغییر رنگ پس‌زمینه هنگام هاور
استفاده از منحنی انتقال (cubic-bezier) برای حرکت نرم‌تر

نکات پیشرفته

1. تغییر جهت افکت

برای تغییر جهت حرکت متن‌ها، مقادیر transform را می‌توانید تغییر دهید.

2. اضافه کردن تاخیر

می‌توانید با transition-delay بین افکت‌ها تاخیر ایجاد کنید.

3. استفاده از آیکون‌های مختلف

به راحتی می‌توانید کلاس آیکون Font Awesome را تغییر دهید.

جمع‌بندی

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

امیدوارم این آموزش برای شما مفید بوده باشد! نظرات خود را در کامنت ها با ما به اشتراک بگذارید.

2025-08-11/0 دیدگاه /توسط admin

آموزش ساخت کارت محصول ریسپانسیو با Bootstrap 5 + سورس کد رایگان

CSS

در این آموزش از سایت Highlearn یاد می‌گیریم چطور با استفاده از Bootstrap 5 یک کارت محصول حرفه‌ای و کاملاً ریسپانسیو بسازیم.
این کارت محصول شامل تصویر، نام محصول، رنگ‌بندی، قیمت فعلی و قبلی، امتیاز کاربران، موجودی انبار و دکمه افزودن به سبد خرید است.

این پروژه برای طراحان وب، برنامه‌نویسان فرانت‌اند و هر کسی که می‌خواهد بخش محصولات سایت خود را زیبا و مدرن طراحی کند بسیار کاربردی است.

مراحل ساخت کارت محصول با Bootstrap 5

۱. آماده‌سازی محیط پروژه

ابتدا یک فایل HTML بسازید و کتابخانه‌های مورد نیاز را اضافه کنید:

Bootstrap 5 برای استایل‌دهی
Font Awesome برای آیکون‌ها
فونت فارسی (مثل Vazir)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet">

۲. ساختار HTML کارت محصول

درون <body> یک ساختار کارت بسازید که شامل تصویر محصول و اطلاعات آن باشد:

<div class="card product-card">
    <div class="product-img-container">
        <div class="color-options">
            <span class="color-option" style="background-color: #000"></span>
            <span class="color-option" style="background-color: #fff"></span>
            <span class="color-option" style="background-color: rgb(153, 38, 38)"></span>
            <span class="color-option" style="background-color: rgb(18, 112, 189)"></span>
        </div>
        <img src="https://nityasoul.com/wp-content/uploads/2024/03/u.webp" class="product-img"/>
    </div>
    <div class="card-body">
        <h5 class="product-title">تی شرت مردانه آستین کوتاه طرح دار</h5>
        <div class="text-warning mb-2">
            <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
            <i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i>
            <span class="text-muted small">(4.5)</span>
        </div>
        <div class="mb-2">
            <span class="text-success current-price">400.000 تومان</span>
            <span class="text-muted small old-price">450.000 تومان</span>
        </div>
        <div class="text-danger small mb-2">
            <i class="fas fa-box-open"></i> موجود در انبار
        </div>
        <button class="btn btn-success add-to-cart">
            <i class="fas fa-shopping-cart"></i> افزودن به سبد خرید
        </button>
    </div>
</div>

۳. استایل‌دهی سفارشی (CSS)

برای زیباتر شدن کارت محصول، چند استایل سفارشی اضافه کنید:

body {
    font-family: 'Vazir';
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.product-card {
    max-width: 300px;
    border: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.09);
}
.product-img-container {
    height: 300px;
    position: relative;
}
.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.color-options {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 10px;
    top: 10px;
    gap: 6px;
}
.color-option {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.product-title {
    font-size: 0.95rem;
    font-weight: bold;
}
.current-price {
    font-weight: bold;
}
.old-price {
    text-decoration: line-through;
}
.add-to-cart {
    width: 100%;
}

ویدئوی آموزشی

اگر دوست دارید این آموزش را به‌صورت ویدئویی و کامل مشاهده کنید، این ویدئو را در کانال یوتیوب ما ببینید:

🎥 مشاهده آموزش در یوتیوب

سورس کد کامل پروژه

در ادامه می‌توانید سورس کد کامل این پروژه را مشاهده کرده و مستقیماً در سایت خود استفاده کنید.

<!DOCTYPE html>
<html dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>product card</title>
  
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet">

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

    <style>
        body{
            font-family: 'Vazir';
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .product-card{
            max-width: 300px;
            border: none;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.09);
        }

        .product-img-container{
            height: 300px;
        }

        .product-img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .color-options{
            display: flex;
            flex-direction: column;
            position: absolute;
            left: 10px;
            top: 10px;
            gap: 6px;
        }
        .color-option{
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .product-title{
            font-size: 0.95rem;
            font-weight: bold;
        }

        .current-price{
            font-weight: bold;
        }

        .old-price{
            text-decoration: line-through;
        }

        .add-to-cart{
            width: 100%;
        }
    </style>

</head>
<body>

    <div class="card product-card">

        <div class="product-img-container">

            <div class="color-options">
                <span class="color-option" style="background-color: #000"> </span>
                <span class="color-option" style="background-color: #fff"> </span>
                <span class="color-option" style="background-color: rgb(153, 38, 38)"> </span>
                <span class="color-option" style="background-color: rgb(18, 112, 189)"> </span>
            </div>


            <img src="https://nityasoul.com/wp-content/uploads/2024/03/u.webp" class="product-img"/>
        </div>

        <div class="card-body">


            <h5 class="product-title"> تی شرت مردانه آستین کوتاه طرح دار </h5>


            <div class="text-warning mb-2">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star-half-alt"></i>
                <span class="text-muted small"> (4.5) </span>
            </div>

            <div class="mb-2">
                <span class="text-success current-price">
                        400.000  تومان 
                </span>
                <span class="text-muted small old-price">
                    450.000  تومان 
                </span>
            </div>

            <div class="text-danger small mb-2">
                <i class="fas fa-box-open"></i>
                موجود در انبار
            </div>


       <button class="btn btn-success add-to-cart">
        <i class="fas fa-shopping-cart"></i>   
        افزودن به سبد خرید 
       </button>

        </div>

    </div>
     
</body>
</html>

نظر شما؟

اگر این آموزش برایتان مفید بود، لطفاً در بخش نظرات همین صفحه تجربه خود را بنویسید.
شما چه ایده‌ای برای بهبود این کارت محصول دارید؟

2025-08-09/0 دیدگاه /توسط admin

آموزش ساخت دکمه انیمیشنی جذاب با CSS و JavaScript

CSS, HTML

در این مقاله آموزشی، نحوه ایجاد یک دکمه جذاب با افکت‌های انیمیشنی پیشرفته را بررسی می‌کنیم. این دکمه شامل گرادیان رنگی پویا، افکت‌های سه بعدی، ذرات متحرک و واکنش‌های تعاملی است که آن را برای استفاده در پروژه‌های مدرن وب مناسب می‌سازد.

ساختار HTML

ابتدا ساختار پایه HTML را ایجاد می‌کنیم:

<!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>
        /* استایل‌ها اینجا قرار می‌گیرند */
    </style>
</head>
<body>
    <button class="magic-btn">
        <span class="btn-text">کلیک کنید</span>
        <i class="btn-icon fas fa-magic"></i>
    </button>
    
    <div class="particles" id="particles"></div>
    
    <script>
        // کدهای جاوااسکریپت اینجا قرار می‌گیرند
    </script>
</body>
</html>

توضیح استایل‌های CSS

استایل‌های پایه

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #121212;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

صفحه را به صورت flex تنظیم می‌کنیم تا دکمه در مرکز قرار گیرد
ارتفاع viewport را 100% در نظر می‌گیریم
رنگ پس‌زمینه تیره انتخاب شده است

استایل اصلی دکمه

.magic-btn {
    position: relative;
    padding: 18px 45px 18px 30px;
    font-size: 1.2rem;
    color: #fff;
    background: linear-gradient(45deg, #ff00cc, #3333ff);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transform-style: preserve-3d;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

position: relative برای قرارگیری عناصر داخلی
linear-gradient برای ایجاد گرادیان رنگی
transform-style: preserve-3d برای افکت‌های سه بعدی
transition برای انیمیشن نرم تغییرات

افکت‌های هاور

.magic-btn:hover {
    transform: translateY(-5px) scale(1.05) rotateX(10deg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

هنگام هاور، دکمه کمی به بالا حرکت می‌کند
اندازه آن 5% بزرگتر می‌شود
10 درجه حول محور X می‌چرخد

افکت ذرات

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    opacity: 0;
}

.magic-btn:hover ~ .particles .particle {
    animation: particles 1s ease-out forwards;
}

@keyframes particles {
    0% { transform: translate(0, 0); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)); opacity: 0; }
}

ذرات سفید رنگ 4×4 پیکسلی ایجاد می‌شوند
هنگام هاور کردن روی دکمه، ذرات با انیمیشن خارج می‌شوند
مسیر حرکت ذرات به صورت تصادفی تعیین می‌شود

کد JavaScript

const particlesContainer = document.getElementById('particles');
const particlesCount = 20;

for (let i = 0; i < particlesCount; i++) {
    const particle = document.createElement('div');
    particle.classList.add('particle');
    
    const angle = Math.random() * Math.PI * 2;
    const distance = 20 + Math.random() * 30;
    const tx = Math.cos(angle) * distance;
    const ty = Math.sin(angle) * distance;
    
    particle.style.setProperty('--tx', `${tx}px`);
    particle.style.setProperty('--ty', `${ty}px`);
    particle.style.left = `${50 + Math.cos(angle) * 10}%`;
    particle.style.top = `${50 + Math.sin(angle) * 10}%`;
    particle.style.animationDelay = `${Math.random() * 0.5}s`;
    
    particlesContainer.appendChild(particle);
}

20 ذره ایجاد می‌شود
برای هر ذره مسیر حرکت تصادفی تعیین می‌شود
تاخیر انیمیشن برای هر ذره متفاوت است

کد کامل نهایی

<!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>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #121212;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .magic-btn {
            position: relative;
            padding: 18px 45px 18px 30px;
            font-size: 1.2rem;
            color: #fff;
            background: linear-gradient(45deg, #ff00cc, #3333ff);
            border: none;
            border-radius: 50px;
            cursor: pointer;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            transform-style: preserve-3d;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 1;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .magic-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #3333ff, #ff00cc);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        .magic-btn:hover {
            transform: translateY(-5px) scale(1.05) rotateX(10deg);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }
        
        .magic-btn:hover::before {
            opacity: 1;
        }
        
        .magic-btn:active {
            transform: translateY(0) scale(0.98);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        }
        
        .magic-btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%) scale(0);
            border-radius: 50%;
            z-index: -2;
            transition: transform 0.6s ease;
        }
        
        .magic-btn:hover::after {
            transform: translate(-50%, -50%) scale(1);
        }
        
        .btn-text {
            position: relative;
            z-index: 2;
            display: inline-block;
            transition: transform 0.3s ease;
        }
        
        .magic-btn:hover .btn-text {
            animation: bounce 0.5s ease;
        }
        
        .btn-icon {
            transition: all 0.3s ease;
        }
        
        .magic-btn:hover .btn-icon {
            transform: translateX(5px) rotate(15deg);
        }
        
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }
        
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
        
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: white;
            border-radius: 50%;
            opacity: 0;
        }
        
        .magic-btn:hover ~ .particles .particle {
            animation: particles 1s ease-out forwards;
        }
        
        @keyframes particles {
            0% { transform: translate(0, 0); opacity: 1; }
            100% { transform: translate(var(--tx), var(--ty)); opacity: 0; }
        }
    </style>
</head>
<body>
    <button class="magic-btn">
        <span class="btn-text">کلیک کنید</span>
        <i class="btn-icon fas fa-magic"></i>
    </button>
    
    <div class="particles" id="particles"></div>
    
    <script>
        const particlesContainer = document.getElementById('particles');
        const particlesCount = 20;
        
        for (let i = 0; i < particlesCount; i++) {
            const particle = document.createElement('div');
            particle.classList.add('particle');
            
            const angle = Math.random() * Math.PI * 2;
            const distance = 20 + Math.random() * 30;
            const tx = Math.cos(angle) * distance;
            const ty = Math.sin(angle) * distance;
            
            particle.style.setProperty('--tx', `${tx}px`);
            particle.style.setProperty('--ty', `${ty}px`);
            particle.style.left = `${50 + Math.cos(angle) * 10}%`;
            particle.style.top = `${50 + Math.sin(angle) * 10}%`;
            particle.style.animationDelay = `${Math.random() * 0.5}s`;
            
            particlesContainer.appendChild(particle);
        }
    </script>
</body>
</html>

جمع‌بندی

در این آموزش، یک دکمه انیمیشنی جذاب با ترکیب CSS و JavaScript ایجاد کردیم. این دکمه شامل ویژگی‌های زیر است:

گرادیان رنگی پویا
افکت‌های سه بعدی
ذرات متحرک
واکنش به تعامل کاربر
انیمیشن‌های نرم و جذاب

تجربیات و پیشنهادات شما

آیا این آموزش برای شما مفید بود؟ چه افکت‌های دیگری را دوست دارید به این دکمه اضافه کنید؟ نظرات و پیشنهادات خود را با ما در میان بگذارید!

اگر در اجرای کدها به مشکلی برخوردید یا سوالی دارید، در بخش کامنت‌ها مطرح کنید تا راهنمایی کنم. همچنین اگر پروژه‌های جالبی با این کدها ساختید، دوست داریم ببینیم!

2025-08-04/0 دیدگاه /توسط admin

ساخت لوودر دایره‌ای زیبا با CSS — آموزش گام به گام + کد کامل

CSS, HTML

در این مقاله، یک انیمیشن لوودینگ (Loading) زیبا و حرفه‌ای شبیه به لوودینگ‌های مدرن (مانند Google) را با استفاده از فقط HTML و CSS خواهیم ساخت. این لوودر از چند نقطه کوچک تشکیل شده که به صورت دایره‌ای دور یک محور می‌چرخند و تدریجاً ظاهر و ناپدید می‌شوند — همراه با متن “Loading…” که با افکت fade می‌درخشد.

این مقاله مناسب توسعه‌دهندگان وب مبتدی و متوسط است و تمام مراحل را گام به گام و خط به خط توضیح می‌دهد.

هدف نهایی چیست؟

در پایان این آموزش، یک لوودر زیبا خواهید داشت که:

دقیقاً در وسط صفحه قرار دارد
شامل ۵ نقطه با اندازه و شفافیت متفاوت است که به صورت دایره‌ای می‌چرخند
متن “Loading…” زیر آن با افکت ناپدید شدن مداوم نمایش داده می‌شود
کاملاً ریسپانسیو و بدون نیاز به جاوااسکریپت است

ساختار HTML

ابتدا، ساختار پایه HTML را می‌سازیم:

<div class="loader">
    <div class="dots-container">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
    <div class="loading-text">Loading...</div>
</div>

توضیح ساختار:

loader: کانتینر اصلی که شامل دایره نقطه‌ها و متن است.
dots-container: یک کادر 120×120 پیکسلی که نقطه‌ها داخل آن می‌چرخند.
dot: هر یک از ۵ نقطه کوچک که انیمیشن می‌گیرند.
loading-text: متنی که زیر دایره نمایش داده می‌شود.

استایل‌دهی با CSS

حالا به سراغ CSS می‌رویم. تمام استایل‌ها را به ترتیب توضیح می‌دهیم.

۱. تنظیمات کلی (`*` و `body`)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

*: تمام عناصر را ریست می‌کند (حذف حاشیه و پدینگ پیش‌فرض).
body: با استفاده از flexbox، محتوا را دقیقاً در وسط صفحه قرار می‌دهد.
min-height: 100vh: اطمینان از پوشش تمام ارتفاع صفحه.
overflow: hidden: جلوگیری از اسکرول ناخواسته به دلیل انیمیشن.

۲. کانتینر اصلی لوودر

.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

flex-direction: column: المان‌ها را به صورت عمودی چیده می‌شود (اول دایره، بعد متن).
align-items: center: محتوا را در مرکز افقی نگه می‌دارد.
gap: 20px: فاصله بین دایره و متن.

۳. کانتینر نقطه‌ها

.dots-container {
    position: relative;
    width: 120px;
    height: 120px;
}

position: relative: نقطه مرجع برای موقعیت‌یابی dotها.
ابعاد 120×120px برای ایجاد فضای کافی جهت چرخش نقطه‌ها.

۴. نقطه‌های متحرک

.dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background-color: #4285f4;
    border-radius: 50%;
    transform-origin: 60px 60px;
    animation: spin 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

توضیحات مهم:

position: absolute: نقطه‌ها نسبت به dots-container جابجا می‌شوند.
top: 50%; left: 50%: نقطه شروع هر dot در مرکز کانتینر است.
border-radius: 50%: تبدیل به دایره.
transform-origin: 60px 60px: مرکز چرخش را روی مرکز کانتینر تنظیم می‌کند (چون 120px / 2 = 60px).
animation: spin ...: انیمیشن اصلی چرخش را اعمال می‌کند.

۵. تنظیم اندازه و رنگ هر نقطه

.dot:nth-child(1) {
    animation-delay: -0.1s;
    background-color: rgba(66, 133, 244, 0.3);
    width: 6px;
    height: 6px;
}

.dot:nth-child(2) {
    animation-delay: -0.2s;
    background-color: rgba(66, 133, 244, 0.5);
    width: 7px;
    height: 7px;
}

.dot:nth-child(3) {
    animation-delay: -0.3s;
    background-color: rgba(66, 133, 244, 0.7);
    width: 8px;
    height: 8px;
}

.dot:nth-child(4) {
    animation-delay: -0.4s;
    background-color: rgba(66, 133, 244, 0.9);
    width: 9px;
    height: 9px;
}

.dot:nth-child(5) {
    animation-delay: -0.5s;
    width: 10px;
    height: 10px;
}

با استفاده از :nth-child، به هر نقطه اندازه و شفافیت متفاوتی می‌دهیم.
animation-delay باعث می‌شود نقطه‌ها یکی پس از دیگری وارد چرخش شوند و افکت موج‌وار ایجاد شود.
رنگ اصلی #4285f4 همان رنگ آبی معروف Google است.

۶. انیمیشن چرخش (`@keyframes spin`)

@keyframes spin {
    0% {
        transform: rotate(0deg) translate(50px) rotate(0deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: rotate(360deg) translate(50px) rotate(-360deg);
        opacity: 0;
    }
}

چطور کار می‌کند؟

translate(50px): هر نقطه را 50px از مرکز دور می‌کند (شعاع دایره).
rotate(360deg) روی کانتینر: کل نقطه را به دور مرکز بچرخاند.
rotate(-360deg) روی خود نقطه: جهت نقطه را ثابت نگه می‌دارد (اگر نباشد، نقطه هم می‌چرخد!).
opacity: نقطه در ابتدا و انتهای چرخش ناپدید می‌شود و در وسط پررنگ می‌شود.

۷. انیمیشن متن “Loading…”

.loading-text {
    color: #4285f4;
    font-size: 18px;
    animation: fade 1.5s ease-in-out infinite;
}

@keyframes fade {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

fade: متن را به صورت مداوم بین شفافیت ۰.۶ و ۱ تغییر می‌دهد.
ease-in-out: حرکت نرم و طبیعی.

کد نهایی کامل

در اینجا کد کامل و آماده استفاده را داریم:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
            overflow: hidden;
        }

        .loader {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .dots-container {
            position: relative;
            width: 120px;
            height: 120px;
        }

        .dot {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 8px;
            background-color: #4285f4;
            border-radius: 50%;
            transform-origin: 60px 60px;
            animation: spin 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
        }

        .dot:nth-child(1) {
            animation-delay: -0.1s;
            background-color: rgba(66, 133, 244, 0.3);
            width: 6px;
            height: 6px;
        }

        .dot:nth-child(2) {
            animation-delay: -0.2s;
            background-color: rgba(66, 133, 244, 0.5);
            width: 7px;
            height: 7px;
        }

        .dot:nth-child(3) {
            animation-delay: -0.3s;
            background-color: rgba(66, 133, 244, 0.7);
            width: 8px;
            height: 8px;
        }

        .dot:nth-child(4) {
            animation-delay: -0.4s;
            background-color: rgba(66, 133, 244, 0.9);
            width: 9px;
            height: 9px;
        }

        .dot:nth-child(5) {
            animation-delay: -0.5s;
            width: 10px;
            height: 10px;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg) translate(50px) rotate(0deg);
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                transform: rotate(360deg) translate(50px) rotate(-360deg);
                opacity: 0;
            }
        }

        .loading-text {
            color: #4285f4;
            font-size: 18px;
            animation: fade 1.5s ease-in-out infinite;
        }

        @keyframes fade {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="loader">
        <div class="dots-container">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="loading-text">Loading...</div>
    </div>
</body>
</html>

نتیجه‌گیری

در این مقاله، یک لوودر زیبا و حرفه‌ای را با استفاده از فقط HTML و CSS ساختیم. بدون نیاز به جاوااسکریپت، توانستیم یک انیمیشن پویا، مرکزی و ریسپانسیو بسازیم که می‌تواند در هر سایت، پنل مدیریت یا اپلیکیشن وب استفاده شود.

اگر این مقاله را دوست داشتید، اشتراک‌گذاری کنید و در کامنت‌ها پیشنهادات خود را بگویید!

2025-08-04/0 دیدگاه /توسط admin

آموزش ساخت دکمه انیمیشنی Play با CSS

CSS, HTML

در این مقاله جامع، نحوه ایجاد یک دکمه انیمیشنی حرفه‌ای با افکت تبدیل حرف “A” به آیکون پلی را به صورت گام به گام آموزش می‌دهیم.

مقدمه

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

ساختار HTML

<button class="play-btn">
    <span class="btn-content">
        <span class="letter">P</span>
        <span class="letter">L</span>
        <span class="letter-a-container">
            <span class="letter-a">A</span>
            <span class="play-icon"></span>
        </span>
        <span class="letter">Y</span>
    </span>
</button>

توضیحات ساختار:

دکمه اصلی: المان <button> با کلاس play-btn که به عنوان ظرف اصلی عمل می‌کند.
محتوای دکمه: <span> با کلاس btn-content که حروف را سازماندهی می‌کند.
حروف جداگانه: هر حرف در یک <span> با کلاس letter قرار گرفته است.
حرف A و آیکون: حرف “A” و آیکون پلی در یک container مخصوص (letter-a-container) قرار دارند.

استایل‌دهی با CSS

استایل پایه دکمه:

.play-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    background: linear-gradient(45deg, #ff3d77, #ff9d00);
    color: white;
    font-size: 24px;
    font-weight: bold;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

نکات مهم:

display: inline-flex برای ترازبندی دقیق محتوا
overflow: hidden برای محدود کردن افکت‌های انیمیشن
transition برای ایجاد تغییرات نرم

افکت‌های hover و active:

.play-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.play-btn:active {
    transform: translateY(1px);
}

استایل حروف و فاصله‌گذاری:

.letter {
    display: inline-block;
    transition: all 0.3s ease;
    position: relative;
}

.letter:not(:last-child) {
    margin-right: 4px;
}

نکته: این کد فاصله یکسان بین همه حروف ایجاد می‌کند.

انیمیشن تبدیل حرف A به آیکون:

.letter-a-container {
    position: relative;
    width: 24px;
    display: inline-flex;
    justify-content: center;
}

.letter-a {
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.play-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-left: 15px solid white;
    border-bottom: 9px solid transparent;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    opacity: 0;
}

.play-btn:hover .letter-a {
    opacity: 0;
    transform: scale(0);
}

.play-btn:hover .play-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

نکات فنی:

آیکون پلی با تکنیک border مثلث ایجاد شده است.
از transform و opacity برای ایجاد انیمیشن نرم استفاده شده.
cubic-bezier برای زمان‌بندی طبیعی‌تر انیمیشن‌ها استفاده شده.

کد کامل

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Play Button</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            font-family: 'Arial', sans-serif;
            margin: 0;
        }
        
        .play-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 15px 30px;
            background: linear-gradient(45deg, #ff3d77, #ff9d00);
            color: white;
            font-size: 24px;
            font-weight: bold;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        
        .play-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }
        
        .play-btn:active {
            transform: translateY(1px);
        }
        
        .btn-content {
            display: flex;
            align-items: center;
            position: relative;
        }
        
        .letter {
            display: inline-block;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .letter:not(:last-child) {
            margin-right: 4px;
        }
        
        .letter-a-container {
            position: relative;
            width: 24px;
            display: inline-flex;
            justify-content: center;
        }
        
        .letter-a {
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        
        .play-icon {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 0;
            height: 0;
            border-top: 9px solid transparent;
            border-left: 15px solid white;
            border-bottom: 9px solid transparent;
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            opacity: 0;
        }
        
        .play-btn:hover .letter-a {
            opacity: 0;
            transform: scale(0);
        }
        
        .play-btn:hover .play-icon {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    </style>
</head>
<body>
    <button class="play-btn">
        <span class="btn-content">
            <span class="letter">P</span>
            <span class="letter">L</span>
            <span class="letter-a-container">
                <span class="letter-a">A</span>
                <span class="play-icon"></span>
            </span>
            <span class="letter">Y</span>
        </span>
    </button>
</body>
</html>

جمع‌بندی

در این آموزش یاد گرفتید:

چگونه با CSS یک دکمه انیمیشنی ایجاد کنید
تکنیک تبدیل متن به آیکون با hover
ایجاد مثلث با استفاده از border در CSS
کنترل دقیق فاصله‌ها و ترازبندی عناصر
استفاده از transition و transform برای انیمیشن‌های نرم

نظر شما چیست؟
آیا این آموزش برای شما مفید بود؟ چه افکت‌های دیگری را دوست دارید یاد بگیرید؟ نظرات و پیشنهادات خود را با ما در میان بگذارید!

2025-08-01/0 دیدگاه /توسط admin

آموزش ساخت انیمیشن لودینگ دایره‌ای با CSS

CSS, HTML

در این مقاله جامع، نحوه ایجاد یک انیمیشن لودینگ دایره‌ای جذاب را با استفاده از CSS خالص آموزش می‌دهیم. این انیمیشن برای صفحات وب، اپلیکیشن‌ها و پروژه‌های فرانت‌اند مناسب است.

مقدمه

انیمیشن‌های لودینگ به کاربران نشان می‌دهند که محتوای در حال بارگذاری است. در این آموزش، یک لودینگ دایره‌ای با سه نیم‌دایره رنگی ایجاد می‌کنیم که به صورت هماهنگ می‌چرخند.

ساختار HTML

<div class="loading-container">
    <div class="circle-loader">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
    <div class="loading-text">loading ....</div>
</div>

loading-container: ظرف اصلی برای مرتب کردن عناصر
circle-loader: ظرف دایره‌های انیمیشنی
circle: سه دایره با رنگ‌های مختلف
loading-text: متن نمایشی زیر انیمیشن

استایل‌دهی با CSS

بخش‌های اصلی:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: white;
    margin: 0;
    font-family: Arial, sans-serif;
}

صفحه را به صورت flex تنظیم می‌کنیم تا محتوا در مرکز قرار گیرد
ارتفاع viewport را کامل می‌گیرد
پس‌زمینه سفید برای تمیز بودن طراحی

ظرف لودینگ:

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

عناصر را به صورت عمودی مرتب می‌کند
فاصله 20px بین انیمیشن و متن ایجاد می‌کند

متن لودینگ:

.loading-text {
    font-size: 14px;
    color: #333;
    letter-spacing: 2px;
    animation: pulse 1.5s infinite ease-in-out;
}

فونت و رنگ مناسب برای خوانایی
انیمیشن pulse برای جلوه‌ی چشمک زن

دایره‌های انیمیشنی:

.circle-loader {
    width: 80px;
    height: 80px;
    position: relative;
}

.circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: rotate 2s linear infinite;
    box-sizing: border-box;
}

اندازه ثابت برای ظرف دایره‌ها
position: relative برای موقعیت‌دهی مطلق دایره‌های داخلی
border-radius: 50% برای شکل دایره‌ای
انیمیشن rotate با مدت زمان 2 ثانیه

تنظیمات هر دایره:

.circle:nth-child(1) {
    border: 4px solid transparent;
    border-top-color: #3498db;
    border-bottom-color: #3498db;
}

.circle:nth-child(2) {
    border: 4px solid transparent;
    border-left-color: #e74c3c;
    border-right-color: #e74c3c;
    animation-delay: 0.5s;
    transform: rotate(30deg);
}

.circle:nth-child(3) {
    border: 4px solid transparent;
    border-top-color: #2ecc71;
    border-bottom-color: #2ecc71;
    animation-delay: 1s;
    transform: rotate(60deg);
}

هر دایره رنگ مخصوص به خود را دارد
animation-delay برای ایجاد افکت موجی
transform: rotate برای چیدمان اولیه نیم‌دایره‌ها

انیمیشن‌ها:

@keyframes rotate {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(0.8);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

rotate: چرخش 360 درجه همراه با تغییر اندازه
pulse: تغییر تدریجی شفافیت متن

کد کامل

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circular Loading Animation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: white;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        
        .loading-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        
        .loading-text {
            font-size: 14px;
            color: #333;
            letter-spacing: 2px;
            animation: pulse 1.5s infinite ease-in-out;
        }
        
        .circle-loader {
            width: 80px;
            height: 80px;
            position: relative;
        }
        
        .circle {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            animation: rotate 2s linear infinite;
            box-sizing: border-box;
        }
        
        .circle:nth-child(1) {
            border: 4px solid transparent;
            border-top-color: #3498db;
            border-bottom-color: #3498db;
        }
        
        .circle:nth-child(2) {
            border: 4px solid transparent;
            border-left-color: #e74c3c;
            border-right-color: #e74c3c;
            animation-delay: 0.5s;
            transform: rotate(30deg);
        }
        
        .circle:nth-child(3) {
            border: 4px solid transparent;
            border-top-color: #2ecc71;
            border-bottom-color: #2ecc71;
            animation-delay: 1s;
            transform: rotate(60deg);
        }
        
        @keyframes rotate {
            0% {
                transform: rotate(0deg) scale(1);
            }
            50% {
                transform: rotate(180deg) scale(0.8);
            }
            100% {
                transform: rotate(360deg) scale(1);
            }
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 0.6;
            }
            50% {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div class="loading-container">
        <div class="circle-loader">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="loading-text">loading ....</div>
    </div>
</body>
</html>

نکات تکمیلی

تنظیم سرعت: می‌توانید duration انیمیشن‌ها را تغییر دهید
تغییر رنگ: رنگ‌ها را متناسب با پالت رنگ پروژه خود تنظیم کنید
سایز: اندازه دایره‌ها با تغییر width و height در .circle-loader قابل تنظیم است
تعداد دایره‌ها: می‌توانید دایره‌های بیشتری اضافه کنید

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

آیا این آموزش برای شما مفید بود؟
سوالی دارید؟
ایده‌ای برای بهبود انیمیشن دارید؟
تجربه استفاده از این کد را با ما به اشتراک بگذارید!

2025-07-31/0 دیدگاه /توسط admin

آموزش طراحی دکمه‌های شبکه‌های اجتماعی با افکت سه‌بعدی در CSS

CSS, HTML

امروزه دکمه‌های شبکه‌های اجتماعی بخش مهمی از طراحی رابط کاربری (UI) هستند. در این مقاله، یاد می‌گیرید چگونه دکمه‌های مربعی با چرخش ۴۵ درجه طراحی کنید که هنگام هاور رنگ پس‌زمینه آنها به رنگ رسمی هر شبکه اجتماعی تغییر کند.

ابزارهای مورد نیاز

HTML5 (برای ساختار)
CSS3 (برای استایل‌دهی و افکت‌ها)
Font Awesome (برای آیکون‌ها)

آموزش گام‌به‌گام

۱. ساختار HTML

کد زیر چارچوب اصلی دکمه‌ها را ایجاد می‌کند:

<!DOCTYPE html>
<html lang="fa">
<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">
</head>
<body>
    <div class="social-buttons">
        <button class="social-btn whatsapp"><i class="fab fa-whatsapp"></i></button>
        <button class="social-btn twitter"><i class="fab fa-twitter"></i></button>
        <button class="social-btn youtube"><i class="fab fa-youtube"></i></button>
        <button class="social-btn linkedin"><i class="fab fa-linkedin-in"></i></button>
    </div>
</body>
</html>

۲. استایل‌دهی با CSS

در این بخش، افکت‌های سه‌بعدی و تغییر رنگ را پیاده‌سازی می‌کنیم:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: white;
}

.social-buttons {
    display: flex;
    gap: 15px;
}

.social-btn {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #555;
    background: #f0f0f0;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.social-btn i {
    transform: rotate(-45deg);
    transition: all 0.3s ease;
}

/* تغییر رنگ هنگام هاور */
.whatsapp:hover { background: #25D366; }
.twitter:hover { background: #1DA1F2; }
.youtube:hover { background: #FF0000; }
.linkedin:hover { background: #0077B5; }

.social-btn:hover i {
    color: white;
    transform: rotate(-45deg) scale(1.1);
}

کد نهایی آماده برای استفاده

کدهای زیر را می‌توانید در هر پروژه وب‌سایتی استفاده کنید. این کدها شامل HTML و CSS کامل برای ایجاد دکمه‌های شبکه‌های اجتماعی با افکت سه‌بعدی است:

<!DOCTYPE html>
<html lang="fa">
<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>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: white;
        }
        .social-buttons {
            display: flex;
            gap: 15px;
        }
        .social-btn {
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: #555;
            background: #f0f0f0;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            transform: rotate(45deg);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .social-btn i {
            transform: rotate(-45deg);
            transition: all 0.3s ease;
        }
        .whatsapp:hover { background: #25D366; }
        .twitter:hover { background: #1DA1F2; }
        .youtube:hover { background: #FF0000; }
        .linkedin:hover { background: #0077B5; }
        .social-btn:hover i {
            color: white;
            transform: rotate(-45deg) scale(1.1);
        }
    </style>
</head>
<body>
    <div class="social-buttons">
        <button class="social-btn whatsapp"><i class="fab fa-whatsapp"></i></button>
        <button class="social-btn twitter"><i class="fab fa-twitter"></i></button>
        <button class="social-btn youtube"><i class="fab fa-youtube"></i></button>
        <button class="social-btn linkedin"><i class="fab fa-linkedin-in"></i></button>
    </div>
</body>
</html>

نحوه استفاده از این کدها:

کدهای بالا را در یک فایل با پسوند .html ذخیره کنید.
می‌توانید این کدها را در هر پروژه وب‌سایتی (مانند سایت‌های استاتیک یا سیستم‌های مدیریت محتوای غیر از وردپرس) استفاده کنید.
برای تغییر رنگ‌ها یا اندازه دکمه‌ها، مقادیر CSS را ویرایش کنید.

نظر شما چیست؟

اگر این آموزش برایتان مفید بود یا پیشنهادی برای بهبود دارید، خوشحال می‌شویم در بخش نظرات با ما در میان بگذارید!

2025-07-29/0 دیدگاه /توسط admin

آموزش ساخت آیکون‌های مینیمال شبکه‌های اجتماعی با افکت hover رنگی

CSS, HTML

در این آموزش، نحوه ایجاد آیکون‌های مینیمال و زیبا برای شبکه‌های اجتماعی با استفاده از CSS و کتابخانه Font Awesome را یاد می‌گیرید. این آیکون‌ها دارای افکت hover هستند که هنگام قرارگیری ماوس روی آن‌ها، به رنگ رسمی هر شبکه اجتماعی تغییر می‌کنند.

مراحل پیاده‌سازی

افزودن فونت Awesome
ابتدا کتابخانه Font Awesome را به پروژه خود اضافه کنید:

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

ساخت ساختار HTML

<div class="social-container">
    <a href="#" class="social-btn youtube"><i class="fab fa-youtube"></i></a>
    <a href="#" class="social-btn twitter"><i class="fab fa-twitter"></i></a>
    <a href="#" class="social-btn instagram"><i class="fab fa-instagram"></i></a>
    <a href="#" class="social-btn linkedin"><i class="fab fa-linkedin-in"></i></a>
    <a href="#" class="social-btn whatsapp"><i class="fab fa-whatsapp"></i></a>
</div>

استایل‌دهی با CSS

.social-container {
    display: flex;
    gap: 15px;
}
.social-btn {
    width: 50px;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color: #333;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.social-btn.youtube:hover { color: #FF0000; border-color: #FF0000; }
.social-btn.twitter:hover { color: #1DA1F2; border-color: #1DA1F2; }
.social-btn.instagram:hover { color: #E1306C; border-color: #E1306C; }
.social-btn.linkedin:hover { color: #0A66C2; border-color: #0A66C2; }
.social-btn.whatsapp:hover { color: #25D366; border-color: #25D366; }

کد کامل

<!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>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
        }
        .social-container {
            display: flex;
            gap: 15px;
        }
        .social-btn {
            width: 50px;
            height: 50px;
            border: 1px solid #ddd;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: transparent;
            color: #333;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .social-btn.youtube:hover { color: #FF0000; border-color: #FF0000; }
        .social-btn.twitter:hover { color: #1DA1F2; border-color: #1DA1F2; }
        .social-btn.instagram:hover { color: #E1306C; border-color: #E1306C; }
        .social-btn.linkedin:hover { color: #0A66C2; border-color: #0A66C2; }
        .social-btn.whatsapp:hover { color: #25D366; border-color: #25D366; }
    </style>
</head>
<body>
    <div class="social-container">
        <a href="#" class="social-btn youtube"><i class="fab fa-youtube"></i></a>
        <a href="#" class="social-btn twitter"><i class="fab fa-twitter"></i></a>
        <a href="#" class="social-btn instagram"><i class="fab fa-instagram"></i></a>
        <a href="#" class="social-btn linkedin"><i class="fab fa-linkedin-in"></i></a>
        <a href="#" class="social-btn whatsapp"><i class="fab fa-whatsapp"></i></a>
    </div>
</body>
</html>

نظر شما چیست؟

آیا این آموزش برای شما مفید بود؟ اگر سوال یا پیشنهادی دارید، در بخش نظرات با ما در میان بگذارید.

2025-07-28/0 دیدگاه /توسط admin

آموزش ساخت دکمه اشتراک‌گذاری تعاملی با CSS و HTML

CSS, HTML

در این مقاله آموزشی، نحوه ایجاد یک دکمه اشتراک‌گذاری جذاب با افکت hover که به سه آیکون شبکه‌اجتماعی تبدیل می‌شود را به صورت کامل بررسی می‌کنیم.

پیش‌نمایش نهایی

قبل از شروع، بیایید ببینیم چه چیزی می‌سازیم:

یک دکمه با طراحی مدرن و گوشه‌های گرد
افکت تبدیل هنگام hover به سه دایره اجتماعی
انیمیشن‌های نرم و جذاب
کاملاً ریسپانسیو

کد کامل

<!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>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .share-container {
            text-align: center;
            margin: 2rem;
        }
        
        .share-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: #00CED1;
            color: white;
            padding: 12px 24px;
            border-radius: 30px;
            cursor: pointer;
            font-size: 16px;
            border: none;
            outline: none;
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            overflow: hidden;
            width: 140px;
            height: 50px;
            box-shadow: 0 4px 8px rgba(0, 206, 209, 0.3);
        }
        
        .share-btn i {
            margin-right: 8px;
            transition: transform 0.3s ease;
        }
        
        .social-circles {
            position: absolute;
            display: flex;
            width: 100%;
            justify-content: space-around;
            opacity: 0;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.7);
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }
        
        .social-circle {
            width: 40px;
            height: 40px;
            background-color: #00CED1;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        
        .social-circle:hover {
            transform: scale(1.1) translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .share-btn:hover {
            background-color: transparent;
            box-shadow: none;
        }
        
        .share-btn:hover .btn-content {
            opacity: 0;
            transform: translateY(-30px);
        }
        
        .share-btn:hover .social-circles {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        
        .btn-content {
            display: flex;
            align-items: center;
            transition: all 0.4s ease;
        }
    </style>
</head>
<body>
    <div class="share-container">
        <button class="share-btn">
            <span class="btn-content">
                اشتراک‌گذاری <i class="fas fa-share-alt"></i>
            </span>
            <div class="social-circles">
                <div class="social-circle">
                    <i class="fab fa-instagram"></i>
                </div>
                <div class="social-circle">
                    <i class="fab fa-twitter"></i>
                </div>
                <div class="social-circle">
                    <i class="fab fa-telegram"></i>
                </div>
            </div>
        </button>
    </div>
</body>
</html>

توضیحات گام به گام

1. ساختار HTML

ساختار اصلی شامل این بخش‌هاست:

بدنه اصلی: تگ <body> که محتوا را در مرکز صفحه قرار می‌دهد
کنتینر دکمه: div با کلاس share-container برای قرارگیری دکمه
دکمه اصلی: با کلاس share-btn که دو بخش دارد:
- محتوای اصلی دکمه (btn-content)
- دایره‌های اجتماعی (social-circles)

2. استایل‌دهی CSS

بخش body:

از flexbox برای مرکز کردن عمودی و افقی استفاده شده
ارتفاع 100vh برای پر کردن کل ارتفاع صفحه
فونت و پس‌زمینه مناسب تنظیم شده

دکمه اصلی:

رنگ فیروزه‌ای (#00CED1) با سایه مناسب
گوشه‌های گرد با border-radius
padding مناسب برای ظاهر زیبا
transition برای انیمیشن نرم

دایره‌های اجتماعی:

در حالت عادی مخفی هستند (opacity: 0)
با hover روی دکمه ظاهر می‌شوند
هر دایره دارای افکت hover جداگانه است
از transform برای انیمیشن‌های جذاب استفاده شده

3. افکت hover

هنگام hover روی دکمه:

پس‌زمینه دکمه محو می‌شود
محتوای اصلی (متن و آیکون) به بالا حرکت کرده و محو می‌شود
دایره‌های اجتماعی با انیمیشن ظاهر می‌شوند
هر دایره هنگام hover جداگانه واکنش نشان می‌دهد

4. نکات فنی مهم

ترکیب transformها: استفاده همزمان از translate و scale برای انیمیشن‌های طبیعی‌تر
cubic-bezier: برای ایجاد انیمیشن‌های غیرخطی و جذاب‌تر
ترتیب transitionها: تنظیم زمان‌های مختلف برای ایجاد افکت‌های لایه‌ای
سازگاری مرورگرها: کد با تمام مرورگرهای مدرن کار می‌کند

چگونه این کد را سفارشی کنیم؟

تغییر رنگ: مقدار #00CED1 را به رنگ مورد نظر خود تغییر دهید
تغییر آیکون‌ها: کلاس‌های Font Awesome را به آیکون‌های دلخواه تغییر دهید
تغییر اندازه: مقادیر width و height را برای اندازه‌های مختلف تنظیم کنید
اضافه کردن لینک: به هر دایره یک لینک اشتراک‌گذاری واقعی اضافه کنید

جمع‌بندی

این دکمه اشتراک‌گذاری یک راه حل زیبا و کاربردی برای افزایش تعامل کاربران است. با استفاده از تکنیک‌های مدرن CSS توانسته‌ایم یک اثر بصری جذاب ایجاد کنیم که هم از نظر عملکردی و هم از نظر زیبایی‌شناسی در سطح بالایی قرار دارد.

شما می‌توانید این کد را مستقیماً در پروژه‌های خود استفاده کنید یا با توجه به نیازهای خود آن را توسعه دهید. برای مشاهده عملکرد زنده می‌توانید کد را در یک فایل HTML ذخیره کرده و در مرورگر اجرا کنید.

نظر شما چیست؟
آیا این آموزش برای شما مفید بود؟ چه پیشنهادی برای بهبود این دکمه اشتراک‌گذاری دارید؟ نظرات و تجربیات خود را با ما و دیگر خوانندگان به اشتراک بگذارید.

اگر سوالی در مورد پیاده‌سازی این کد دارید یا به کمک نیاز دارید، در بخش نظرات مطرح کنید تا راهنمایی کنم. همچنین اگر این آموزش را دوست داشتید، با دوستان خود به اشتراک بگذارید!

2025-07-28/0 دیدگاه /توسط admin

آموزش ساخت دکمه موجی با CSS – انیمیشن حرفه‌ای بدون جاوااسکریپت

CSS, HTML

سلام دوستان! امروز می‌خواهیم با هم یک دکمه فوق‌العاده جذاب با افکت موجی دریا طراحی کنیم که کاملاً با CSS قابل ایجاد است. این آموزش برای همه سطوح مناسب است و نیاز به دانش قبلی خاصی ندارد.

پیش‌نیازها

برای این آموزش فقط نیاز دارید:

یک ویرایشگر کد ساده مثل VSCode
مرورگر وب (ترجیحاً Chrome یا Firefox)
کمی اشتیاق برای یادگیری!

قدم اول: ساخت فایل‌های پروژه

یک پوشه جدید ایجاد کنید
داخل آن یک فایل با نام index.html بسازید
یک فایل با نام style.css هم ایجاد کنید

قدم دوم: کد HTML پایه

کد زیر را در فایل index.html قرار دهید:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>دکمه موجی CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button class="wave-btn">کلیک کنید</button>
</body>
</html>

قدم سوم: استایل‌دهی پایه (CSS)

حالا به فایل style.css می‌رویم و این کدها را اضافه می‌کنیم:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #f0f8ff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.wave-btn {
    position: relative;
    padding: 15px 30px;
    font-size: 18px;
    color: #0066cc;
    background: transparent;
    border: 2px solid #0066cc;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    font-weight: bold;
}

توضیح کدها:

body: صفحه را وسط‌چین می‌کند و یک پس‌زمینه آبی روشن قرار می‌دهد
.wave-btn: استایل اولیه دکمه ما که شامل:
- حاشیه آبی
- متن آبی
- پس‌زمینه شفاف
- گوشه‌های گرد

قدم چهارم: ساخت افکت موجی

حالا بخش جذاب کار! این کدها را به فایل CSS اضافه کنید:

.wave-btn::before {
    content: "";
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #0066cc, #004d99);
    z-index: -1;
    transition: all 0.6s ease-out;
    clip-path: polygon(
        0% 100%,
        100% 100%,
        100% 100%,
        0% 100%
    );
}

.wave-btn:hover {
    color: white;
}

.wave-btn:hover::before {
    bottom: 0;
    clip-path: polygon(
        0% 20%,
        20% 15%,
        40% 25%,
        60% 15%,
        80% 25%,
        100% 15%,
        100% 100%,
        0% 100%
    );
    animation: wave 2s linear infinite;
}

@keyframes wave {
    0% {
        clip-path: polygon(
            0% 20%,
            20% 15%,
            40% 25%,
            60% 15%,
            80% 25%,
            100% 15%,
            100% 100%,
            0% 100%
        );
    }
    50% {
        clip-path: polygon(
            0% 15%,
            20% 25%,
            40% 15%,
            60% 25%,
            80% 15%,
            100% 25%,
            100% 100%,
            0% 100%
        );
    }
    100% {
        clip-path: polygon(
            0% 20%,
            20% 15%,
            40% 25%,
            60% 15%,
            80% 25%,
            100% 15%,
            100% 100%,
            0% 100%
        );
    }
}

توضیح بخش‌های مهم:

.wave-btn::before:
- یک المان ساختگی ایجاد می‌کند
- ابتدا در پایین دکمه مخفی است (bottom: -100%)
- با گرادیان آبی طراحی شده
هاور کردن:
- وقتی موس روی دکمه می‌رود:
  - المان موج از پایین به بالا می‌آید
  - رنگ متن به سفید تغییر می‌کند
  - افکت موجی شروع می‌شود
انیمیشن موج:
- با clip-path شکل موج ایجاد می‌شود
- @keyframes حرکت موج را کنترل می‌کند

قدم پنجم: تست و تنظیمات نهایی

فایل را در مرورگر باز کنید
روی دکمه هاور کنید و افکت زیبا را ببینید
می‌توانید مقادیر زیر را تغییر دهید:
- رنگ‌ها در linear-gradient
- سرعت انیمیشن در 0.6s
- شکل موج با تغییر اعداد در clip-path

جمع‌بندی

در این آموزش کامل یاد گرفتیم:

چگونه با CSS افکت موجی ایجاد کنیم
چطور از pseudo-element ها استفاده کنیم
روش ساخت انیمیشن‌های روان با CSS
تکنیک‌های تعاملی بدون جاوااسکریپت

حالا نوبت شماست! این کد را امتحان کنید و خلاقیت به خرج دهید. اگر سوالی دارید یا پروژه‌ای با این تکنیک ساخته‌اید، خوشحال می‌شویم در بخش نظرات با ما و دیگران به اشتراک بگذارید.

2025-07-25/0 دیدگاه /توسط admin

موارد استفاده

توضیح گام به گام

1. ساختار HTML

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

3. افکت انتقال

4. بهبود ظاهری

نکات پیشرفته

1. تغییر جهت افکت

2. اضافه کردن تاخیر

3. استفاده از آیکون‌های مختلف

جمع‌بندی

مراحل ساخت کارت محصول با Bootstrap 5

۱. آماده‌سازی محیط پروژه

۲. ساختار HTML کارت محصول

۳. استایل‌دهی سفارشی (CSS)

ویدئوی آموزشی

سورس کد کامل پروژه

نظر شما؟

ساختار HTML

توضیح استایل‌های CSS

استایل‌های پایه

استایل اصلی دکمه

افکت‌های هاور

افکت ذرات

کد JavaScript

کد کامل نهایی

جمع‌بندی

تجربیات و پیشنهادات شما

هدف نهایی چیست؟

ساختار HTML

توضیح ساختار:

استایل‌دهی با CSS

۱. تنظیمات کلی (* و body)

۲. کانتینر اصلی لوودر

۳. کانتینر نقطه‌ها

۴. نقطه‌های متحرک

توضیحات مهم:

۵. تنظیم اندازه و رنگ هر نقطه

۶. انیمیشن چرخش (@keyframes spin)

چطور کار می‌کند؟

۷. انیمیشن متن “Loading…”

کد نهایی کامل

نتیجه‌گیری

مقدمه

ساختار HTML

توضیحات ساختار:

استایل‌دهی با CSS

استایل پایه دکمه:

افکت‌های hover و active:

استایل حروف و فاصله‌گذاری:

انیمیشن تبدیل حرف A به آیکون:

کد کامل

جمع‌بندی

مقدمه

ساختار HTML

استایل‌دهی با CSS

بخش‌های اصلی:

ظرف لودینگ:

متن لودینگ:

دایره‌های انیمیشنی:

تنظیمات هر دایره:

انیمیشن‌ها:

کد کامل

نکات تکمیلی

ابزارهای مورد نیاز

آموزش گام‌به‌گام

۱. ساختار HTML

۲. استایل‌دهی با CSS

کد نهایی آماده برای استفاده

نحوه استفاده از این کدها:

نظر شما چیست؟

مراحل پیاده‌سازی

کد کامل

پیش‌نمایش نهایی

کد کامل

توضیحات گام به گام

1. ساختار HTML

2. استایل‌دهی CSS

بخش body:

دکمه اصلی:

۱. تنظیمات کلی (`*` و `body`)

۶. انیمیشن چرخش (`@keyframes spin`)