میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

رنگ ها در CSS

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

کار با رنگ ها در CSS

بطور کلی ما چندین روش داریم که می توانیم از رنگ ها در طراحی وب استفاده نماییم ،

 

  • نام رنگ
  • RGB
  • HEX
  • HSL
  • RGBA
  • HSLA

 


نام رنگ

برای استفاده از نام رنگ ها در طراحی وب ، همونطور که از اسمش مشخص است ما باید از نام یک رنگ استفاده نماییم ، یعنی مثلا برای استفاده از رنگ آبی باید بنویسیم blue

Tomato

Orange

DodgerBlue

Gray

Violet

red

CSS / HTML از ۱۴۰ نام استاندارد رنگ پشتیبانی می کند.

 

 


کار با کد RGB رنگ ها

کد RGB یکی دیگر از روش های ایجاد رنگ برای عناصر در یک صفحه وب می باشد، همونطور که از اسم این روش مشخص است ما باید از ۳ رنگ اصلی R (Red) و G (Green) و B (Blue) استفاده نماییم.

پس کد RGB حالتی است که ۳ بخش اصلی دارد و هر یک از این بخش ها از ۰ تا ۲۵۵ میتونن مقدار دریافت کنند ، یعنی مثلا بخش RED میتونه مقدار ۱۰۰ باشه و بخش GREEN مقدار ۵ و بخش BLUE مثلا مقدار ۲۵۵ .

 

rgb(255, 255, 255)

پس رنگ ما از ترکیب ۳ مقدار بالا درست میشه، که به ترتیب بخش اول (r) میشه محدوده رنگ قرمز و بخش دوم (g) میشه محدوده رنگ سبز و در نهایت بخش سوم (b) میشه محدوده رنگ آبی.

 


کار با کد RGBA رنگ ها

کدرنگ RGBA در واقع همون کد RGB هست فقط یک مزیت دیگری که بهش اضافه شده که با استفاده از آن می توان میزان شفافیت رنگ را مشخص کرد.

شکل کلی کدرنگ RGBA بصورت زیر می باشد :

Red می شود همان محدوده رنگ قرمز که از ۰ تا ۲۵۵ میتواند مقدار بپذیرد و green هم که می شود سبز باز از ۰ تا ۲۵۵ و در نهایت blue هم که می شود آبی از ۰ تا ۲۵۵ میتونن مقدار داشته باشند.

حال یه بخش دیگه به اسم alpha (آلفا) به این کد رنگ اضافه شده که با استفاده از آن می توان میزان شفافیت / روشنایی را مشخص کرد ، که یک مقدار از ۰٫۰ تا ۱٫۰ می تواند بپذیرد، ( یعنی در واقع همون از ۰ تا ۱ )

 

 


کدهگزادسیمال HEX رنگ ها

کد هگزادسیمال یا به انگلیسی Hexadecimal و یا بطور خلاصه Hex به یک کد ۶ مقداری یا ۸ مقداری ( جدیدا ۸ مقداری هم میشه استفاده کرد ) که از ترکیب ۳ رنگ اصلی ( قرمز، سبز و آبی ) ایجاد شده است گفته می شود.

یعنی در واقع کد ۶ رقمی از ۳ بخش تشکیل می شود و هر بخش از ۲ مقدار که این مقدارها از ترکیب رنگ های قرمز و سبز و آبی بدست می آیند ، و کد ۸ رقمی نیز ۶ رقم اولش یک مقدار از ترکیب رنگ های قرمز و سبز و آبی می باشد و ۲ رقم آخر میزان شفافیت ( کانال آلفا یا Alpha ) رنگ را مشخص میکند.

کد هگزادسیمال ۶ رقمی

لطفا به شکل کلی یک کدهگزادسیمال ۶ رقمی توجه نمایید :

اول از هرچیز باید یک علامت شارپ یا # گذاشته سپس : RR یعنی محدوده رنگ (قرمز) – GG یعنی محدوده رنگ (سبز) و BB یعنی محدوده رنگ (آبی) که هر از این مقدارها میتوانند از ۰۰ تا FF باشند.

این کد هم می تواند عدد باشه و هم حرف ، یعنی عدد از ۰ تا ۹ و حرف از A تا F ، همچنین می توان از ترکیب عدد و حرف نیز استفاده کرد.

کد هگزادسیمال ۸ رقمی

این کد هم همون ۶ رقمی هست و در کل هیچ فرقی ندارند فقط در این حالت ۸ رقم باید مشخص کرد و ۲ رقم آخر میشه همون کانال آلفا ( برای تنظیم میزان شفافت ) که این کانال آلفا هم از AA تا FF یا از ۰۰ تا ۹۹ مقدار میگیره.

یعنی ۰۰ میزان شفافیت کامل می باشد ( کاملا شفاف ) و FF یعنی رنگ کاملا مات ( شفافیت ۰ ) می باشد.

شکل کلی یک کدهگزادسیمال ۸ رقمی :

اکثر مرورگرها از این روش ( ۸رقمی ) پشتیبانی نمی کنند و البته با وجود کد رنگ rgba اصلا نیاز نیست از این روش استفاده کنید، پس لطفا برای بهینه بودن و پشتیبانی همه مرورگرها، از کدرنگ rgba استفاده نمایید.

 


کار با کد HSL رنگ ها

کد HSL که در واقع خلاصه شده ی Hue و Saturation و Lightness می باشد، کدی است که با استفاده از آن می توان میزان اشباع و میزان شفافیت (روشنایی) / سبکی رنگ را ایجاد و یا مشخص کرد.

شکل کلی کدرنگ HSL بصورت زیر می باشد :

Hue : یک درجه که از ۰ تا ۳۶۰ میتونه مقدار داشته باشد – ۰ یعنی قرمز / ۱۲۰ یعنی سبز / ۲۴۰ یعنی آبی.

Saturation : میزان اشباع رنگ را بصورت درصدی (%) مشخص می کند ، ۰ درصد از خاکستری شروع میشه تا ۱۰۰ درصد رنگ کامل.

Lightness : میزان روشنایی رنگ را بصورت درصدی (%) مشخص می کند ،۰ درصد یعنی سیاه و هرچی به سمت ۱۰۰ درصد برود سفید می شود.

 


کار با کد HSLA رنگ ها

این کد رنگ هم دقیقا همون HSL می باشد که در بخش قبلی باهاش آشنا شدید، فقط در HSLA یک کانال جدید یا می توانیم بگویم یک حالت جدید بهش اضافه شده به اسم Alpha (آلفا) که با استفاده از آن می توان میزان شفافیت رنگ را مشخص کرد.

شکل کلی کدرنگ HSLA :


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

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

color csscolor در csscssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهرنگ ها در CSSساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسیکد رنگ ها در css
ارسال دیدگاه

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

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟