آموزش CSSآموزش طراحی سایت

جلسه ۱۳ – تعیین رنگ با استفاده از مقادیر ()rgba و ()hsla

تعیین رنگ با روش های فرعی rgba‌ و hsla

منظور از تابع Rgba در رنگ ها چیست؟ منظور از تابع hsla در رنگ ها چیست؟‌ تفاوت rgba و hsla با Rgb و hsl چیست؟ منظور از alpha چیست؟ در این مقاله با توابع rgba و hsla آشنا می‌شویم.

آشنایی با تابع RGBA و HSLA در رنگ ها

در این جلسه می‌رسیم به دو روش فرعی. این دو روش هر دو از توابع RGB و HSL استفاده می­‌کنن که در مقاله آشنایی با توابع RGB و HSL باهاشون آشنا شدیم، با این تفاوت که به هر دوی این توابع یک حرف a هم اضافه شده که مخفف کلمه­‌ی alpha به معنای شفافیت یا وضوح هست. کاربرد این کلمه، کم و زیاد کردن شفافیت یک رنگ هست می‌تواند شفافیت را حداکثر یا حداقل کند.

بازه تغییرات alpha به دو شکل می­‌تونه نشون داده بشه:

  • از 0 تا 1
  • از 0% تا 100%

برای درک بهتر، به مثال های زیر از هر دو تابع توجه کنید:

رنگ آبی با alpha برابر ۰.۳ با hsla
رنگ آبی با alpha برابر ۰.۳ با hsla
رنگ آبی با alpha برابر ۰.۹ با hsla
رنگ آبی با alpha برابر ۰.۹ با hsla
رنگ آبی با alpha برابر ۰.۳ با rgba
رنگ آبی با alpha برابر ۰.۳ با rgba
رنگ آبی با alpha برابر ۰.۹ با rgba
رنگ آبی با alpha برابر ۰.۹ با rgba

در CSS شفافیت نه تنها رنگ‌ها بلکه عناصر با ویژگی‌ای به نام opacity تنظیم میشه، استفاده از توابع rgba و hsla که چندی پیش معرفی شد می­‌تونه کار ما رو به شدت سبک و راحت کنه که در آموزش­‌های آینده بیشتر به اون‌ها خواهیم پرداخت تا اهمیت این دسته از ویژگی ها را نیز بیشتر درک کنید.

نتیجه‌گیری

  • رنگ‌ها در CSS توسط چهار روش اصلی و دو روش فرعی تنظیم می‌شن.
  • روش‌های اصلی عبارتند از رنگ‌های پیش‌فرض، کدهای رنگی یا Hex، تابع ()rgb و ()hsl
  • روش­‌های فرعی عبارتند از تابع ()rgba و ()hsla که توانایی تغییر شفافیت رنگ رو هم دارند.

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین و ما هم در اولین فرصت به اون جواب میدیم.

 

مدیر محتوا: علی اسمعیلی‌ / متخصص و برنامه نویس

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر