رنگ ها

Main Page Tutorial
موارد آموزشی
CSS پیشرفته
۱	گوشه‌های گرد
۲	کادر تصاویر
۳	پس‌زمینه‌ها
۴	رنگ‌ها
۵	Gradientها
۶	سایه‌ها
۷	افکت‌های متن
۸	قلم‌های وب
۹	2D Transforms
۱۰	3D Transforms
۱۱	Transitions
۱۲	انیمیشن‌ها
۱۳	Tooltip
۱۴	استایل‌دهی تصاویر
۱۵	ویژگی object-fit
۱۶	دکمه‌ها
۱۷	مثال‌های صفحه‌بندی (Pagination)
۱۸	ستون‌های متعدد
۱۹	رابط کاربری
۲۰	متغیرها
۲۱	Box Sizing
۲۲	Flexbox
۲۳	Media Queries
۲۴	مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

CSS بیشتر از ۱۴۰ نام رنگ، مقادیر HEX، مقادیر RGB، مقادیر RGBA، مقادیر HSL، مقادیر HSLA و opacity (به فارسی: کدری) را پشتیبانی می‌کند.

رنگ های RGBA

مقادیر رنگ RGBA توسعه‌ای از مقادیر رنگ RGB با یک کانال آلفا هستند - که مشخص کننده میزان کدری رنگ است.

یک مقدار رنگ RGBA به صورت زیر مشخص می‌شود: rgba(red, green, blue, alpha). پارامتر آلفا عددی بین ۰٫۰ (تمام شفاف) و ۱٫۰ (تمام کدر) است.

مثال زیر رنگ‌های RGBA مختلف را تعریف می‌کند:

مثال

1 #p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
2 #p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
3 #p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */

مشاهدهٔ نتیجه

رنگ های HSL

HSL (سرواژهٔ: lightness (به فارسی: روشنی)، saturation (به فارسی: اشباع رنگ)، hue (به فارسی: رنگ)) است.

یک مقدار رنگ HSL به صورت زیر تعریف می‌شود: hsl(رنگ، میزان اشباع، میزان روشنی) ↔ hsl(hue, saturation, lightness).

1. hue درجه‌ای از رنگ (به انگلیسی: color) است (از ۰ تا ۳۶۰)
   • ۰ (یا ۳۶۰) قرمز است
   • ۱۲۰ سبز است
   • ۲۴۰ آبی است
2. اشباع، مقداری بر حسب درصد است: ۱۰۰٪ رنگ کامل است.
3. میزان روشنایی نیز بر حسب درصد است؛ ۰٪ تیره (سیاه) و ۱۰۰٪ سفید است.

مثال زیر مقادیر رنگ hsl متفاوت را تعریف می‌کند:

مثال

1 #p1 {background-color: hsl(120, 100%, 50%);}  /* green */
2 #p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
3 #p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
4 #p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */

مشاهدهٔ نتیجه

رنگ های HSLA

مقدارهای رنگ HSLA افزونه ای از مقدارهای رنگ HSL با یک کانال آلفا هستند که میزان کدری رنگ را مشخص می کند.

یک مقدار رنگ HSLA اینگونه تعریف می‌شود: hsla(رنگ، میزان اشباع رنگ، میزان روشنایی، میزان آلفا) ↔ hsla(hue, saturation, lightness, alpha). که پارامتر آلفا میزان کدری را تعریف می‌کند. پارامتر آلفا عددی بین ۰٫۰ (تمام شفاف) و ۱٫۰ (تمام کدر) است.

مثال زیر مقادیر رنگ HSLA متفاوت را تعریف می‌کند:

مثال

1 #p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
2 #p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
3 #p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
4 #p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */

مشاهدهٔ نتیجه

Opacity (به فارسی: میزان کدری)

ویژگی opacity میزان کدری را برای کل عنصر تنظیم می‌کند (هم رنگ پس زمینه و هم متن کدر/شفاف خواهند بود)

مقدار ویژگی opacity می‌بایست عددی بین ۰٫۰ (تمام شفاف) و ۱٫۰ (کاملاً کدر) باشد.

توجه داشته باشید که متن بالا هم شفاف/کدر خواهد بود.

مثال زیر عناصر متفاوت را با opacity را نشان می‌دهد:

مثال

1 #p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
2 #p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
3 #p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */

مشاهدهٔ نتیجه

خود را با تمرینها امتحان کنید!

صفحهٔ بعد»

«صفحهٔ قبل