میدانیم که تعیین رنگ ها در CSS به وسیله ترکیب رنگ های RGB (قرمز ، سبز ، آبی) یا کدهای هگزا دسیمال صورت میگیرد. در CSS3 قابلیت جدیدی به نام RGBA وجود دارد که با استفاده از آن می توانید علاوه بر تعیین رنگ ها مقدار Alpha یا شفافیت شئ را نیز تغییر دهید. در این آموزش قصد دارم تا نحوه کار با RGBA را به صورت مختصر آموزش بدهم.

در تصویر زیر می توانید ساختار کد و همینطور توضیحات مربوط به هر بخش را مشاهده کنید.

۳ بخش اول کد که کاملا مشخص هستند! رنگهای قرمز، سبز و آبی… اما قسمت چهارم یا Alpha میزان شفافیت شئ مورد نظر را تعیین میکند.

شاید با خود بگویید که Opacity هم میتوانید کار Alpha را انجام دهد! بگذارید با یک مثال فرق این دو را مشخص کنیم.

اینجا ما یک تگ H1 با رنگ زمینه و پس زمینه داریم .

h1{
color :  rgb(0, 0, 0);
background :  rgb(255, 255, 255);
}

ابتدا با Opacity شفافیت را تغییر میدهیم.

h1{
color :  rgb(0, 0, 0);
background :  rgb(255, 255, 255);
opacity: 0.5;
}

مشاهده میکنید که هم متن تحت تاثیر قرار گرفته است و هم پس زمینه سفیدی که پشت متن قرار دارد . در واقع کل محتویات تگ H1 تحت تاثیر Opacity قرار گرفته است.

اما RGBA نتیجه متفاوتی را به ما میدهد. یعنی ما میتوانیم تنها یک عنصر را تحت تاثیر قرار دهیم.

h1{
color :  rgb(0, 0, 0);
background :  rgba(255, 255, 255, 0.5);
}

و همینطور میتوانیم فقط متن را تحت تاثیر قرار دهیم.

h1{
color: rgba(0, 0, 0 , 0.5);
background: rgb(255, 255, 255);
}

بسیار خب. حالا کمی بیشتر با RGBA بازی میکنیم!

میتوانیم با RGBA طراحی خودمان را بدون استفاده از هیچ عکسی گرافیکی تر و تمیزتر نشان دهیم.

میخواهیم کاری کنیم که در حالت عادی جعبه و نوشته ما کم رنگ و زمانی که اشاره گر روی آن ها قرار میگیرد جعبه و متن پر رنگ شوند.

h3{
color: rgba(255, 255, 255, 0.8);
background-color: rgba(142, 213, 87, 0.3);
}
h3:hover{
color: rgba(255, 255, 255, 1);
background-color: rgba(142, 213, 87, 0.6);
}

و این هم نمونه دیگری که فقط Border به آن اضافه شده است.

h2{
color: rgb(221, 51, 51);
background-color: rgba(255, 255, 255 , 0.3);
border: solid 7px rgb(38, 171, 195);
}

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