021-20483015

رنگ ها در CSS3

css از نام رنگ ها ، مقادیر هگزادسیمال و RGB پشتیبانی می کند.
علاوه بر آن ، css3 از موارد زیر نیز پشتیبانی می کند :

- رنگ های RGBA
- رنگ های HSL
- رنگ های HSLA
-
opacity

پشتیبانی مرورگر

اعداد داخل جدول نشان دهنده اولین نسخه ای از همان مرورگر است که از صفات و مقادیر رنگ های css3 پشتیبانی می کند :

Property
کروم
اکسپلورر
موزیلا
سافاری
اپرا
RGBA, HSL, and HSLA
4.0
9.0
3.0
3.1
10.1
opacity
4.0
9.0
2.0
3.1
10.1

رنگ های RGBA

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

مثال زیر رنگ های متفاوت RGBA را تعریف می کند.

مثال :

رنگ های RGBA
#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */
مشاهده مثال

رنگ های HSL

HSL مخفف  Hue،  Saturation و Lightness است. هر رنگ HSL با  hsl(hue, saturation, lightness) مشخص می شود.

1. hue درجه ای روی پالت دایره ای رنگ (از 0 تا 360)
- 0 یا 360 قرمز است
- 120 سبز است
-240 آبی است

2- saturation یک مقدار درصدی است : 100% رنگ کامل است.
3- lightness هم یک درصد است : 0% تیره (سیاه) است و 100% سفید است.

مثال زیر رنگ های متفاوتی از HSL را نمایش می دهد.

مثال :

رنگ های HSL
#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */
مشاهده مثال

رنگ های HSLA

مقدار رنگ های HSLA فرمتی از HSL هستند با کانال آلفا که شفافیت رنگ را مشخص می کند. هر رنگ HSLA با hsla(hue, saturation, lightness, alpha) مشخص می شود.
مثال زیر رنگ های متفاوت HSLA را نمایش می دهد.

مثال :

رنگ های HSLA
#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */
مشاهده مثال

شفافیت

صفت opacity در css3 شفافیت کل یک عنصر را مشخص می کند. (هم رنگ پس زمینه و هم متن ممکن است شفاف یا مات شود)
مقدار صفت opacity باید عددی بین 0.0 (کاملا شفاف) و 1.0 (کاملا مات) باشد.
مثال زیر عناصر مختلف با شفافیت متفاوت را نشان می دهد. به شفاف یا مات بودن همزمان متن و رنگ زمینه توجه کنید.

مثال :

شفافیت
#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط