آموزش طراحی وب

رنگ ها در CSS

در این جلسه ی آموزشی راجع به رنگ ها و انواع کدهای رنگ Hexadecimal , RGB , RGBA , HSl , HSLA صحبت می کنیم .

CSS

فصل دوم : مرجع  CSS

جلسه دوم  : رنگ ها در CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

در این جلسه ی کوتاه آموزشی در رابطه با رنگ ها صحبت می کنیم .

برای نمایش رنگ ها در css از متدهای زیر استفاده می کنیم :

  • Hexadecimal colors
  • RGB colors
  • RGBA colors
  • HSL colors
  • HSLA colors
  • color names

Hexadecimal Colors : رنگ های هگزادسیمال در تمامی مرورگرها پشتیبانی میشه . این کد رنگ از رنگ های مکمل #RRGGBB تشکیل میشه . RR رنگ قرمز Red – GG رنگ سبز Green – BB رنگ آبی  Blue و بصورت زیر استفاده میشه :

RGB Color : رنگ های RGB در تمامی مرورگرها پشتیبانی میشه . کد رنگ RGB هم از رنگ های مکمل تشکیل میشه و بصورت rgb(red, green, blue) نمایش داده میشه و بصورت زیر استفاده میشه :

RGBA Color : رنگ های RGBA در مرورگرهای   IE9+, Firefox 3+, Chrome, Safari, Opera 10+ پشتیبانی میشه . این رنگ ها شبیه به رنگ های RGB هستند با این تفاوت که در این رنگ ها شما می تونید میزان شفافیت (Opacity) رنگ رو تعیین کنید . نحوه ی نوشتن این کد رنگ بصورت زیر هست :

 برای تغییر میزان شفافیت عدد ۰.۳ رو میتونید تنظیم کنید . هرچقدر عدد ۳ بیشتر بشه شفافیت بیشتر میشه و هرچقدر که کمتر بشه شفافیت هم کمتر میشه .

HSL Color : رنگ های HSL در مرورگرهای IE9+, Firefox, Chrome, Safari, Opera 10+ پشتیبانی میشه . این رنگ زمانی بکار میره که شما بخواین با یک رنگ بازی کنید و اون رنگ رو کمرنگ و پرنگ کنید . قاعده نوشتن این کدها بصورت hsl(hue, saturation, lightness) هست.

HUE یک درجه رنگی روی چرخه ی رنگه که از ۰ تا ۳۶۰ قابل تنظیمه .  عدد ۰ یا ۳۶۰ نشان دهنده رنگ قرمزه ، عدد ۱۲۰ نشان دهنده رنگ سبزه ، عدد ۲۴۰  هم نشان دهنده رنگ آبی هست .

Saturation بصورت درصدی تعیین میشه و هاله ای از رنگ خاکستری به رنگ اصلی اضافه می کنه . هرچه عدد این درصد کمتر باشه رنگ خاکستری بیشتری با رنگ اصلی ترکیب میشه و رنگ رو تیره تر و مایل به خاکستری میکنه .

Lightness بصورت درصدی تعیین میشه و رنگ رو متمایل به رنگ مشکی و یا سفید میکنه . هرچه این عدد کمتر باشه رنگ تیره تر میشه و به رنگ مشکی متمایل میشه و هرچه این عدد بیشتر باشه رنگ سفید بیشتری با رنگ اصلی ترکیب میشه و رنگ رو روشن میکنه .

نحوه ی استفاده از این کد بصورت زیر هست :

HSLA Color : دقیقا شبیه به رنگ های HSL عمل می کنند با این تفاوت که میتونید میزان شفافیت رنگ هارو تنظیم کنید . این کد بصورت زیر نوشته میشه :

Color Name : شما میتونید علاوه بر کدهای رنگی از نام استاندارد رنگ ها هم استفاده کنید .

نحوه بدست آوردن کد رنگ ها

حالا شاید این سوال براتون پیش بیاد که چطور میتونیم این همه کد رو بخاطر بسپاریم یا چطور میتونیم کد رنگ مورد نظرمون رو بدست بیاریم ؟

خوب ابزارها کدنویسی رو خیلی برامون راحت کردن . برای اینکار افزونه Rainbow فایرفاکس رو نصب کنید . پس از نصب این افزونه ، با مراجعه به گزینه picker میتونید رنگ مورد نظرتون رو انتخاب کنید و کد رنگ رو کپی کنید .

برای تبدیل کد رنگ هگزادسیمال به رنگ های RGB هم میتونید از سایت http://hex2rgba.devoth.com استفاده کنید .

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

خوب دوستان این جلسه ی آموزشی هم به اتمام رسید ، امیدوارم مفید واقع شده باشه .

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

۱ دیدگاه

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین