ویژگی‌های جدید CSS3

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

۱. متغیرهای CSS (CSS Variables)

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

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

undefined

:root {
  --main-color: #007bff;
  --padding-size: 10px;
}

button {
  background-color: var(--main-color);
  padding: var(--padding-size);
}

مزیت: به‌جای تغییر چندین مقدار در کد، فقط مقدار متغیر را تغییر می‌دهید.

۲. افکت‌های متنی پیشرفته

سایه متن (text-shadow)

undefined

h1 {
  text-shadow: 2px 2px 5px gray;
}

باعث ایجاد افکت برجسته برای متن می‌شود.

تغییر شکل متن (text-transform)

undefined

h1 {
  text-transform: uppercase; /* متن را به حروف بزرگ تبدیل می‌کند */
}

چندین پس‌زمینه متنی (background-clip: text)

undefined

h1 {
  background: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  color: transparent;
}

🔹 این ویژگی باعث می‌شود متن به‌جای رنگ، از گرادینت پس‌زمینه استفاده کند.

۳. انیمیشن‌ها و ترنزیشن‌ها

ترنزیشن (Transitions)

undefined

button {
  background-color: blue;
  transition: background-color 0.5s ease-in-out;
}

button:hover {
  background-color: red;
}

🔹 تغییرات CSS را به‌صورت نرم و تدریجی اعمال می‌کند.

انیمیشن‌های CSS

undefined

@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

.box {
  animation: move 2s infinite alternate;
}

امکان حرکت، تغییر اندازه و سایر تغییرات پویا بدون نیاز به جاوااسکریپت.

۴. ویژگی‌های پیشرفته پس‌زمینه و گرادینت‌ها

گرادینت خطی (Linear Gradient)

undefined

div {
  background: linear-gradient(to right, red, yellow);
}

ایجاد افکت رنگی بدون نیاز به تصویر.

گرادینت شعاعی (Radial Gradient)

undefined

div {
  background: radial-gradient(circle, red, yellow, green);
}

رنگ‌ها را به‌صورت دایره‌ای ترکیب می‌کند.

کنترل اندازه پس‌زمینه (background-size: cover;)

undefined

div {
  background-image: url('image.jpg');
  background-size: cover;
}

تصویر را به‌طور خودکار در پس‌زمینه تطبیق می‌دهد.

۵. فریمورک‌بندی با Flexbox و Grid

سیستم انعطاف‌پذیر (Flexbox)

undefined

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

برای چینش افقی و عمودی ساده و ریسپانسیو.

سیستم شبکه‌ای (CSS Grid)

undefined

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

مناسب برای طراحی‌های پیچیده و چندستونه.

۶. افکت‌های گرافیکی پیشرفته

سایه‌های جعبه‌ای (box-shadow)

undefined

.box {
  box-shadow: 5px 5px 10px gray;
}

به عناصر جلوه سه‌بعدی می‌دهد.

فیلترهای CSS (filter)

undefined

img {
  filter: grayscale(100%);
}

برای افکت‌هایی مانند محو، سیاه و سفید، تغییر رنگ و غیره.

۷. Media Queries برای طراحی ریسپانسیو

تنظیم استایل برای موبایل و تبلت

undefined

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

بهینه‌سازی طراحی برای دستگاه‌های مختلف.

۸. قابلیت‌های پیشرفته انتخابگرها

انتخاب عنصر nام (nth-child)

undefined

li:nth-child(odd) {
  background-color: lightgray;
}

انتخاب تمام عناصر فرد یا زوج از لیست.

انتخاب بر اساس ویژگی (attribute selectors)

undefined

input[type="text"] {
  border: 2px solid blue;
}

انتخاب عناصر بر اساس مقدار یک ویژگی خاص.

۹. پشتیبانی از حالت تاریک (prefers-color-scheme)

undefined

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

امکان تغییر خودکار تم سایت بر اساس تنظیمات کاربر.

نتیجه‌گیری

CSS3 با ارائه قابلیت‌های مدرن و انعطاف‌پذیر، طراحی وب را زیباتر، سریع‌تر و ریسپانسیو‌تر کرده است. ویژگی‌هایی مانند Flexbox، Grid، متغیرها، انیمیشن‌ها و فیلترها باعث کاهش وابستگی به جاوااسکریپت و تصاویر اضافی شده و بهینه‌سازی تجربه کاربری را آسان‌تر کرده است.