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

دسته بندی: آموزش
زمان مطالعه: 2 دقیقه
۲۵ فروردین ۱۳۹۵

در این جلسه با ادامه موضوع مربوط به طراحی متریال با 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 هم به اونا اضافه کنید.

<div class="card-panel red lighten-2">		 
    <h1>Red Colored Theme</h1>
 </div>

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

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

<span class="red-text text-darken-2">
	<h2>Red Colored Text</h2>
</span>

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

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

<ul>          
	<li class="red lighten-5"><p>Using red lighten-5</p></li>
	<li class="red lighten-4"><p>Using red lighten-4</p></li>
	<li class="red lighten-3"><p>Using red lighten-3</p></li>
	<li class="red lighten-2"><p>Using red lighten-2</p></li>
	<li class="red lighten-1"><p>Using red lighten-1</p></li>
	<li class="red"><p>Using red</p></li>
	<li class="red darken-1"><p>Using red darken-1</p></li>
	<li class="red darken-2"><p>Using red darken-2</p></li>
	<li class="red darken-3"><p>Using red darken-3</p></li>
	<li class="red darken-4"><p>Using red darken-4</p></li>
	<li class="red accent-1"><p>Using red accent-1</p></li>
	<li class="red accent-2"><p>Using red accent-2</p></li>
	<li class="red accent-3"><p>Using red accent-3</p></li>
	<li class="red accent-4"><p>Using red accent-4</p></li>
</ul>

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

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

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

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

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