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

materialize دارای چندین کلاس می باشد که با استفاده از این کلاس ها می توان به برای کادر ها سایه ایجاد کرد.
نام کلاس  توضیحات
z-depth-0 سایه را از کادر مدنظر حذف میکند. بعضا برخی از کلاس ها بطور پیشفرض دارای سایه می باشد که این کلاس باعث حذف شدن آن سایه می شود.
z-depth-1 سایه به اندازه ۱px ایجاد می کند. (سایه با border 1px ایجاد می کند.)
z-depth-2 سایه به اندازه ۲px ایجاد می کند. (سایه با border 2px ایجاد می کند.)
z-depth-3 سایه به اندازه ۳px ایجاد می کند. (سایه با border 3px ایجاد می کند.)
z-depth-4 سایه به اندازه ۴px ایجاد می کند. (سایه با border 4px ایجاد می کند.)
z-depth-5 سایه به اندازه ۵px ایجاد می کند. (سایه با 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>

برچسب ها

, , , , ,

محصولات پیشنهادی


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


نظرات برای آموزش چارچوب متریالایز | بدون نظر »

کاربر عزیز، لطفاً دیدگاه ارزشمند خود را از طریق فرم زیر برای ما ارسال کنید:

درباره کدنویسان
آکادمی کدنویسان جهت کمک به دانشجویان رشته های کامپیوتر و فناوری اطلاعات و همه علاقمندان به طراحی و برنامه نویسی برای ویندوز، وب و موبایل ایجاد شده است.
بیشتر آموزش های سایت کدنویسان، بصورت رایگان ارائه شده است و بعضی بسته های آموزشی تصویری و نیز نرم افزارهای پیاده سازی شده در ازای پرداخت، قابل دانلود هستند.
هر گونه نظر، انتقاد یا پیشنهادی در مورد مطالب یا عملکرد کدنویسان دارید، حتما با ما در میان بگذارید.
نمادهای اعتماد ما


تماس با ما
  • شماره همراه : ۰۹۱۵۱۶۰۴۰۶۸
  • آی دی تلگرام : @mmoha94
  • پست الکترونیکی : mohammadi.sm@gmail.com
  • آدرس پستی : بیرجند، خیابان پیروزی، پیروزی ۹، پلاک ۲۸
کلیه حقوق متعلق به سایت کدنویسان است، انتشار و کپی برداری از مطالب این سایت غیرمجاز بوده و پیگرد قانونی دارد.