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

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



  آیا می دانید تا کنون 6339 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

آموزش طراحی متریال با Materialize (جلسه 3) - رنگها

0 429 ۲۵ فروردین ۹۵

در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم.getting-started-materialize-css-framework

رنگ ها

در این جلسه قصد دارم در مورد رنگ ها در این ابزار براتون توضیح بدم. Materialize یک مجموعه قوی از رنگها رو درون خودش قرار داده. این موارد بصورت کلاس در اومدن و هر جا که از اونا استفاده کنید، به المنت مورد نظر اعمال خواهند شد. این رنگها رنگهای پرکاربرد و معروفی هستند.

لیست رنگها:

  • red
  • pink
  • purple
  • deep-purple
  • indigo
  • blue
  • light-blue
  • cyan
  • teal
  • green
  • light-green
  • lime
  • yellow
  • amber
  • orange
  • deep-orange
  • brown
  • grey
  • blue-grey
  • black
  • white
  • transparent

این رنگها، از مدل اسم خاص هستند و اگر این کلاس ها رو به المنت مورد نظرتون اعمال کنید، رنگشون به همین صورت تغییر میکنه. در پایین هم یک سری کلاس که برای روشن کردن و تیره کردن رنگ های بالایی مورد استفاده قرار میگیرن رو میزارم:

  • lighten-1
  • lighten-2
  • lighten-3
  • lighten-4
  • lighten-5
  • darken-1
  • darken-2
  • darken-3
  • darken-4
  • accent-1
  • accent-2
  • accent-3
  • accent-4

مثلا در لیست بالا 5 درجه روشنی و 4 درجه تیرگی قرار داده شده و اگر به همراه کلاسهای رنگ مورد استفاده قرار بگیره، اونا رو روشنتر یا تیره تر میکنن.

مواردی که در بالا قرار داده شد، همه مربوط به رنگ پس زمینه یا Background المنت میباشند، اگر بخواید رنگ متن رو تغییر بدین باید یک کلمه text هم به اونا اضافه کنید.

برای مثال کد بالا رنگ پس زمینه رو تغییر میده و خروجی بصورت زیر خواهد بود:1

حالا اگر بخوایم با رنگ متن بازی کنیم، باید بصورت زیر عمل کنیم:

میبینید که به همراه کلاس های گذشته کلمه text هم آورده شده است. خروجی:2

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

خروجی موارد بالا بصورت زیر خواهد بود:3

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

موفق و پیروز باشید

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram