BenoService

آکادمی بنو/آموزش CSS

CSS3 چیست؟ آشنایی با CSS3 و امکانات آن

بهنام نوبخت · ۱۴۰۵/۶/۲۸

در مقاله‌های قبلی با CSS، Selectorها، Box Model، Position، Pseudo-Classها، متغیرهای CSS و همچنین روش‌های حرفه‌ای ساختاردهی فایل‌های CSS آشنا شدیم. تا اینجا یاد گرفتیم چگونه ظاهر عناصر HTML را کنترل کنیم، اما CSS فقط به تغییر رنگ و اندازه محدود نمی‌شود.

با پیشرفت وب، نیاز طراحان به امکاناتی مانند گوشه‌های گرد، سایه‌ها، Gradient، انیمیشن، Transition، Transform و طراحی Responsive بیشتر شد. مجموعه‌ای از قابلیت‌های مهم CSS در دوره‌ای که معمولاً با نام CSS3 شناخته می‌شود، پاسخ بسیاری از این نیازها را فراهم کرد.

البته یک نکته مهم وجود دارد: امروزه بهتر است CSS3 را یک «زبان کاملاً جدا از CSS» در نظر نگیریم. CSS به‌صورت مجموعه‌ای از ماژول‌های مستقل توسعه پیدا می‌کند و هر ماژول می‌تواند سطح یا نسخه مخصوص خود را داشته باشد. بنابراین اصطلاح CSS3 بیشتر یک اصطلاح تاریخی و آموزشی برای اشاره به نسل مهمی از قابلیت‌های CSS است، نه نام یک زبان جداگانه.

در این مقاله با مفهوم CSS3، تفاوت آن با CSS قدیمی، مهم‌ترین قابلیت‌های آن و کاربرد این قابلیت‌ها در طراحی واقعی صفحات وب آشنا می‌شویم.

CSS3 چیست؟

CSS3 را می‌توان نسل مهمی از توسعه CSS دانست که امکانات بسیار بیشتری برای طراحی ظاهری، تعامل، حرکت و Responsive Design در اختیار توسعه‌دهندگان وب قرار داد.

در CSSهای قدیمی، برای ایجاد بسیاری از جلوه‌های گرافیکی به تصاویر، JavaScript یا تکنیک‌های پیچیده نیاز بود. اما بسیاری از این قابلیت‌ها به‌تدریج مستقیماً وارد CSS شدند.

برای مثال، امروزه می‌توانیم با چند خط CSS یک کارت با گوشه‌های گرد، سایه، Gradient و افکت Hover ایجاد کنیم:

.card {
    background: linear-gradient(135deg, #ff7a00, #ff3d00);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-8px);
}

در این مثال از چند قابلیت مهم استفاده کرده‌ایم:

  • linear-gradient

  • border-radius

  • box-shadow

  • transition

  • transform

این قابلیت‌ها بخش مهمی از ابزارهایی هستند که طراحی رابط‌های مدرن را ساده‌تر کردند. MDN نیز این امکانات را در ماژول‌های مختلف CSS مانند Backgrounds and Borders، Transforms، Transitions و Animations مستند می‌کند.

CSS3 چه مشکلی را حل کرد؟

برای درک اهمیت CSS3 بهتر است شرایط طراحی وب قبل از گسترش این قابلیت‌ها را تصور کنیم.

فرض کنید می‌خواستیم یک Box با گوشه‌های کاملاً گرد داشته باشیم.

در گذشته ممکن بود برای چنین کاری از:

  • تصاویر پس‌زمینه

  • چندین عنصر HTML

  • تکنیک‌های پیچیده CSS

  • JavaScript

  • یا راه‌حل‌های وابسته به مرورگر

استفاده شود.

اما با border-radius این کار بسیار ساده شد:

.box {
    border-radius: 20px;
}

یا برای ایجاد سایه:

.box {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

ویژگی border-radius امکان گرد کردن گوشه‌های عنصر را فراهم می‌کند و box-shadow برای ایجاد سایه‌های داخلی یا خارجی استفاده می‌شود.

بنابراین یکی از مهم‌ترین دستاوردهای CSS3 این بود که بسیاری از جلوه‌های بصری را بدون نیاز به تصاویر اضافی یا JavaScript قابل پیاده‌سازی کرد.

تفاوت CSS قدیمی و CSS3

برای درک بهتر، یک مقایسه ساده داشته باشیم.

CSS قدیمی

CSS3 و قابلیت‌های مدرن

طراحی ساده‌تر

طراحی بصری بسیار غنی‌تر

استفاده بیشتر از تصاویر برای جلوه‌ها

Gradient و Shadow با CSS

ایجاد گوشه‌های گرد دشوارتر

border-radius

افکت‌های حرکتی محدود

transition و animation

تغییر شکل محدود

transform

Responsive Design محدودتر

Media Query

وابستگی بیشتر به JavaScript برای بعضی افکت‌ها

بسیاری از افکت‌ها با CSS

فایل‌های تصویری بیشتر

بسیاری از جلوه‌ها به‌صورت CSS

البته این جدول به معنی آن نیست که CSS قدیمی «ضعیف» بوده است؛ بلکه CSS به مرور زمان گسترش پیدا کرده و امکانات جدیدی به آن اضافه شده است.

مهم‌ترین قابلیت‌های CSS3

در ادامه با مهم‌ترین قابلیت‌هایی که معمولاً در بحث CSS3 مطرح می‌شوند آشنا می‌شویم.

Border Radius

یکی از شناخته‌شده‌ترین قابلیت‌ها border-radius است.

با استفاده از آن می‌توانیم گوشه‌های عناصر را گرد کنیم:

.card {
    border-radius: 15px;
}

برای گرد کردن کامل یک عنصر مربعی و تبدیل آن به دایره:

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

همچنین می‌توان برای هر گوشه مقدار متفاوتی تعیین کرد:

.card {
    border-radius: 20px 5px 30px 10px;
}

ترتیب مقادیر به شکل زیر است:

بالا-چپ
بالا-راست
پایین-راست
پایین-چپ

border-radius امروزه یک قابلیت بسیار جاافتاده و گسترده در مرورگرها است.

Box Shadow

با box-shadow می‌توان برای عناصر سایه ایجاد کرد.

مثلاً:

.card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

ساختار کلی آن به شکل زیر است:

box-shadow: offset-x offset-y blur spread color;

مثال:

.card {
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2);
}

همچنین می‌توان سایه داخلی ایجاد کرد:

.input {
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}

حتی امکان تعریف چند سایه نیز وجود دارد:

.card {
    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.1),
        0 15px 40px rgba(0, 0, 0, 0.05);
}

box-shadow از ویژگی‌های مهم طراحی رابط کاربری است و می‌تواند سایه خارجی یا inset داخلی ایجاد کند.

Text Shadow

همان‌طور که برای Box می‌توان سایه ایجاد کرد، برای متن نیز می‌توان سایه ساخت.

.title {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

مثلاً:

.hero-title {
    color: white;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

این ویژگی مخصوصاً در طراحی Hero Section، Banner و Headingهای بزرگ کاربرد دارد.

Gradient

Gradient یا طیف رنگی یکی دیگر از قابلیت‌های بسیار کاربردی CSS است.

به جای استفاده از یک رنگ ثابت:

.button {
    background: #ff6a00;
}

می‌توانیم از Gradient استفاده کنیم:

.button {
    background: linear-gradient(
        135deg,
        #ff7a00,
        #ff3d00
    );
}

Gradientهای CSS می‌توانند به شکل‌های مختلف ایجاد شوند، از جمله:

  • Linear Gradient

  • Radial Gradient

  • Repeating Gradient

MDN نیز Gradientها را به‌عنوان تصاویری معرفی می‌کند که انتقال نرم بین رنگ‌ها ایجاد می‌کنند.

Linear Gradient

.hero {
    background: linear-gradient(
        to right,
        #ff7a00,
        #ff0055
    );
}

Radial Gradient

.hero {
    background: radial-gradient(
        circle,
        #ff9a00,
        #ff3d00
    );
}

Gradientها امروزه یکی از ابزارهای اصلی برای طراحی Backgroundهای مدرن هستند.

Transform

با transform می‌توان شکل، موقعیت یا زاویه یک عنصر را تغییر داد.

برای مثال:

جابه‌جایی

.box {
    transform: translateX(20px);
}

چرخش

.box {
    transform: rotate(15deg);
}

بزرگ‌نمایی

.box {
    transform: scale(1.1);
}

ترکیب چند Transform

.box {
    transform: translateY(-10px) rotate(3deg) scale(1.05);
}

Transformها می‌توانند تغییرات دوبعدی و سه‌بعدی در فضای مختصات عنصر ایجاد کنند.

Transition

یکی از مشکلات طراحی‌های قدیمی این بود که تغییر وضعیت عناصر معمولاً ناگهانی اتفاق می‌افتاد.

مثلاً:

.button:hover {
    background: orange;
}

با قرار دادن Mouse روی Button، رنگ فوراً تغییر می‌کند.

با transition می‌توان این تغییر را نرم کرد:

.button {
    background: #ff6a00;
    transition: background 0.3s ease;
}

.button:hover {
    background: #ff3d00;
}

می‌توان چند ویژگی را نیز تغییر داد:

.card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

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

Transition امکان ایجاد تغییر تدریجی بین وضعیت‌های مختلف یک عنصر را فراهم می‌کند.

Animation و Keyframes

Transition برای تغییر بین دو وضعیت بسیار مناسب است، اما اگر بخواهیم یک انیمیشن چندمرحله‌ای داشته باشیم، می‌توانیم از @keyframes و animation استفاده کنیم.

مثلاً:

@keyframes moveBox {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(200px);
    }
}

سپس:

.box {
    animation: moveBox 2s ease-in-out infinite alternate;
}

در اینجا:

moveBox → نام Animation
2s → مدت زمان
ease-in-out → نحوه تغییر
infinite → تکرار نامحدود
alternate → رفت و برگشت

CSS Animationها با استفاده از Keyframeها مشخص می‌کنند عنصر در مراحل مختلف انیمیشن چگونه نمایش داده شود.

Media Query

یکی دیگر از قابلیت‌های بسیار مهم CSS، Media Query است.

Media Query به ما اجازه می‌دهد بر اساس ویژگی‌های محیط نمایش، قوانین CSS متفاوتی اعمال کنیم.

برای مثال:

.container {
    width: 1200px;
}

@media (max-width: 768px) {
    .container {
        width: 100%;
    }
}

یعنی در نمایشگرهای کوچک‌تر، رفتار متفاوتی داشته باشیم.

Media Query یکی از پایه‌های اصلی طراحی Responsive است و می‌تواند بر اساس ویژگی‌هایی مانند اندازه Viewport، Orientation و برخی ویژگی‌های دستگاه یا تنظیمات کاربر، CSS متفاوتی اعمال کند.

در مقالات بعدی، Responsive Design و Media Query را به‌صورت کامل‌تر بررسی خواهیم کرد.

آیا CSS3 یک زبان جدا از CSS است؟

خیر.

این یکی از مهم‌ترین نکات این مقاله است.

ممکن است در آموزش‌ها عباراتی مانند:

HTML5
CSS3

زیاد ببینید و تصور کنید HTML5 و CSS3 نسخه‌های جدیدی هستند که کاملاً جایگزین HTML و CSS قبلی شده‌اند.

اما درباره CSS، داستان کمی متفاوت است.

CSS در ابتدا نسخه‌هایی مانند CSS1 و CSS2 داشت. بعد از CSS2.1، توسعه CSS به سمت ماژول‌های مختلف حرکت کرد؛ بنابراین دیگر یک نسخه واحد به نام CSS3 که تمام CSS را شامل شود، مدل اصلی توسعه CSS نیست.

امروزه هر بخش CSS می‌تواند به‌صورت مستقل توسعه پیدا کند و نسخه مخصوص خودش را داشته باشد. برای همین MDN صراحتاً توضیح می‌دهد که دیگر قرار نیست «CSS3» یا «CSS4» به‌عنوان نسخه واحد CSS منتشر شود؛ بلکه CSS به مجموعه‌ای از ماژول‌ها تقسیم شده است.

بنابراین بهتر است:

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

CSS3 در مقابل CSS مدرن

این نکته بسیار مهم است.

امروزه اگر کسی بگوید:

«من می‌خواهم CSS3 یاد بگیرم.»

معمولاً منظورش یادگیری قابلیت‌هایی مانند موارد زیر است:

border-radius
box-shadow
gradient
transform
transition
animation
media query

اما CSS مدرن بسیار گسترده‌تر از این موارد است.

برای مثال امروزه CSS شامل ماژول‌ها و قابلیت‌هایی مانند:

  • Flexbox

  • Grid

  • Container Queries

  • CSS Variables

  • Logical Properties

  • Modern Color Functions

  • CSS Nesting

  • Cascade Layers

  • Advanced Selectors

  • Scroll-driven Animations

  • و قابلیت‌های متعدد دیگر

است.

بنابراین یادگیری CSS3 پایان یادگیری CSS نیست؛ بلکه یک مرحله مهم در مسیر یادگیری CSS محسوب می‌شود. ساختار امروزی CSS به‌صورت ماژولار توسعه پیدا می‌کند.

یک مثال واقعی: ساخت کارت مدرن

حالا چند قابلیت را با هم ترکیب کنیم.

HTML

<div class="product-card">
    <span class="product-badge">جدید</span>

    <h2>فروشگاه ساز</h2>

    <p>
        یک راهکار حرفه‌ای برای ساخت فروشگاه اینترنتی.
    </p>

    <a href="#" class="product-button">
        مشاهده محصول
    </a>
</div>

CSS

.product-card {
    position: relative;

    width: 320px;
    padding: 30px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #ff7a00,
            #ff3d00
        );

    border-radius: 24px;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.2);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.25);
}

.product-card h2 {
    margin-bottom: 12px;

    text-shadow:
        0 3px 10px rgba(0, 0, 0, 0.2);
}

.product-badge {
    display: inline-block;

    padding: 6px 12px;

    background: rgba(255, 255, 255, 0.2);

    border-radius: 50px;

    font-size: 13px;
}

.product-button {
    display: inline-block;

    margin-top: 20px;
    padding: 12px 20px;

    color: #ff5500;
    background: white;

    border-radius: 12px;

    text-decoration: none;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.product-button:hover {
    transform: scale(1.05);
    background: #f5f5f5;
}

در این مثال چند قابلیت مهم را همزمان استفاده کردیم:

Gradient
Border Radius
Box Shadow
Text Shadow
Transform
Transition
RGBA

همین ترکیب‌های ساده می‌توانند ظاهر یک صفحه معمولی را به یک رابط کاربری حرفه‌ای‌تر تبدیل کنند.

CSS3 و کاهش وابستگی به تصاویر

یکی از تغییرات مهم در مسیر تکامل CSS این بود که بسیاری از جلوه‌های بصری را می‌توان بدون فایل تصویری پیاده‌سازی کرد.

برای مثال، به‌جای ساخت یک تصویر برای یک Gradient:

background: linear-gradient(
    135deg,
    #ff7a00,
    #ff0055
);

یا به‌جای تصویر برای گوشه‌های گرد:

border-radius: 20px;

یا برای سایه:

box-shadow:
    0 15px 30px rgba(0, 0, 0, 0.15);

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

البته این به معنی حذف کامل تصاویر از وب نیست. تصاویر همچنان برای عکس‌ها، تصاویر محصولات، Illustrationها و محتوای گرافیکی واقعی ضروری هستند.

آیا برای CSS3 هنوز باید Vendor Prefix بنویسیم؟

احتمالاً در پروژه‌های قدیمی کدهایی مانند این را دیده‌اید:

-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);

این Prefixها برای پشتیبانی از برخی قابلیت‌ها در مرورگرهای قدیمی استفاده می‌شدند.

اما نباید آن‌ها را بدون دلیل در هر کدی اضافه کنیم.

امروزه بسیاری از قابلیت‌های CSS پشتیبانی گسترده‌ای دارند و بهتر است قبل از استفاده از Prefix، وضعیت پشتیبانی قابلیت موردنظر را بررسی کنیم.

مثلاً برای قابلیت‌هایی مانند border-radius و box-shadow، پشتیبانی مرورگرها بسیار گسترده است.

یک نکته مهم درباره سازگاری مرورگرها

یکی از اشتباهات رایج این است که تصور کنیم:

«اگر یک قابلیت CSS وجود دارد، پس همه مرورگرها دقیقاً یکسان از آن پشتیبانی می‌کنند.»

در عمل باید وضعیت پشتیبانی قابلیت‌های جدید را بررسی کرد.

برای قابلیت‌های بسیار قدیمی و جاافتاده معمولاً مشکل خاصی وجود ندارد، اما برای قابلیت‌های جدیدتر بهتر است قبل از استفاده در پروژه واقعی، Browser Compatibility را بررسی کنید.

برای همین منابعی مانند MDN بخش Browser Compatibility را برای بسیاری از ویژگی‌های CSS ارائه می‌کنند.

پروژه کوچک: کارت پروفایل مدرن

حالا یک تمرین عملی انجام دهیم.

هدف ما ساخت یک کارت پروفایل ساده است.

HTML

<div class="profile-card">

    <div class="profile-avatar">
        B
    </div>

    <h2>Behnam</h2>

    <p>
        Frontend Developer
    </p>

    <button>
        مشاهده پروفایل
    </button>

</div>

CSS

body {
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    background:
        linear-gradient(
            135deg,
            #111827,
            #1f2937
        );

    font-family: sans-serif;
}

.profile-card {
    width: 300px;
    padding: 35px;

    text-align: center;

    color: white;

    background:
        rgba(255, 255, 255, 0.08);

    border-radius: 25px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.3);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.profile-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.4);
}

.profile-avatar {
    width: 90px;
    height: 90px;

    margin: 0 auto 20px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #ff7a00,
            #ff0055
        );

    font-size: 32px;
    font-weight: bold;
}

.profile-card button {
    margin-top: 20px;

    padding: 12px 24px;

    border: none;
    border-radius: 12px;

    background: white;
    color: #111827;

    cursor: pointer;

    transition:
        transform 0.2s ease;
}

.profile-card button:hover {
    transform: scale(1.05);
}

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

اشتباهات رایج هنگام یادگیری CSS3

اشتباه اول: CSS3 را یک زبان کاملاً جدا بدانیم

CSS3 نسخه‌ای جدا از CSS نیست که لازم باشد آن را از ابتدا مانند یک زبان مستقل یاد بگیریم.

اشتباه دوم: فکر کنیم CSS3 به معنی تمام CSS مدرن است

CSS امروزی بسیار گسترده‌تر از چیزی است که معمولاً تحت عنوان CSS3 آموزش داده می‌شود.

اشتباه سوم: استفاده افراطی از Shadow

مثلاً:

box-shadow:
    0 0 50px red;

برای همه عناصر صفحه!

Shadow باید به ایجاد سلسله‌مراتب بصری کمک کند، نه اینکه تمام صفحه را شلوغ کند.

اشتباه چهارم: استفاده بیش از حد از Animation

Animation جذاب است، اما اگر همه عناصر صفحه دائماً حرکت کنند، رابط کاربری می‌تواند آزاردهنده شود.

Animation باید هدف داشته باشد.

اشتباه پنجم: استفاده کورکورانه از Vendor Prefix

نباید صرفاً به دلیل اینکه در یک آموزش قدیمی چند Prefix دیده‌اید، آن‌ها را در تمام پروژه‌ها اضافه کنید.

ابتدا وضعیت پشتیبانی ویژگی موردنظر را بررسی کنید.

اشتباه ششم: تصور اینکه CSS فقط برای زیبایی است

CSS فقط برای رنگ و ظاهر نیست.

CSS مسئول بخش مهمی از:

  • Layout

  • Responsive Design

  • Spacing

  • Typography

  • Animation

  • Interactionهای بصری

است.

MDN نیز CSS را زبانی برای کنترل Presentation و Layout صفحات وب معرفی می‌کند.

تمرین‌های این مقاله

تمرین ۱

یک کارت بسازید که:

  • گوشه‌های گرد داشته باشد.

  • Shadow داشته باشد.

  • Background آن Gradient باشد.

تمرین ۲

برای کارت یک Hover Effect ایجاد کنید که هنگام Hover:

کمی به سمت بالا حرکت کند
+
Shadow آن بیشتر شود

را پیاده‌سازی کند.

تمرین ۳

یک Button بسازید که:

  • Gradient داشته باشد.

  • Border Radius داشته باشد.

  • هنگام Hover کمی بزرگ شود.

  • تغییرات آن با Transition انجام شود.

تمرین ۴

یک Animation بسازید که یک عنصر را از سمت چپ به راست حرکت دهد.

جمع‌بندی

CSS3 را می‌توان یکی از مهم‌ترین مراحل تکامل CSS دانست. قابلیت‌هایی مانند border-radius، box-shadow، Gradient، Transform، Transition و Animation امکاناتی را در اختیار طراحان وب قرار دادند که طراحی رابط‌های کاربری زیباتر و تعاملی‌تر را بسیار ساده‌تر کردند.

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

پس وقتی در این دوره از «CSS3» صحبت می‌کنیم، منظورمان بیشتر مجموعه‌ای از قابلیت‌های مهم و تأثیرگذار CSS است که مسیر طراحی وب را به سمت رابط‌های مدرن‌تر تغییر دادند.

در مقاله بعدی، وارد بخش دقیق‌تر و کاربردی‌تر این قابلیت‌ها می‌شویم و ویژگی‌های جدید CSS3 را یکی‌یکی بررسی می‌کنیم.

۰۰

نظرات

کد در دسترس نیست

هنوز نظری ثبت نشده است.