توابع CSSExplained

62 of 62 rows

تابع↕	چه چیزی برمی‌گرداند↕	مثال↕
اندازه و ریاضی
⤢calc()	نتیجه یک عبارت محاسباتی، با واحدهای مخلوط.	width: calc(100% - 2rem);
⤢min()	کوچک‌ترین مقدار از مقادیر داده‌شده.	width: min(100%, 60ch);
⤢max()	بزرگ‌ترین مقدار از مقادیر داده‌شده.	width: max(320px, 40vw);
⤢clamp()	مقداری محدودشده بین یک حداقل، یک مقدار ترجیحی و یک حداکثر.	font-size: clamp(1rem, 2vw, 1.5rem);
⤢env()	یک متغیر محیطی ارائه‌شده توسط عامل کاربر را می‌خواند.	padding: env(safe-area-inset-top);
⤢fit-content()	اندازه‌ای محدود به عرض ذاتی محتوا.	width: fit-content(200px);
⤢round()	یک مقدار را به نزدیک‌ترین مضرب مقداری دیگر گرد می‌کند.	width: round(up, 133px, 50px);
⤢mod()	باقی‌مانده مثبت تقسیم، همیشه نامنفی.	margin: mod(100px, 30px);
⤢rem()	باقی‌مانده تقسیم، با علامت مقسوم.	margin: rem(-100px, 30px);
⤢abs()	مقدار مطلق.	translateX(abs(-10px));
⤢sign()	بسته به علامت مقدار: منفی یک، صفر یا یک.	padding: sign(-5px) * 10px;
گرید
⤢minmax()	بازه‌ای از اندازه برای مسیرهای گرید، بین حداقل و حداکثر.	grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
⤢repeat()	یک الگوی مسیر را چند بار یا تا پر شدن فضا تکرار می‌کند.	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
منطق و شرایط
⤢if()	بر اساس یک شرط، یکی از دو مقدار را انتخاب می‌کند.	font-size: if(media(width > 600px), 1.25rem, 1rem);
⤢media()	وقتی یک مدیاکوئری مطابقت دارد درست است، برای استفاده در if().	padding: if(media(width > 40rem), 2rem, 1rem);
⤢supports()	وقتی مرورگر یک اعلان را پشتیبانی می‌کند درست است، برای استفاده در if().	display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333);
⤢selector()	وقتی انتخاب‌گر مطابقت دارد درست است، برای استفاده در if().	font-weight: if(selector(:hover), 700, 400);
خصوصیات سفارشی
⤢var()	مقدار یک خصوصیت سفارشی، با یک مقدار جایگزین اختیاری.	color: var(--accent, #333);
رنگ
⤢rgb() / rgba()	رنگی از کانال‌های قرمز، سبز و آبی (و آلفا).	color: rgb(59 130 246 / 0.8);
⤢hsl() / hsla()	رنگی از فام، اشباع و روشنایی.	color: hsl(210 80% 50%);
⤢oklch()	رنگی در فضای ادراکی OKLCH (روشنایی یکنواخت).	color: oklch(0.7 0.15 250);
⤢color-mix()	ترکیبی از دو رنگ در یک فضای رنگی مشخص.	color: color-mix(in srgb, red 40%, blue);
⤢color-contrast()	گزینه‌ای از فهرست که بیشترین کنتراست را با رنگ پایه دارد.	color: color-contrast(#fff vs #000, #777);
⤢hwb()	رنگی از فام، درجه سفیدی و درجه سیاهی.	color: hwb(210 10% 20%);
⤢lab()	رنگی در فضای CIELAB (روشنایی، محورهای a و b).	color: lab(52% 40 59);
⤢lch()	رنگی در فضای CIELAB (روشنایی، کروما، فام).	color: lch(52% 49 24);
⤢color()	رنگی در هر فضای رنگی از پیش تعریف‌شده، بر اساس مختصات.	color: color(display-p3 1 0.4 0.2);
⤢light-dark()	رنگ اول در طرح روشن، رنگ دوم در طرح تیره.	color: light-dark(#1a1a1a, #f5f5f5);
گرادیان‌ها و تصاویر
⤢linear-gradient()	گرادیانی در امتداد یک خط.	background: linear-gradient(90deg, #4b9fff, #2ee6a6);
⤢radial-gradient()	گرادیانی که از یک نقطه بیرون می‌زند.	background: radial-gradient(circle, #fff, #000);
⤢conic-gradient()	گرادیانی که حول یک مرکز می‌چرخد.	background: conic-gradient(red, yellow, red);
⤢url()	یک منبع خارجی را بارگذاری می‌کند: تصویر، فونت یا SVG.	background-image: url(hero.webp);
⤢image-set()	بهترین تصویر را برای وضوح صفحه دستگاه انتخاب می‌کند.	background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x);
⤢cross-fade()	دو تصویر را با درصدی مشخص در هم می‌آمیزد.	background-image: cross-fade(30%, url(a.webp), url(b.webp));
فیلتر و شکل
⤢blur() / brightness() / saturate()	محو‌سازی، روشنایی و اشباع اعمال‌شده روی عنصر.	filter: blur(4px) brightness(1.1);
⤢path()	مسیر SVG برای clip-path یا motion.	clip-path: path('M10 10 H 90 V 90 Z');
⤢attr()	مقدار یک ویژگی از عنصر را می‌خواند.	content: attr(data-label);
⤢contrast()	کنتراست عنصر را تنظیم می‌کند.	filter: contrast(1.4);
⤢drop-shadow()	سایه‌ای می‌کشد که از شکل آلفای عنصر پیروی می‌کند.	filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
⤢grayscale()	عنصر را به مقیاس خاکستری تبدیل می‌کند.	filter: grayscale(100%);
⤢invert()	رنگ‌های عنصر را معکوس می‌کند.	filter: invert(1);
⤢sepia()	تن سپیا اعمال می‌کند.	filter: sepia(0.6);
⤢hue-rotate()	فام رنگ‌های عنصر را می‌چرخاند.	filter: hue-rotate(90deg);
⤢opacity()	کدری عنصر را از طریق filter تعیین می‌کند.	filter: opacity(0.5);
⤢circle()	شکل دایره‌ای برای clip-path یا shape-outside.	clip-path: circle(40% at 50% 50%);
⤢ellipse()	شکل بیضی برای clip-path یا shape-outside.	clip-path: ellipse(50% 35% at 50% 50%);
⤢inset()	شکل مستطیل با گوشه‌های گرد برای clip-path.	clip-path: inset(10px 10px 10px 10px round 8px);
⤢polygon()	شکل چندضلعی از فهرستی از نقاط.	clip-path: polygon(50% 0, 100% 100%, 0 100%);
تبدیل
⤢translate()	عنصر را در امتداد X و Y جابه‌جا می‌کند.	transform: translate(10px, 20px);
⤢rotate()	عنصر را حول مرکز می‌چرخاند.	transform: rotate(45deg);
⤢scale()	مقیاس عنصر را در امتداد X و Y تغییر می‌دهد.	transform: scale(1.25);
⤢skew()	عنصر را در امتداد X و Y اریب می‌کند.	transform: skew(10deg, 0deg);
⤢matrix()	تبدیل دوبعدی از شش مقدار ماتریس.	transform: matrix(1, 0, 0.5, 1, 10, 0);
⤢perspective()	عمق پرسپکتیو سه‌بعدی را برای فرزندان عنصر تعیین می‌کند.	transform: perspective(600px) rotateY(20deg);
انیمیشن و شمارنده‌ها
⤢cubic-bezier()	منحنی easing از چهار نقطه کنترل.	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
⤢steps()	easing‌ای که در گام‌های مساوی می‌پرد.	animation-timing-function: steps(8, end);
⤢counter()	مقدار فعلی یک شمارنده CSS، به‌عنوان محتوا.	content: counter(chapter);
⤢counters()	مقادیر یک شمارنده و همه شمارنده‌های والد آن، به‌هم‌پیوسته با یک رشته.	content: counters(item, ".");
⤢progress()	از 0 تا 1، با پیشرفت یک مقدار بین آغاز و پایان.	opacity: progress(scroll(), 0, 50vh);
⤢random()	عددی تصادفی از یک بازه، ثابت برای هر عنصر.	rotate: random(from -5deg to 5deg);
⤢sin()	سینوس یک زاویه، برای عبارت‌های calc.	translateY(calc(1rem * sin(45deg)));
⤢cos()	کسینوس یک زاویه، برای عبارت‌های calc.	translateX(calc(1rem * cos(45deg)));