]-->lang="fa-IR"> آموزش رنگ در CSS3 | مرکز درس

آموزش رنگ در CSS3

CSS3 چندین روش جدید برای تعریف مقادیر رنگ ارائه می دهد.

تعریف رنگ ها در CSS3

علاوه بر آنها CSS3 چندین نماد کاربردی جدید برای تنظیم مقادیر رنگ برای عناصر اضافه می کند که شامل()rgba() ، hsl و ()hsla هستند.

در بخش زیر در مورد این مدل های رنگ یکی یکی بحث خواهیم کرد.

مقادیر رنگ RGBA

رنگ ها را می توان در مدل RGBA (قرمز- سبز- آبی- آلفا) با استفاده از نماد کاربردی ()rgba تعریف کرد. مدل رنگ RGBA فرمت مدل رنگ RGB با ورودی آلفا است – که میزان تیرگی یک رنگ را مشخص می کند.

پارامتر آلفا مقداری از ۰٫۰ (کاملاً شفاف) تا ۱٫۰ (کاملاً مات) را می پذیرد.

مثال

h1 {

color: rgba(0,0,255,0.5);

}

p {

background-color: rgba(0%,0%,100%,0.3);

}

مقادیر رنگ HSL

همچنین می توان رنگ ها را با استفاده از نماد کاربردی ()hsl براساس مدل HSL مخفف hue-saturation-lightness (رنگ- شدت- روشنایی) تعریف کرد. رنگ به عنوان زاویه ای (از ۰ تا ۳۶۰) از چرخه یا دایره رنگ (طیفی از رنگ ها که در یک دایره نمایش داده می شود) نشان داده می شود. زاویه به طور معمول با درجه اندازه گیری می شود که در CSS واحد ضمنی است.

میزان شدت (یا اشباع) و روشنایی (یا درخشندگی) با درصد نشان داده می شوند. اشباع ۱۰۰٪ به معنی رنگ کامل و ۰٪ سایه خاکستری است. در حالی که روشنایی ۱۰۰٪ سفید است، روشنایی ۰٪ سیاه و ۵۰٪ طبیعی است. مثال زیر را ببینید:

بیشتر بخوانید :   سبک جدیدی از جواهرات

مثال

h1 {

color: hsl(360,70%,60%);

}

p {

background-color: hsl(480,50%,80%);

}

نکته: با تعریف ۰ = ۳۶۰= قرمز و رنگهای دیگر در دور تا دور دایره پخش می شوند، بنابراین ۱۲۰ = سبز ، ۲۴۰ = آبی و … . به عنوان زاویه، به طور ضمنی دور آن قرار می گیرند، مانند ۱۲۰ = ۴۸۰ ، ۲۴۰= ۱۲۰- و … .

مقادیر رنگ HSLA

رنگ ها را می توان در مدل HSLA (رنگ- شدت- روشنایی- آلفا) با استفاده از نماد کاربردی ()hsla تعریف کرد. مدل رنگ HSLA قالب مدل رنگ HSL با ورودی آلفا است – که میزان تیرگی یک رنگ را مشخص می کند.

پارامتر آلفا مقداری از ۰٫۰ (کاملاً شفاف) تا ۱٫۰ (کاملاً مات) را می پذیرد.

مثال

h1 {

color: hsla(360,80%,50%,0.5);

}

p {

background-color: hsla(480,60%,30%,0.3);

}

ساسان سروشه

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

دیدگاه‌ها

*
*