وباکا

آموزش تخصصی برنامه نویسی وب

متریالایز از چندین کلاس برای سایه دادن به اشیا استفاده می کند، در این جلسه لیست کلاس های سایه دهی متریالایز را آموزش داده و روش استفاده از کلاس ها را با ارائه یک مثال نشان می دهیم.

materialize دارای چندین کلاس می باشد که با استفاده از این کلاس ها می توان به برای کادر ها سایه ایجاد کرد.
نام کلاس  توضیحات
z-depth-0 سایه را از کادر مدنظر حذف میکند. بعضا برخی از کلاس ها بطور پیشفرض دارای سایه می باشد که این کلاس باعث حذف شدن آن سایه می شود.
z-depth-1 سایه به اندازه 1px ایجاد می کند. (سایه با border 1px ایجاد می کند.)
z-depth-2 سایه به اندازه 2px ایجاد می کند. (سایه با border 2px ایجاد می کند.)
z-depth-3 سایه به اندازه 3px ایجاد می کند. (سایه با border 3px ایجاد می کند.)
z-depth-4 سایه به اندازه 4px ایجاد می کند. (سایه با border 4px ایجاد می کند.)
z-depth-5 سایه به اندازه 5px ایجاد می کند. (سایه با border 5px ایجاد می کند.)

 

مثال

<!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>

مطالب مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

فهرست مطالب