آموزش رنگ در CSS3 به زبان ساده

رتبه: 0 ار 0 رای sssss
رنگ
نویسنده: تیم تولید محتوا زمان مطالعه 2 دقیقه
Banner Image

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);

}

برچسب : سی اس اس
profile name
تیم تولید محتوا

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

مطالب پیشنهادی برای شما

محصولات مرتبط

مشاهده همه

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

1 2 3 4 5

0 نظر درباره «آموزش رنگ در CSS3 به زبان ساده»

    هنوز نظری برای این بخش ثبت نشده است
مشاهده همه نظرات
سبد خرید
سبد خرید شما خالی است
× جهت نصب روی دکمه زیر در گوشی کلیک نمائید
آی او اس
سپس در مرحله بعد برروی دکمه "Add To Home Screen" کلیک نمائید