سیر تا پیاز رنگها ( color ) در CSS ( قسمت آخر )

- visibility ۲ mode_comment

در این مطلب میخوام مطلب قبلی رو ادامه بدم.

css-colors

5. HSLA :

بهمون صورت که RGBA هست ، HSLA هم وجود داره که خاصیت Alpha یا شفافیت رو به HSL اضافه کرده. مانند گذشته شفافیت میتونه مقداری بین 0 و یک داشته باشه. فرمت کلی :

مثال :

خروجی :

css-colors16

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

6. کلمه های کلیدی مربوط به رنگ :

مثال :

خروجی :

css-colors17

بجای استفاده از rgb و ... میتونین از نام خاصی که به رنگها داده شده استفاده کنید. CSS تعداد 16 رنگ ساده رو نامگذاری کرده و میتونیم از اونا استفاده کنیم :

css-colors18

با گذشت زمان و آمدن CSS های 2 و 3 تعداد این نام رنگها بیشتر و بیشتر شد. از نامهای زیر هم میتونین استفاده کنید :

css-colors19

کلمه کلیدی Transparent :

این کلمه یک راه ساده برای مشخص کردن رنگی هست که شفافیت یا opacity اون برابر با 0 باشه. یعنی رنگ مورد نظر نامرئی میشه و نمیشه اون رو دید. مثال :

کلمه کلیدی currentColor :

این کلمه برای راحتی و سهولت بوجود اومده و معنی اون اینه که مقدار رنگ مورد نظر ، همون رنگی هست که به ویژگی color نسبت داده شده است. بزارید یک مثال بزنم :

میبینید که رنگ blue رو در 4 جا تکرار کردیم. بجای اینکار میتونیم یکبار blue رو در مقابل color استفاده کرد و بجای بقیه رنگهای از کلمه کلیدی currentColor استفاده کرد. بصورت زیر :

اگه خروجی رو نگاه کنید ، نتایج یکسان و یکی هستن. مزیت اینکار اینه که ، اگر بعدا خواستید رنگ رو عوض کنید ، لازم نیس که برید و 4 تا رنگ رو عوض کنید ، با تغییر مقدار color ، بقیه هم متناسب با اون عوض میشن.

خب دوستان خسته نباشید.

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

موفق باشید. یا علی

comment دیدگاه کاربران
maxsoft

دمت گرم با این کلمه currentColor تا حالا کار نکرده بودم ایده خیلی جالبی بود خیلی از کدنویسی رو راحت تر میکنه
ممنون ازت

محمد اسفندیاری

موفق باشید داداش

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.