در این مقاله به معرفی و دستهبندی کامل توابع CSS پرداخته شده است تا به راحتی بتوانید برای طراحی وب و افکتهای مختلف از آنها استفاده کنید. این توابع شامل رنگها، تبدیلها، فیلترها، متغیرها و دیگر ویژگیهای کاربردی CSS هستند. برای یادگیری عملی و مثالهای بیشتر، به دوره آموزش CSS مراجعه کنید.
دستهبندی توابع CSS
- توابع رنگ: rgb(), rgba(), hsl(), hsla(), saturate(), sepia(), brightness(), contrast(), grayscale(), hue-rotate()
- توابع تبدیل: translate(), rotate(), scale(), skew(), matrix()
- توابع فیلتر: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia()
- توابع متغیر: var()
- توابع مسیر و منابع: url()
- توابع گرادیانت: linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-radial-gradient()
- توابع ریاضی: min(), max(), clamp(), calc(), attr()
جدول خلاصه توابع مهم
| تابع | توضیح |
|---|---|
| rgb(), rgba() | تعریف رنگ با ترکیب Red, Green, Blue و شفافیت |
| hsl(), hsla() | تعریف رنگ با Hue, Saturation, Lightness و شفافیت |
| translate() | جابجایی عناصر در محور X و Y |
| rotate() | چرخش عناصر حول محور خود |
| scale() | تغییر اندازه عناصر در محور X و Y |
| skew() | مورب کردن عناصر در محور X و Y |
| var() | استفاده از متغیرهای CSS |
| url() | بارگذاری تصاویر و منابع خارجی |
| linear-gradient(), radial-gradient() | ایجاد گرادیانتهای خطی و شعاعی |
| calc(), min(), max(), clamp() | محاسبات ریاضی و مقادیر داینامیک |
نکات مهم
- این توابع به شما امکان طراحی حرفهای و واکنشگرا را میدهند.
- میتوان توابع را با هم ترکیب کرده و افکتهای پیچیده ایجاد کرد.
- استفاده از var() باعث مدیریت آسانتر متغیرها و مقادیر مشترک میشود.
- برای یادگیری مثالهای عملی، حتماً دوره آموزش CSS را مشاهده کنید.
آموزش قبلی: آموزش تابع Var در CSS
دیدگاه و پرسش