آموزش رنگ در CSS3 به زبان ساده
CSS3 چندین روش جدید برای تعریف مقادیر رنگ ارائه می دهد.
تعریف رنگ ها در CSS3
در بخش های قبلی یاد گرفتید که چگونه با استفاده از کلمات کلیدی رنگ و مقادیر RGB، رنگ ها را تعریف کنید. علاوه بر آنها 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);
}
