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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 367 ۳۰ فروردین ۹۵

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram