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

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

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

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

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1">      
	  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>             
	   <style>
	     div {
		    width : 200px;	
			height : 200px;				
		 } 
	  </style>
   </head>
   <body class="container"> 
      <h2>Materialize Shadow Examples</h2>
      <hr/>
	  <div class="card-panel">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class="z-depth-1">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
	  <div class="z-depth-2">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
	  <div class="z-depth-3">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
	  <div class="z-depth-4">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
	  <div class="z-depth-5">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>	  
   </body>
</html>

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

تایپوگرافی

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

html {
   font-family: GillSans, Calibri, Trebuchet, sans-serif;
}

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

مثالها

Heading ها:

<div class="card-panel">
 <h1>Heading 1</h1>
 <h2>Heading 2</h2>
 <h3>Heading 3</h3>
 <h4>Heading 4</h4>
 <h5>Heading 5</h5>
 <h6>Heading 6</h6>
</div>

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

Block Quote:

<div class="card-panel">
 <blockquote>
  The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.
 </blockquote>
</div>

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

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

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

 <div class="card-panel">
  <p class="flow-text">
  The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.
 </p>
</div>

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

خروجی:flow

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

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

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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