این آموزش در تاریخ ۱۴۰۲/۰۶/۲۱ آپدیت شده است.
آموزش کامل کار با رنگ ها در طراحی وب
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کامل کار با رنگ ها در طراحی وب با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با رنگ ها در طراحی وب
رنگ یا به انگلیسی Color ، مهمترین و جذاب ترین چیزی است که در طراحی وب با استفاده از آن میتوان به عناصر / تگ های موجود در یک صفحه از نظر ظاهری جلوه و زیبایی داد.
در این بخش میخواهیم یاد بگیریم که چگونه از رنگ ها میتوان در زبان های طراحی وب مثه HTML و CSS و.. استفاده کرد، و همچنین میخواهیم با انواع رنگ ها و نحوه استفاده از آنها آشنا شویم.
بطور کلی برای استفاده از رنگ ها میتونیم از روش های زیر استفاده کنیم :
- استفاده از نام رنگ
- استفاده از کد هگزادسیمال رنگ
- استفاده از کد RGB رنگ
- استفاده از کد HSL رنگ
- استفاده از رنگ Gradient
در این بخش بصورت کوتاه با این روش ها آشنا خواهید شد ولی ان شاالله در بخش های بعدی بطور کامل روش های بالا رو آموزش خواهم داد.
Free-Learn
استفاده از نام رنگ
همونطور که مشخصه در این روش ما باید از نام رنگ استفاده کنیم ، یعنی اگر بخواهیم از رنگ آبی استفاده کنیم خب باید اسمشو بصورت انگلیسی بنویسیم. به همین راحتی !
مثال : استفاده از نام رنگ ( مثلا رنگ آبی میشه blue )
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <p style="background-color:red; color:white;"> Salam Khobi? </p> <p style="background-color:blue; color:white;"> Site Amoozeshi Free-Learn </p> </body> |
فقط چیزی که در این روش هست، محدودیت نام رنگ هاست ، یعنی خب من بخوام از رنگ آبی یا قرمز یا سبز استفاده کنم خب خیلی راحت اسمشو بصورت blue,red,green مینویسیم.
ولی خب ما ممکنه نام یک رنگ رو نتونیم حفظ کنیم و یا ممکنه اصلا مرورگر از اون نام رنگ ما پشتیبانی نکنه ، پس در این مواقع ما میتونیم از روش هگزادسیمال استفاده کنیم.
چون تو روش هگزادسیمال دیگه لازم نیست ما نام یک رنگ رو بنویسیم فقط کافیه از یه کد ۶ رقمی استفاده کنیم.
Free-Learn
استفاده از کد هگزادسیمال رنگ
همونطور که گفتم در این روش ما باید از یک کد ۶ رقمی (میتونه عدد باشه) یا حرفی (میتونه حرف انگلیسی باشه) استفاده کنیم، این کد رو بهش میگیم مقدار هگزادسیمال .
|
1 |
#rrggbb |
همانطور که مشاهده مینمایید این کد از ۶ مقدار تشکیل می شود، اول از هرچیز باید یک علامت شارپ یا # گذاشته سپس : rr یعنی محدوده رنگ (قرمز) – gg یعنی محدوده رنگ (سبز) و bb یعنی محدوده رنگ (آبی) که هر از این مقدارها میتوانند از ۰۰ تا FF باشند.
مثال : استفاده از کد هگزادسیمال
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <p style="background-color:#6AC239; color:#fff;"> Salam Khobi? </p> <p style="background-color:#9C27B0; color:#fff;"> Site Amoozeshi Free-Learn </p> </body> |
Free-Learn
استفاده از کد RGB رنگ
یکی دیگر از روش های استفاده از رنگ ها در طراحی وب استفاده از کد RGB هست، یک کد که از ۳ بخش تشکیل می شود:
|
1 |
rgb(red,green,blue) |
همانطور که مشاهده مینمایید این مقدار از ۳ بخش تشکیل می شود: red (محدوده رنگ قرمز) – green (محدوده رنگ سبز) و blue (محدوده رنگ آبی) که هر کدام از این بخش ها میتوانند از ۰ تا ۲۵۵ مقدار بگیرند.
مثال :
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <p style="background-color:rgb(255, 84, 14);"> Salam Khobi </p> <p style="background-color:rgb(254, 251, 87);"> Man Sadegh Hastam </p> </body> |
Free-Learn
استفاده از کد HSL رنگ
کد HSL که در واقع خلاصه شده ی Hue و Saturation و Lightness می باشد، کدی است که با استفاده از آن میتوان میزان اشباع و میزان شفافیت (روشنایی) / سبکی رنگ را ایجاد و یا مشخص کرد.
شکل کلی کدرنگ HSL بصورت زیر می باشد :
|
1 |
hsl(hue, saturation, lightness) |
Hue : یک درجه که از ۰ تا ۳۶۰ میتونه مقدار داشته باشه – ۰ یعنی قرمز / ۱۲۰ یعنی سبز / ۲۴۰ یعنی آبی.
Saturation : میزان اشباع رنگ را بصورت درصدی (%) مشخص میکند ، ۰ درصد از خاکستری شروع میشه تا ۱۰۰ درصد رنگ کامل.
Lightness : میزان روشنایی رنگ را بصورت درصدی (%) مشخص میکند ،۰ درصد یعنی سیاه و هرچی به سمت ۱۰۰ درصد برود سفید می شود.
|
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
رنگ گریدینت یا به انگلیسی Gradient رنگی است که از ترکیب چندین رنگ دیگر بدست می آید، یعنی مثلا با استفاده از این رنگ همانند مثال زیر میتونیم یک باکس رو از سمت چپ به راست همزمان هم قرمز و هم آبی کرد.
|
1 2 3 4 5 6 7 8 |
<style> div{ background-image:linear-gradient(to right,red,blue); height:70px; } </style> |
خب دوستان به پایان این بخش ( آموزش کامل کار با رنگ ها در طراحی وب ) رسیدیم ، لطفا در ادامه و در بخش های بعدی همچنان با من همراه باشید تا با چیزهای جدیدتر از رنگ ها آشنا شوید.
