راهنمای جامع توابع (Functions) در CSS را برایت آورده‌ام — شامل دسته‌بندی، توضیح، مثال و کاربرد هر نوع تابع.

📘 راهنمای کامل توابع CSS (CSS Functions Reference)

CSS شامل تعداد زیادی تابع داخلی (Built-in Functions) است که می‌توانند در مقدار ویژگی‌ها استفاده شوند (مثل رنگ‌ها، اندازه‌ها، انیمیشن‌ها، transform و …).

🎨 1. توابع رنگ (Color Functions)

rgb(), rgba()

تعریف رنگ با مقدار قرمز، سبز و آبی.

color: rgb(255, 0, 0); /* قرمز */
color: rgba(255, 0, 0, 0.5); /* قرمز با شفافیت */

hsl(), hsla()

تعریف رنگ با ته‌رنگ (Hue)، اشباع (Saturation) و روشنایی (Lightness).

color: hsl(200, 50%, 40%);
color: hsla(200, 50%, 40%, 0.5);

lab(), lch()

سیستم‌های رنگ پیشرفته‌تر (در CSS Color Level 4).

color: lab(60% –20 30);
color: lch(52% 132 252);

color()

تعریف رنگ با فضای رنگی مشخص (مثل display-p3 یا srgb).

color: color(display-p3 1 0.5 0);

hwb()

Hue + Whiteness + Blackness (مشابه HSL ولی شهودی‌تر).

color: hwb(90 10% 20%);

color-mix()

ترکیب دو رنگ.

color: color-mix(in srgb, red 40%, blue);

opacity(), alpha()

تنظیم شفافیت (در حال حاضر opacity بیشتر به صورت ویژگی جداگانه استفاده می‌شود).

📏 2. توابع اندازه و موقعیت (Length & Size Functions)

calc()

محاسبه‌ی مقدار با ترکیب واحدها.

width: calc(100% – 50px);
font-size: calc(1rem + 2vw);

min(), max(), clamp()

• min() → مقدار کوچکتر

• max() → مقدار بزرگ‌تر

• clamp() → محدود کردن مقدار در بازه‌ای مشخص

width: min(100%, 500px);
width: max(200px, 50%);
font-size: clamp(1rem, 2vw, 2rem);

🌀 3. توابع Transform (تبدیل)

translate(), translateX(), translateY()

جابجایی المان.

transform: translate(50px, 20px);

scale(), scaleX(), scaleY()

تغییر اندازه.

transform: scale(1.2);

rotate()

چرخاندن المان.

transform: rotate(45deg);

skew()

کج کردن (Skew).

transform: skew(10deg, 5deg);

matrix(), matrix3d()

تعریف دقیق‌تر Transform (ماتریسی).

perspective()

تعیین عمق دید در سه‌بعدی.

transform: perspective(500px) rotateY(45deg);

🌈 4. توابع گرادیان (Gradient Functions)

linear-gradient()

گرادیان خطی.

background: linear-gradient(to right, red, blue);

radial-gradient()

گرادیان شعاعی (دایره‌ای).

background: radial-gradient(circle, yellow, green);

conic-gradient()

گرادیان مخروطی (چرخشی).

background: conic-gradient(from 0deg, red, yellow, green);

repeating-linear-gradient(), repeating-radial-gradient()

نسخه‌های تکرارشونده از گرادیان‌ها.

🧭 5. توابع URL و منابع (Resource Functions)

url()

برای ارجاع به یک منبع خارجی (تصویر، فونت، ویدیو و …).

background-image: url(“bg.jpg”);
src: url(“font.woff2”) format(“woff2”);

image()

برای تعریف چند تصویر با fallback.

background-image: image(url(“photo.avif”), url(“photo.jpg”));

🧮 6. توابع ریاضی (Math Functions)

در CSS جدید (Level 4) قابل استفاده در محاسبات هستند:

• abs() → قدر مطلق

• sin(), cos(), tan() → توابع مثلثاتی

• sqrt() → جذر

• pow(), exp(), log() → توابع نمایی و لگاریتمی

• hypot() → محاسبه‌ی طول وتر

مثال:

transform: rotate(calc(sin(45deg) * 1turn));

(در حال حاضر پشتیبانی مرورگرها برای این‌ها محدود است.)

🔁 7. توابع تکرار و شمارش

counter(), counters()

نمایش شمارنده در محتوای تولیدشده (Generated Content).

content: counter(section);
content: counters(section, “.”);

🧬 8. توابع مرتبط با متغیرها و مقادیر پویا

var()

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

color: var(–main-color, blue);

env()

استفاده از متغیرهای محیطی مرورگر (مثل safe area در iOS).

padding: env(safe-area-inset-top);

attr()

دریافت مقدار یک ویژگی HTML برای استفاده در CSS (پشتیبانی محدود).

content: attr(data-label);

🕒 9. توابع زمان و انیمیشن

steps()

برای زمان‌بندی گام‌به‌گام در انیمیشن‌ها.

animation-timing-function: steps(5, end);

cubic-bezier()

تعریف منحنی‌های Bézier سفارشی برای انیمیشن.

transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

🎯 10. توابع فیلتر (Filter Functions)

filter: blur(5px);
filter: brightness(120%);
filter: contrast(80%);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(100%);
filter: saturate(150%);
filter: sepia(50%);
filter: drop-shadow(2px 2px 5px black);

✅ خلاصه دسته‌بندی