این آموزش در تاریخ ۱۴۰۲/۰۶/۱۸ آپدیت شده است.
آموزش کار با رنگ ها یا Colors در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با رنگ ها یا Colors در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با رنگ ها یا Colors در HTML
آموزش رنگ ها و انواع روش استفاده از رنگ هارو حتما در بخش آموزش رنگ ها مشاهده نمایید، در این جلسه من بطور کامل همه ی روش هارو آموزش نمیدم، فقط میخوام بطور کلی با این روش ها آشنا شید.
ما از چندین روش میتونیم از رنگ ها در HTML و یا CSS استفاده نمایم که این روش هارو در ادامه مشاهده خواهید نمود :
- استفاده از نام رنگ
- استفاده از کد هگزادسیمال رنگ
- استفاده از مقدار RGB رنگ
- استفاده از مقدار HSL رنگ
- استفاده از رنگ های ترکیبی یا Gradient
Free-Learn
مقدار نام رنگ
در این روش همونطور که از اسمش هم پیداست ما باید از نام رنگ استفاده نماییم، مثلا اگر بخواهیم از رنگ قرمز و آبی استفاده نماییم باید نام این دو رنگ را بصورت red و blue وارد نماییم.
برای تولید رنگ سفید از نام white و برای تولید رنگ سیاه از نام black استفاده نمایید.
آموزش کاملتر این روش رو از اینجا مشاهده نمایید.
مثال شماره ۱ : استفاده از نام رنگ blue و green
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <p style="color:blue;"> Salam Khobi? </p> <p style="color:green;"> Site Amoozeshi Free-Learn </p> </body> |
Free-Learn
مقدار هگزادسیمال رنگ
در روش قبلی همانطور که مشاهده نمودید ما باید از نام رنگ ها استفاده میکردیم ولی در این روش ما دیگه لازم نیست از نام رنگ استفاده نماییم بلکه ما میتونیم از یک مقدار هگزادسیمال استفاده نماییم.
شکل کلی یک مقدار هگزادسیمال بصورت زیر می باشد :
|
1 |
#rrggbb |
همانطور که مشاهده مینمایید این کد از ۶ مقدار تشکیل می شود، اول از هرچیز باید یک علامت شارپ یا # گذاشته سپس : rr یعنی محدوده رنگ (قرمز) – gg یعنی محدوده رنگ (سبز) و bb یعنی محدوده رنگ (آبی) که هر از این مقدارها میتوانند از ۰۰ تا FF باشند.
برای تولید رنگ سفید از مقدار fff# و برای تولید رنگ سیاه از مقدار ۰۰۰# استفاده نمایید.
آموزش کاملتر این روش رو از اینجا مشاهده نمایید.
مثال شماره ۱
|
1 2 3 4 5 6 7 |
<body> <p style="background-color:#5046CD; color:#ffffff;"> Salam Khobi? </p> </body> |
Free-Learn
مقدار RGB رنگ
برای استفاده از این روش ما باید طبق شکل کلی یا فرمول زیر استفاده نماییم. لطفا به شکل کلی یک مقدار RGB توجه نمایید.
|
1 |
rgb(red,green,blue) |
همانطور که مشاهده مینمایید این مقدار از ۳ بخش تشکیل می شود: red (محدوده رنگ قرمز) – green (محدوده رنگ سبز) و blue (محدوده رنگ آبی) که هر کدام از این بخش ها میتوانند از ۰ تا ۲۵۵ مقدار بگیرند.
برای تولید رنگ سفید باید تمام بخش ها مقدار ۲۵۵ و برای تولید رنگ سیاه تمام بخش ها مقدار ۰ بگیرند.
آموزش کاملتر این روش رو از اینجا مشاهده نمایید.
مثال شماره ۱
|
1 2 3 4 5 6 7 |
<body> <p style="background-color:rgb(195,4,36); color:rgb(255,255,255);"> Salam Khobi? </p> </body> |
Free-Learn
مقدار HSL رنگ
کد HSL که از کلمات Hue و Saturation و Lightness گرفته شده، کدی است که با استفاده از آن میتوان میزان اشباع و میزان شفافیت (روشنایی) / سبکی رنگ را ایجاد و یا مشخص کرد.
- Hue : یک درجه که از ۰ تا ۳۶۰ میتونه مقدار داشته باشه – ۰ یعنی قرمز / ۱۲۰ یعنی سبز / ۲۴۰ یعنی آبی.
- Saturation : میزان اشباع رنگ را بصورت درصدی (%) مشخص میکند ، ۰ درصد از خاکستری شروع میشه تا ۱۰۰ درصد رنگ کامل.
- Lightness : میزان روشنایی رنگ را بصورت درصدی (%) مشخص میکند ،۰ درصد یعنی سیاه و هرچی به سمت ۱۰۰ درصد برود سفید می شود.
آموزش کاملتر این روش رو از اینجا مشاهده نمایید.
مثال شماره ۱ : استفاده از کد رنگ HSL
|
1 2 3 4 5 |
<body> <p style="background-color: hsl(140, 50%, 50%); color: hsl(0, 0%, 100%);">Free-Learn</p> </body> |
Free-Learn
رنگ های ترکیبی یا Gradient
عملا میشه گفت با استفاده از این روش میتوان از چندین رنگ درون یک باکس بصورت همزمان و ترکیبی استفاده کرد، یعنی مثلا سمت راست یک باکس رو آبی کنیم و وسطش رو قرمز و سمت چپش رو سبز و یا حتی میشه رنگ های بیشتری رو استفاده کنیم.
آموزش کاملتر این روش رو از اینجا مشاهده نمایید.
مثال شماره ۱ : استفاده از روش خطی
|
1 2 3 4 5 6 7 8 |
<style> div{ background-image:linear-gradient(to right,red,blue); height:70px; } </style> |
مثال شماره ۲ : استفاده از روش دایره ای
|
1 2 3 4 5 6 7 8 9 |
<style> div{ background-image: radial-gradient(red, yellow, green); width:180px; height:180px; } </style> |
