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

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

دسته بندی موضوعات
سفارش تبلیغات

رنگ ها در CSS

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 قبلا یک جلسه آموزشی به رنگ ها اختصاص دادم که میتونید مطالعه کنید . در این جلسه ی آموزشی جدول کاملی از نام رنگ ها و کدهای هگزادسیمال طیف های رنگی لحاظ شده که میتونید استفاده کنید . جهت مشاهده این جلسه آموزشی کلیک کنید .

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

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

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟