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

- visibility ۰ mode_comment

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

سایه ها

Materialize تعدادی کلاس داره که میتونین با استفاده از اون به المنتهای مورد نظر سایه بدید و اونا بصورت کاغذ مانند و سه بعدی در بیارید.

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

  • z-depth-0 : با استفاده از این کلاس اون المنت سایه نخواهد داشت. این حالت بصورت پیش فرض به المنت اعمال میشه و المنت در حالت اولیه سایه ای ندارد.
  • z-depth-1 : این کلاس باعث میشه که به المنت مورد نظر یک سایه 1 پیکسلی اعمال بشه
  • z-depth-2 : این کلاس باعث میشه که به المنت مورد نظر یک سایه 2 پیکسلی اعمال بشه
  • z-depth-3 : این کلاس باعث میشه که به المنت مورد نظر یک سایه 3 پیکسلی اعمال بشه
  • z-depth-4 : این کلاس باعث میشه که به المنت مورد نظر یک سایه 4 پیکسلی اعمال بشه
  • z-depth-5 : این کلاس باعث میشه که به المنت مورد نظر یک سایه 5 پیکسلی اعمال بشه

برای مثال به کد زیر توجه کنید:

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

تایپوگرافی

Materialize از فونت Roboto 2 بعنوان فونت استاندارد خودش استفاده میکنه. شما میتونین اونو مطابق با نیاز خودتون تغییر بدین. برای اینکار میتونین بصورت زیر عمل کنید:

میبینید که در کدهای بالا فونت پیش فرض رو تغییر دادیم.

مثالها

Heading ها:

میبینید که در بالا عناوین رو قرار دادیم. خروجی بصورت زیر خواهد بود:heading

Block Quote:

خروجی بصورت زیر خواهد بود:blockquote

کلاس flow-text برای متون:

با استفاده از کلاس flow-text برای متون میتونین اونا رو واکنشگرا کنید و کاری کنید که در هر سایزی به خوبی نمایش داده بشن.

میبینید که در کد بالا به p مورد نظر کلاس flow-text اضافه شده.

خروجی:flow

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

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

یا علی

Source

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

نیاز به لاگین

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