• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

4 1376 ۱۰ اردیبهشت ۹۴

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

css-colors

3. RGBA :

RGBA در واقع مقداری از RGB پیشرفته تر هست و با استفاده از اون میتونین رنگهای شفاف درست کنید. میتونین کارای جالبی با اون انجام بدین. یک مثال رو ببینید :

خروجی :

css-colors7

میبینید که برای رنگ اون متن یک رنگ شفاف انتخاب کردیم. سه مقدار اول که همون قرمز ، سبز و آبی رو مشخص میکنن و مقدار چهارم هم شفافیت ( Alpha ) رو مشخص میکنه. فرمت کلی بصورت زیر  هست :

مقدار شفافیت میتونه عددی بین 0 و یک باشه. اگر 0 بزارین یعنی ناپدید بشه و اگر 1 بزارین یعنی شفافیت نداشته باشه. برای مطالعه بیشتر در مورد RGBA میتونین به این لینک برید.

3. HSL :

مثال :

خروجی :

css-colors8

HSL مختصر کلمه های Hue و Saturation و Lightness هست.

قاعده کار با HSL کلا با قاعده RGB فرق داره. در RGB میومدیم و به میزانی که میخواستیم از رنگهای موجود با هم مخلوط میکردیم و رنگ مورد نظر بدست میومد. ولی در اینجا متفاوت هست و بیشتر به طبیعت و دور و اطراف ما نزدیک هست.

فرمت کلی بصورت زیر هست :

HUE همون رنگی هست که ما میبینیم. اگر همه رنگایی که میتونیم ببینیم و در محدوده مرئی هست رو جمع کنیم ، بصورت یک دایره در میاد، بنابراین میتونیم برای HUE عددی بین 0 تا 360 درجه رو قرار بدیم.

css-colors9

اگر در دایره بالا دقت کنید ، میبینید که قرمز در 0 درجه هست. سبز در 90 درجه و ارغوانی در 270 درجه.

با استفاده از saturation میتونین میزان اشباع بودن رنگ انتخابی رو تغییر بدین. برای این قسمت میتونین عددی بین 0 تا 100 درصد رو انتخاب کنید. هر چی به سمت 0 برید ، رنگتون مات تر میشه و هر چی بسمت 100 برید ، رنگتون براقتر و روشن تر میشه.

با استفاده از lightness هم میتونین میزان روشنایی و تاریکی رنگ رو مشخص کنید. مقدار این قسمت هم میتونه عددی بین 0 تا 100 درصد باشه. هر میزان که به 100 نزدیکتر باشه ، شفافتر و نورانی تر هست.

در واقع شما با استفاده از HUE رنگ مورد نظر رو انتخاب میکنید و با استفاده از lightness و saturation با اون بازی میکنید ، تا به رنگ دلخواه خودتون برسید.

حالا اگر بخوایم یک رنگ قرمز خالص درست کنیم ، بصورت زیر میشه :

css-colors10

خروجی بصورت زیر هست :

css-colors11

حالا برای درست کردن یک رنگ قرمز مات میتونین saturation رو کاهش بدین :

css-colors12

خروجی :

css-colors13

برای دزست کردن قرمز تیره ، میتونین lightness رو کم کنید :

css-colors14

خروجی :

css-colors15

 

جلسه بعد ادامه مطلب رو خدمتتون عرض میکنم.

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 4 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    علی امینی(۱۱ اردیبهشت ۱۳۹۴)

    سلام داداش
    ممنون از این مطلب مفیدت؛ تا حالا با hsl کار نکرده بودم. به نظرم اگه فرمت hsla رو هم به این مطلب اضافه میکردی بهتر بود.
    با تشکر

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram