آموزش کار با رنگ ها در CSS

حامد محمدیحامد محمدی
165 بازدید
آموزش کار با رنگ ها در CSS

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

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

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

در ادامه با ما همراه باشید.

 

دنیای رنگ ها در کامپیوتر

قبل از شروع مباحث استایل دهی در css باید بدانیم که رنگ ها در دنیای کامپیوتر چگونه مقداردهی و به سیستم معرفی می شوند.

 

رنگ ها در دنیای کامپیوتر با سه رنگ اصلی R قرمز(RED) و G سبز (GREEN) و B آبی (BLUE) مشخص می شوند. و باقی رنگ ها از ترکیب مقادیر متفاوتی از این رنگ ها با یکدیگر ایجاد می شوند. برای بیان رنگ ها در CSS معمولا نیاز به تعیین ۳ مولفه داریم که این ۳ مولفه همان مقادیر این سه رنگ اصلی هستند.(در مورد RGBبیشتر بدانیم)

برای معرفی یک رنگ و شدت و روشنایی آن در یک سیستم کامپیوتری روش های گوناگونی وجود دارد.برای مثال روش های  HEX-RGB-RGBA-HSL-HSLA

روش HEX

در این روش، سه رنگ اصلی گفته شده به مبنای ۱۶ تبدیل شده و مقدار دهی می شوند.

نکته: در این روش قبل از مقدار دهی به کد رنگ ها باید از علامت” # ” استفاده کنید.
[PHP]
div {
background-color:#b7dac9;
}
p {
color:#dad6e6;
}
[/PHP]

نکته: در این روش اگر شما به جای مقداردهی ۶حرفی، از مقداردهی ۳ حرفی استفاده کنید برای مرورگر به این معنی خواهد بود که سایر ارقام ذکر نشده نیز همان مقدار را می گیرند. مثال:

[php]
div {
/* ffffff */
background-color: #fff;
}
p {
/* ۳۳۳۳۳۳ */
color: #333;
}
[/php]

نکته: اشکال این روش، در این است که از فاکتور آلفا (alpha) برای تعیین میزان شفافیت (opacity) پشتیبانی نمی کند.

 

روش RGB

همانطور که در ابتدای توضیحات گفته شد، این روش از مقدار دهی به سه رنگ اصلی قرمز، سبز و آبی تشکیل می شود. اما این روش نیز مانند روش HEXاز فاکتور آلفا پشتیبانی نمی کند.

[PHP]
p {
color: rgb(99,141,200);
}
[/php]

نکته : در این روش اعداد، بدون تغییر مبنا، در بازه ای بین ۰ تا ۲۵۵ تعریف می شوند.

 

روش RGBA

این روش دقیقا مانند روش RGB است با این تفاوت که از فاکتور آلفا نیز پشتیبانی می کند.

[PHP]
P {
color: rgb(99,141,200,0.4);
}
[/PHP]

 

روش HSL و HSLA

این روش ها نیز دقیقا مانند روش RGBو RGBA مانند بکدیگر هستند که روش HSL بدون پشتیبانی از فاکتور آلفا و روش HSLA با اعمال فاکتور آلفا عمل مقداردهی را انجام می دهند.

پیشنهاد می شود به علت پیچیده بودن این روش، مطالعه بیشتری درباره آن داشته باشید.

[PHP]
H4 {
background-color: hsl(120, 100%, 25%);
}

H4{
background-color: hsla(120, 90%, 25%, 0.1);
}
[/PHP]

رنگ های از پیش تعریف شده در مرورگرها

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

برای مثال به جای FFF#  میتوانید از  نوشتن کلمه WHITE و به جای ۰۰۰# از کلمه BLACK استفاده کنید.

[PHP]
a{
color: blue;
border-color: black;
}

p{
color: yellow;
}

div {
color: green;
}
[/php]

 

میخواهم بیشتر بدانم.

دسته بندی آموزش css
اشتراک گذاری
راه حل صحیح موفقیت این است که اشتیاق شما به پیروزی بیشتر از ترس شما از شکست باشد.”انیشتین“

نوشته های مرتبط

دیدگاهتان را بنویسید

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

21+ محصولات
374+ سفارشات تکمیل شده
1860+ کاربران
396+ مطالب وبلاگ
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت