آموزش رنگ در 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);

}

نکات تکمیلی و مهم درباره رنگ‌ها در CSS3

• تفاوت کانال آلفا با ویژگی opacity: یکی از اشتباهات رایج مبتدیان، اشتباه گرفتن ویژگی opacity با مقادیر آلفا در rgba یا hsla است. وقتی از opacity: 0.5; برای یک عنصر (مثلاً یک div) استفاده می‌کنید، تمام محتویات داخل آن (شامل متن‌ها و تصاویر) هم شفاف و کم‌رنگ می‌شوند. اما وقتی از پس‌زمینه rgba(0,0,0,0.5) استفاده می‌کنید، فقط رنگ پس‌زمینه شفاف می‌شود و متن داخل آن کاملاً واضح باقی می‌ماند.

• کلمه کلیدی transparent: در CSS3، کلمه transparent به عنوان یک رنگ معتبر شناخته می‌شود که معادل rgba(0,0,0,0) (سیاه کاملاً شفاف) است. این کلمه کلیدی برای حذف رنگ پس‌زمینه یا ایجاد حاشیه‌های نامرئی (مثلاً در ساخت مثلث‌های CSS) بسیار کاربردی است.

• کلمه کلیدی currentColor: این یک متغیر جادویی در CSS است! مقدار currentColor رنگ خود را از ویژگی color (رنگ متن) همان عنصر یا عنصر پدرش به ارث می‌برد. از این ویژگی می‌توان برای هماهنگ کردن رنگ حاشیه (border)، سایه (box-shadow) یا آیکون‌های SVG با رنگ متن استفاده کرد.

• دسترسی‌پذیری (Accessibility) و کنتراست: هنگام استفاده از مقادیر آلفا (شفافیت) برای پس‌زمینه، مراقب خوانایی متن روی آن باشید. اگر پس‌زمینه نیمه‌شفاف روی یک تصویر شلوغ قرار بگیرد، ممکن است کنتراست رنگ متن و پس‌زمینه کاهش یابد و خواندن آن برای کاربران (به‌ویژه افراد کم‌بینا) دشوار شود.

• اضافه شدن آلفا به کدهای هگزادسیمال (Hex): اگرچه متن شما درباره توابع رنگی است، اما خوب است به مخاطب یادآوری کنید که در نسخه‌های مدرن‌تر CSS، امکان اضافه کردن شفافیت به کدهای Hex (هشت رقمی) نیز فراهم شده است (مانند #FF000080 که معادل قرمز با ۵۰٪ شفافیت است).