دوره CSS پیشرفته

۱

متغیرهای CSS (Custom Properties)

تعریف و استفاده از متغیرها در CSS

۲۵ دقیقه

انقلابی در مدیریت استایل‌ها با CSS Variables

متغیرهای CSS (که Custom Properties نیز نامیده می‌شوند) امکان تعریف مقادیر قابل استفاده مجدد در CSS را فراهم می‌کنند.

مفهوم کلیدی

متغیرهای CSS با پیشوند -- تعریف می‌شوند و با تابع var() استفاده می‌شوند. این متغیرها در سطح عنصر تعریف شده و به صورت ارثی منتقل می‌شوند.

تمرین تعاملی

css-variables.css

/* متغیرهای CSS (Custom Properties) */

:root {
    /* تعریف متغیرهای اصلی در سطح ریشه */
    --primary-color: #9c27b0;
    --secondary-color: #2196f3;
    --success-color: #4caf50;
    --danger-color: #f44336;
    --warning-color: #ff9800;
    
    /* متغیرهای تایپوگرافی */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-base: 16px;
    --font-size-large: 1.25rem;
    --font-size-small: 0.875rem;
    
    /* متغیرهای spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* متغیرهای shadow */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
    
    /* متغیرهای border-radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;
    
    /* متغیرهای transition */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
}

.container {
    /* بازنویسی متغیرها در سطح container */
    --primary-color: #7b1fa2;
    --spacing-lg: 2rem;
}

/* استفاده از متغیرها */
.button {
    background-color: var(--primary-color);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: none;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-fast);
    cursor: pointer;
}

.button:hover {
    background-color: color-mix(in srgb, var(--primary-color) 90%, black);
    box-shadow: var(--shadow-md);
}

.button-large {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-large);
}

.button-danger {
    background-color: var(--danger-color);
}

.button-success {
    background-color: var(--success-color);
}

/* کارت با متغیرهای CSS */
.card {
    --card-bg: white;
    --card-padding: var(--spacing-lg);
    --card-shadow: var(--shadow-md);
    --card-border-radius: var(--radius-lg);
    
    background: var(--card-bg);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    margin-bottom: var(--spacing-lg);
    transition: box-shadow var(--transition-normal);
}

.card:hover {
    --card-shadow: var(--shadow-lg);
}

.card.dark {
    --card-bg: #2d2d2d;
    --card-text: white;
    color: var(--card-text);
}

/* استفاده از calc() با متغیرها */
.responsive-grid {
    --columns: 4;
    --gap: var(--spacing-md);
    
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: var(--gap);
}

@media (max-width: 1024px) {
    .responsive-grid {
        --columns: 3;
    }
}

@media (max-width: 768px) {
    .responsive-grid {
        --columns: 2;
    }
}

@media (max-width: 480px) {
    .responsive-grid {
        --columns: 1;
        --gap: var(--spacing-sm);
    }
}

/* متغیرها با fallback value */
.element {
    /* اگر --custom-size تعریف نشده باشد، از 100px استفاده کن */
    width: var(--custom-size, 100px);
    height: var(--custom-size, 100px);
    background-color: var(--custom-color, var(--primary-color));
}

/* استفاده از متغیرها در animations */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: var(--shadow-sm);
    }
    50% {
        transform: scale(1.05);
        box-shadow: var(--shadow-lg);
    }
    100% {
        transform: scale(1);
        box-shadow: var(--shadow-sm);
    }
}

.pulse-element {
    animation: pulse 2s infinite;
    background: var(--primary-color);
}

/* تغییر تم با جاوااسکریپت */
.theme-dark {
    --primary-color: #7b1fa2;
    --secondary-color: #1976d2;
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
}

.theme-light {
    --primary-color: #9c27b0;
    --secondary-color: #2196f3;
    --bg-color: #ffffff;
    --text-color: #333333;
}

نمایش متغیرهای CSS:

تمرین:

یک سیستم طراحی (Design System) با استفاده از متغیرهای CSS ایجاد کنید که شامل رنگ‌ها، تایپوگرافی، spacing و shadow باشد. سپس یک دکمه و کارت با استفاده از این متغیرها بسازید.

در :root متغیرهای اصلی را تعریف کنید. سپس با استفاده از var() و color-mix() حالت‌های مختلف (hover, active) را ایجاد کنید.

نکات طلایی:

متغیرهای CSS در :root به صورت سراسری در دسترس هستند
می‌توان متغیرها را در هر سطحی بازنویسی کرد
از var(--variable, fallback) برای مقادیر پیش‌فرض استفاده کنید
متغیرها برای ایجاد تم‌های پویا عالی هستند
می‌توان با جاوااسکریپت متغیرها را تغییر داد

آزمون پایان جلسه - متغیرهای CSS

سوال ۱: چگونه یک متغیر CSS تعریف می‌کنیم؟

الف

$variable-name: value;

ب

--variable-name: value;

ج

var(variable-name): value;

سوال ۲: برای تعریف متغیرهای سراسری (global) از چه سلکتوری استفاده می‌کنیم؟

الف

body

ب

:root

ج

html

سوال ۳: چگونه از یک متغیر CSS با مقدار پیش‌فرض استفاده می‌کنیم؟

الف

var(--variable, fallback)

ب

--variable(fallback)

ج

use(--variable, fallback)

نتایج آزمون

۲

CSS Grid پیشرفته

تکنیک‌های پیشرفته Grid Layout

۳۰ دقیقه

طراحی حرفه‌ای با CSS Grid

CSS Grid یک سیستم چیدمان دو بعدی قدرتمند است که به شما امکان طراحی طرح‌های پیچیده را می‌دهد.

تکنیک‌های پیشرفته Grid

grid-advanced.css

/* CSS Grid پیشرفته */

/* 1. Grid با خطوط نام‌گذاری شده */
.advanced-grid {
    display: grid;
    grid-template-columns: 
        [sidebar-start] 250px 
        [sidebar-end content-start] 1fr 
        [content-end];
    grid-template-rows: 
        [header-start] 80px 
        [header-end main-start] 1fr 
        [main-end footer-start] 60px 
        [footer-end];
    gap: 20px;
    min-height: 100vh;
}

.header {
    grid-column: sidebar-start / content-end;
    grid-row: header-start;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 10px;
}

.sidebar {
    grid-column: sidebar-start;
    grid-row: main-start / footer-end;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    border-right: 2px solid #e9ecef;
}

.main-content {
    grid-column: content-start;
    grid-row: main-start;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.footer {
    grid-column: content-start;
    grid-row: footer-start;
    background: #343a40;
    color: white;
    padding: 20px;
    border-radius: 10px;
}

/* 2. Grid Template Areas */
.dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 20px;
    grid-template-areas: 
        "header header header"
        "sidebar content content"
        "footer footer footer";
    min-height: 500px;
}

.dashboard-header {
    grid-area: header;
    background: #4caf50;
    color: white;
    padding: 20px;
    border-radius: 10px;
}

.dashboard-sidebar {
    grid-area: sidebar;
    background: #2196f3;
    color: white;
    padding: 20px;
    border-radius: 10px;
}

.dashboard-content {
    grid-area: content;
    background: #ff9800;
    color: white;
    padding: 20px;
    border-radius: 10px;
}

.dashboard-footer {
    grid-area: footer;
    background: #9c27b0;
    color: white;
    padding: 20px;
    border-radius: 10px;
}

/* 3. Auto-fill و Auto-fit */
.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.auto-item {
    background: #9c27b0;
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease;
}

.auto-item:hover {
    transform: translateY(-5px);
}

/* 4. Grid Masonry-like با grid-auto-flow */
.masonry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: dense;
    gap: 15px;
}

.masonry-item {
    background: #2196f3;
    color: white;
    padding: 20px;
    border-radius: 8px;
}

.masonry-item:nth-child(3n) {
    grid-column: span 2;
    grid-row: span 2;
    background: #4caf50;
}

.masonry-item:nth-child(5n) {
    grid-column: span 3;
    background: #ff9800;
}

/* 5. Subgrid (پشتیبانی محدود اما قدرتمند) */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}

.grid-item {
    display: grid;
    /* اگر پشتیبانی شود: */
    /* grid-template-rows: subgrid; */
    /* grid-row: span 3; */
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    padding: 15px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.grid-item-header {
    font-weight: bold;
    padding-bottom: 10px;
    border-bottom: 2px solid #9c27b0;
}

.grid-item-content {
    padding: 10px 0;
}

.grid-item-footer {
    padding-top: 10px;
    border-top: 1px solid #eee;
    font-size: 0.9em;
    color: #666;
}

/* 6. Grid با aspect-ratio */
.ratio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.ratio-item {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
}

.ratio-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #9c27b0, #2196f3);
    opacity: 0.8;
}

.ratio-item-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    z-index: 1;
}

/* 7. Grid با minmax و clamp */
.responsive-grid-advanced {
    display: grid;
    grid-template-columns: 
        minmax(200px, 300px)
        minmax(400px, 1fr)
        minmax(150px, 250px);
    gap: 30px;
    min-height: 400px;
}

.responsive-item {
    background: #f0f0f0;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* 8. Grid برای فرم‌ها */
.form-grid {
    display: grid;
    grid-template-columns: [label] 150px [input] 1fr [feedback] 100px;
    gap: 15px;
    align-items: center;
}

.form-label {
    grid-column: label;
    text-align: right;
    font-weight: bold;
}

.form-input {
    grid-column: input;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

.form-feedback {
    grid-column: feedback;
    font-size: 14px;
    color: #666;
}

.form-input:focus {
    border-color: #9c27b0;
    outline: none;
}

/* 9. Grid با Animation */
.animated-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    perspective: 1000px;
}

.animated-cell {
    background: linear-gradient(45deg, #9c27b0, #2196f3);
    color: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-style: preserve-3d;
}

.animated-cell:hover {
    transform: rotateY(10deg) rotateX(5deg) translateZ(20px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* 10. Grid برای گالری تصاویر */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 200px;
    gap: 15px;
    grid-auto-flow: dense;
}

.gallery-item {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.gallery-item:nth-child(3n) {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-item:nth-child(5n) {
    grid-row: span 2;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

نمونه Grid:

آیتم ۱

آیتم ۲

آیتم ۳

آیتم ۴ (span 2)

آیتم ۵

تمرین:

یک داشبورد مدیریتی با CSS Grid طراحی کنید که شامل هدر، سایدبار، محتوای اصلی و فوتر باشد. از grid-template-areas برای چیدمان استفاده کنید و طرح را واکنش‌گرا کنید.

از grid-template-areas برای تعریف مناطق استفاده کنید. با media query برای موبایل چیدمان را به یک ستون تغییر دهید.

نکات طلایی Grid:

auto-fill و auto-fit برای طرح‌های واکنش‌گرا عالی هستند
grid-template-areas خوانایی کد را افزایش می‌دهد
از minmax() برای محدود کردن اندازه‌ها استفاده کنید
grid-auto-flow: dense از ایجاد فضاهای خالی جلوگیری می‌کند
می‌توانید خطوط Grid را نام‌گذاری کنید

آزمون پایان جلسه - CSS Grid پیشرفته

سوال ۱: تفاوت `auto-fill` و `auto-fit` در CSS Grid چیست؟

الف

auto-fill ستون‌های خالی ایجاد می‌کند، auto-fit آنها را جمع می‌کند

ب

هیچ تفاوتی ندارند

ج

auto-fit فقط در موبایل کار می‌کند

سوال ۲: برای ایجاد یک طرح Masonry-like از کدام ویژگی استفاده می‌کنیم؟

الف

grid-auto-flow: dense

ب

grid-masonry: true

ج

grid-layout: masonry

سوال ۳: `grid-template-areas` چه کمکی می‌کند؟

الف

خوانایی کد را افزایش و نگهداری را آسان‌تر می‌کند

ب

سرعت اجرای Grid را افزایش می‌دهد

ج

فقط برای نمایش بهتر در DevTools است

نتایج آزمون

۳

Flexbox پیشرفته

تکنیک‌های حرفه‌ای Flexbox

۲۵ دقیقه

تکنیک‌های حرفه‌ای Flexbox

Flexbox برای چیدمان‌های یک‌بعدی عالی است. در این درس تکنیک‌های پیشرفته‌ای را یاد می‌گیرید.

Flexbox پیشرفته

flexbox-advanced.css

/* Flexbox پیشرفته */

/* 1. Flexbox با Gap (فاصله بین آیتم‌ها) */
.flex-gap-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 30px;
}

.flex-gap-item {
    flex: 1 1 200px;
    background: #9c27b0;
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

/* 2. Flexbox برای navbar حرفه‌ای */
.navbar-advanced {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
    margin-bottom: 30px;
}

.nav-logo {
    font-size: 1.5rem;
    font-weight: bold;
}

.nav-menu {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    color: white;
    text-decoration: none;
    padding: 10px 0;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #ffeb3b;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #ffeb3b;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    gap: 15px;
}

/* 3. Flexbox برای کارت‌های محصول */
.products-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.product-card {
    flex: 1 1 300px;
    max-width: 350px;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.product-image {
    height: 200px;
    background: linear-gradient(45deg, #9c27b0, #2196f3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
}

.product-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.product-title {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: #333;
}

.product-description {
    color: #666;
    margin-bottom: 15px;
    flex-grow: 1;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.product-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: #9c27b0;
}

.product-button {
    background: #9c27b0;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.product-button:hover {
    background: #7b1fa2;
}

/* 4. Flexbox برای فرم‌های پیچیده */
.advanced-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
    padding: 30px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-label {
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.form-input {
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.form-input:focus {
    border-color: #9c27b0;
    outline: none;
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 20px;
}

/* 5. Flexbox برای Masonry Layout */
.flex-masonry {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.masonry-column {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.masonry-item {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

/* 6. Flexbox برای Timeline */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #9c27b0;
}

.timeline-item {
    position: relative;
    display: flex;
    gap: 20px;
}

.timeline-dot {
    position: absolute;
    left: -35px;
    top: 5px;
    width: 20px;
    height: 20px;
    background: #9c27b0;
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 0 0 3px #9c27b0;
}

.timeline-content {
    flex: 1;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

/* 7. Flexbox برای Pricing Tables */
.pricing-container {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.pricing-card {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

.pricing-header {
    background: linear-gradient(135deg, #9c27b0, #7b1fa2);
    color: white;
    padding: 30px;
    text-align: center;
}

.pricing-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.pricing-price {
    font-size: 2.5rem;
    font-weight: bold;
}

.pricing-features {
    padding: 30px;
    flex-grow: 1;
}

.pricing-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.pricing-feature i {
    color: #4caf50;
}

.pricing-footer {
    padding: 0 30px 30px;
    text-align: center;
}

.pricing-button {
    display: inline-block;
    background: #9c27b0;
    color: white;
    padding: 15px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s ease;
}

.pricing-button:hover {
    background: #7b1fa2;
}

/* 8. Flexbox برای Accordion */
.accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.accordion-item {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #f8f9fa;
    cursor: pointer;
    transition: background 0.3s ease;
}

.accordion-header:hover {
    background: #e9ecef;
}

.accordion-title {
    font-weight: bold;
    color: #333;
}

.accordion-icon {
    transition: transform 0.3s ease;
}

.accordion-icon.active {
    transform: rotate(180deg);
}

.accordion-content {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-content.active {
    padding: 20px;
    max-height: 500px;
}

/* 9. Flexbox برای Image Gallery */
.flex-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gallery-item {
    flex: 1 1 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(156, 39, 176, 0.8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

نمونه Flexbox:

آیتم ۱

آیتم ۲ (flex: 2)

آیتم ۳

تمرین:

یک گالری تصاویر واکنش‌گرا با Flexbox طراحی کنید که تصاویر به صورت masonry چیده شوند و هنگام hover زوم شوند و overlay نمایش داده شود.

از flex-wrap: wrap و flex: 1 1 250px استفاده کنید. برای overlay از position absolute و transition opacity استفاده کنید.

آزمون پایان جلسه - Flexbox پیشرفته

سوال ۱: ویژگی `gap` در Flexbox چه کاری انجام می‌دهد؟

الف

فاصله بین آیتم‌های Flexbox را تنظیم می‌کند

ب

فاصله بین محتوا و border را تنظیم می‌کند

ج

فاصله بین خطوط Flexbox را تنظیم می‌کند

سوال ۲: برای ایجاد یک navbar با استفاده از Flexbox، از کدام ویژگی برای فاصله دادن بین آیتم‌ها استفاده می‌کنیم؟

الف

margin یا gap

ب

padding

ج

border-spacing

سوال ۳: `flex: 1 1 200px` به چه معناست؟

الف

flex-grow: 1, flex-shrink: 1, flex-basis: 200px

ب

flex: 1px, shrink: 1px, basis: 200px

ج

flex-size: 200px, growable: true

نتایج آزمون

۴

انیمیشن‌های CSS پیشرفته

Keyframes، Transitions، Transformations

۳۰ دقیقه

انیمیشن‌های حرفه‌ای CSS

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

مفهوم کلیدی

انیمیشن‌های CSS می‌توانند تجربه کاربری را به شدت بهبود بخشند. استفاده درست از آنها مهم است تا باعث سردرگمی کاربر نشوند.

نکات طلایی انیمیشن:

از @keyframes برای انیمیشن‌های پیچیده استفاده کنید
transition برای تغییرات ساده مناسب است
از will-change برای بهینه‌سازی عملکرد استفاده کنید
انیمیشن‌ها را با prefers-reduced-motion کنترل کنید
از cubic-bezier برای timing functions حرفه‌ای استفاده کنید

آزمون پایان جلسه - انیمیشن‌های CSS

سوال ۱: تفاوت اصلی `transition` و `animation` چیست؟

الف

transition برای تغییرات ساده، animation برای انیمیشن‌های پیچیده

ب

تفاوتی ندارند

ج

transition فقط برای رنگ کار می‌کند

سوال ۲: `cubic-bezier(0.68, -0.55, 0.265, 1.55)` چه نوع انیمیشنی ایجاد می‌کند؟

الف

انیمیشن bounce یا elastic

ب

انیمیشن خطی

ج

انیمیشن fade

سوال ۳: چگونه می‌توان انیمیشن را برای کاربرانی که حرکت را دوست ندارند غیرفعال کرد؟

الف

با @media (prefers-reduced-motion: reduce)

ب

با animation: none;

ج

با JavaScript فقط

نتایج آزمون

۵

CSS Selectors پیشرفته

Selectorهای پیچیده، Pseudo-classes، Pseudo-elements

۲۵ دقیقه

انتخاب‌گرهای قدرتمند CSS

در این درس با Selectorهای پیشرفته CSS آشنا می‌شوید.

نکات طلایی Selectors:

از :is() و :where() برای گروه‌بندی Selectorها استفاده کنید
:has() امکان انتخاب والد بر اساس فرزندان را می‌دهد
Pseudo-classes مانند :focus-within و :empty مفید هستند
از ::before و ::after برای اضافه کردن محتوای دکوراتیو استفاده کنید
Attribute selectors برای انتخاب بر اساس attributeها قدرتمند هستند

آزمون پایان جلسه - Selectors پیشرفته

سوال ۱: تفاوت `:is()` و `:where()` چیست؟

الف

:where() specificity صفر دارد، :is() specificity بالاتر دارد

ب

تفاوتی ندارند

ج

:is() فقط در Chrome کار می‌کند

سوال ۲: `:has()` چه کاری انجام می‌دهد؟

الف

عنصری را انتخاب می‌کند که فرزند مشخصی دارد

ب

عنصری که دارای attribute خاصی است را انتخاب می‌کند

ج

عنصری که درون عنصر دیگر است را انتخاب می‌کند

سوال ۳: کدام Selector عناصر فرم معتبر (valid) را انتخاب می‌کند؟

الف

:valid

ب

:checked

ج

:enabled

نتایج آزمون

۶

Responsive Design پیشرفته

تکنیک‌های مدرن طراحی واکنش‌گرا

۳۰ دقیقه

تکنیک‌های مدرن Responsive Design

در این درس با جدیدترین تکنیک‌های طراحی واکنش‌گرا آشنا می‌شوید.

نکات طلایی Responsive Design:

از clamp() برای مقادیر responsive استفاده کنید
min() و max() برای محدود کردن اندازه‌ها مفید هستند
از container queries برای استایل‌دهی بر اساس اندازه container استفاده کنید
از viewport units (vw, vh, vmin, vmax) برای اندازه‌های نسبی استفاده کنید
با aspect-ratio نسبت ابعاد را حفظ کنید

آزمون پایان جلسه - Responsive Design

سوال ۱: `clamp(1rem, 5vw, 2rem)` چه کاری انجام می‌دهد؟

الف

مقداری بین 1rem و 2rem بر اساس 5% viewport width ایجاد می‌کند

ب

همیشه 5vw برمی‌گرداند

ج

بین 1vw و 2vw تغییر می‌کند

سوال ۲: Container Queries چه مشکلی را حل می‌کنند؟

الف

استایل‌دهی بر اساس اندازه container به جای viewport

ب

سرعت بارگذاری صفحه را افزایش می‌دهند

ج

فقط برای کامپوننت‌های React مفید هستند

سوال ۳: `aspect-ratio: 16 / 9` چه کاری انجام می‌دهد؟

الف

نسبت عرض به ارتفاع را ۱۶ به ۹ حفظ می‌کند

ب

عنصر را ۱۶px در ۹px می‌کند

ج

فقط برای تصاویر کار می‌کند

نتایج آزمون

۷

CSS Functions پیشرفته

calc()، min()، max()، clamp()، color-mix()

۲۵ دقیقه

توابع قدرتمند CSS

در این درس با توابع پیشرفته CSS آشنا می‌شوید.

نکات طلایی CSS Functions:

calc() برای محاسبات ریاضی در CSS
min() و max() برای انتخاب مقادیر حداقلی/حداکثری
clamp() برای محدود کردن مقادیر بین حداقل و حداکثر
color-mix() برای ترکیب رنگ‌ها
var() برای استفاده از متغیرهای CSS

آزمون پایان جلسه - CSS Functions

سوال ۱: `color-mix(in srgb, red 30%, blue 70%)` چه رنگی ایجاد می‌کند؟

الف

رنگی که 30% قرمز و 70% آبی است

ب

رنگ بنفش

ج

رنگ قرمز

سوال ۲: تفاوت `min(100%, 500px)` و `max(100%, 500px)` چیست؟

الف

اولی کوچک‌ترین مقدار، دومی بزرگ‌ترین مقدار را برمی‌گرداند

ب

هر دو یکسان هستند

ج

اولی برای عرض، دومی برای ارتفاع

سوال ۳: `calc(100vh - 80px)` چه کاری انجام می‌دهد؟

الف

ارتفاع viewport منهای 80 پیکسل

ب

100 پیکسل منهای 80 پیکسل

ج

100% منهای 80 پیکسل

نتایج آزمون

۸

بهینه‌سازی Performance در CSS

تکنیک‌های بهبود سرعت و کارایی

۲۰ دقیقه

بهینه‌سازی کارایی CSS

در این درس با تکنیک‌های بهینه‌سازی Performance در CSS آشنا می‌شوید.

نکات طلایی Performance:

از CSS containment برای محدود کردن scope بازپردازی استفاده کنید
از will-change برای بهینه‌سازی انیمیشن‌ها استفاده کنید
از properties کم‌هزینه مانند transform و opacity برای انیمیشن استفاده کنید
از @import کمتر استفاده کنید و فایل‌ها را concatenate کنید
از Critical CSS برای بهبود First Paint استفاده کنید

آزمون پایان جلسه - Performance

سوال ۱: کدام properties برای انیمیشن‌های با کارایی بالا مناسب هستند؟

الف

transform و opacity

ب

width و height

ج

background-color و border

سوال ۲: `contain: layout paint style` چه کاری انجام می‌دهد؟

الف

scope بازپردازی را محدود می‌کند تا عملکرد بهبود یابد

ب

عنصر را از جریان document خارج می‌کند

ج

عنصر را نامرئی می‌کند

سوال ۳: Critical CSS چیست؟

الف

CSS مورد نیاز برای render اولیه صفحه

ب

CSS مربوط به خطاهای بحرانی

ج

CSS فشرده شده

نتایج آزمون

۹

CSS برای Accessibility

تکنیک‌های طراحی برای دسترسی‌پذیری

۲۰ دقیقه

طراحی قابل دسترس (Accessible)

در این درس با تکنیک‌های CSS برای بهبود دسترسی‌پذیری آشنا می‌شوید.

نکات طلایی Accessibility:

از prefers-reduced-motion برای کاربرانی که حرکت را دوست ندارند استفاده کنید
از prefers-contrast برای کاربران نیازمند کنتراست بالا استفاده کنید
از focus-visible برای focus styles بهینه استفاده کنید
از relative units (em, rem) برای اندازه‌های فونت استفاده کنید
از color contrast کافی برای خوانایی اطمینان حاصل کنید

آزمون پایان جلسه - Accessibility

سوال ۱: `@media (prefers-reduced-motion: reduce)` برای چه کاربرانی مفید است؟

الف

کاربرانی که حرکت باعث سرگیجه یا ناراحتی آنها می‌شود

ب

کاربران موبایل

ج

کاربران اینترنت کم سرعت

سوال ۲: `:focus-visible` چه زمانی فعال می‌شود؟

الف

وقتی کاربر با کیبورد navigates می‌کند

ب

همیشه وقتی عنصر focus دارد

ج

فقط در موبایل

سوال ۳: حداقل contrast ratio برای متن معمولی (normal text) چقدر باید باشد؟

الف

4.5:1

ب

3:1

ج

2:1

🎨 دوره CSS پیشرفته ✨

🎨 آموزش تعاملی CSS پیشرفته

متغیرهای CSS (Custom Properties)

انقلابی در مدیریت استایل‌ها با CSS Variables

مفهوم کلیدی

تمرین تعاملی

نمایش متغیرهای CSS:

تمرین:

نکات طلایی:

آزمون پایان جلسه - متغیرهای CSS

سوال ۱: چگونه یک متغیر CSS تعریف می‌کنیم؟

سوال ۲: برای تعریف متغیرهای سراسری (global) از چه سلکتوری استفاده می‌کنیم؟

سوال ۳: چگونه از یک متغیر CSS با مقدار پیش‌فرض استفاده می‌کنیم؟

نتایج آزمون

CSS Grid پیشرفته

طراحی حرفه‌ای با CSS Grid

تکنیک‌های پیشرفته Grid

نمونه Grid:

تمرین:

نکات طلایی Grid:

آزمون پایان جلسه - CSS Grid پیشرفته

سوال ۱: تفاوت auto-fill و auto-fit در CSS Grid چیست؟

سوال ۲: برای ایجاد یک طرح Masonry-like از کدام ویژگی استفاده می‌کنیم؟

سوال ۳: grid-template-areas چه کمکی می‌کند؟

نتایج آزمون

Flexbox پیشرفته

تکنیک‌های حرفه‌ای Flexbox

Flexbox پیشرفته

نمونه Flexbox:

تمرین:

آزمون پایان جلسه - Flexbox پیشرفته

سوال ۱: ویژگی gap در Flexbox چه کاری انجام می‌دهد؟

سوال ۲: برای ایجاد یک navbar با استفاده از Flexbox، از کدام ویژگی برای فاصله دادن بین آیتم‌ها استفاده می‌کنیم؟

سوال ۳: flex: 1 1 200px به چه معناست؟

نتایج آزمون

انیمیشن‌های CSS پیشرفته

انیمیشن‌های حرفه‌ای CSS

مفهوم کلیدی

نکات طلایی انیمیشن:

آزمون پایان جلسه - انیمیشن‌های CSS

سوال ۱: تفاوت اصلی transition و animation چیست؟

سوال ۲: cubic-bezier(0.68, -0.55, 0.265, 1.55) چه نوع انیمیشنی ایجاد می‌کند؟

سوال ۳: چگونه می‌توان انیمیشن را برای کاربرانی که حرکت را دوست ندارند غیرفعال کرد؟

نتایج آزمون

CSS Selectors پیشرفته

انتخاب‌گرهای قدرتمند CSS

نکات طلایی Selectors:

آزمون پایان جلسه - Selectors پیشرفته

سوال ۱: تفاوت :is() و :where() چیست؟

سوال ۲: :has() چه کاری انجام می‌دهد؟

سوال ۳: کدام Selector عناصر فرم معتبر (valid) را انتخاب می‌کند؟

نتایج آزمون

Responsive Design پیشرفته

تکنیک‌های مدرن Responsive Design

نکات طلایی Responsive Design:

آزمون پایان جلسه - Responsive Design

سوال ۱: clamp(1rem, 5vw, 2rem) چه کاری انجام می‌دهد؟

سوال ۲: Container Queries چه مشکلی را حل می‌کنند؟

سوال ۳: aspect-ratio: 16 / 9 چه کاری انجام می‌دهد؟

نتایج آزمون

CSS Functions پیشرفته

توابع قدرتمند CSS

نکات طلایی CSS Functions:

آزمون پایان جلسه - CSS Functions

سوال ۱: color-mix(in srgb, red 30%, blue 70%) چه رنگی ایجاد می‌کند؟

سوال ۲: تفاوت min(100%, 500px) و max(100%, 500px) چیست؟

سوال ۳: calc(100vh - 80px) چه کاری انجام می‌دهد؟

نتایج آزمون

بهینه‌سازی Performance در CSS

بهینه‌سازی کارایی CSS

نکات طلایی Performance:

آزمون پایان جلسه - Performance

سوال ۱: کدام properties برای انیمیشن‌های با کارایی بالا مناسب هستند؟

سوال ۲: contain: layout paint style چه کاری انجام می‌دهد؟

سوال ۳: Critical CSS چیست؟

نتایج آزمون

CSS برای Accessibility

طراحی قابل دسترس (Accessible)

نکات طلایی Accessibility:

آزمون پایان جلسه - Accessibility

سوال ۱: تفاوت `auto-fill` و `auto-fit` در CSS Grid چیست؟

سوال ۳: `grid-template-areas` چه کمکی می‌کند؟

سوال ۱: ویژگی `gap` در Flexbox چه کاری انجام می‌دهد؟

سوال ۳: `flex: 1 1 200px` به چه معناست؟

سوال ۱: تفاوت اصلی `transition` و `animation` چیست؟

سوال ۲: `cubic-bezier(0.68, -0.55, 0.265, 1.55)` چه نوع انیمیشنی ایجاد می‌کند؟

سوال ۱: تفاوت `:is()` و `:where()` چیست؟

سوال ۲: `:has()` چه کاری انجام می‌دهد؟

سوال ۱: `clamp(1rem, 5vw, 2rem)` چه کاری انجام می‌دهد؟

سوال ۳: `aspect-ratio: 16 / 9` چه کاری انجام می‌دهد؟

سوال ۱: `color-mix(in srgb, red 30%, blue 70%)` چه رنگی ایجاد می‌کند؟

سوال ۲: تفاوت `min(100%, 500px)` و `max(100%, 500px)` چیست؟

سوال ۳: `calc(100vh - 80px)` چه کاری انجام می‌دهد؟

سوال ۲: `contain: layout paint style` چه کاری انجام می‌دهد؟

سوال ۱: `@media (prefers-reduced-motion: reduce)` برای چه کاربرانی مفید است؟

سوال ۲: `:focus-visible` چه زمانی فعال می‌شود؟