سایه‌ها

سایه‌ها نقش مهمی را در نشان دادن عمق اشیاء دارند. آن‌ها تنها ابزار برای نمایش دادن میزان جدایی سطوح از همدیگر هستند. بلند شدن یک شئ، میزان سایه‌ی آن را مشخص می‌کند.

استفاده

شما به آسانی و با کمک کلاس‌های joqd elevate-0 تا joqd elevate-5، میزان بلند شدن یک شئ و مقدار سایه‌ی آن را مشخص کنید.

همچنین می‌توان با اضافه نمودن -hover به انتهای کلاس بلند شدن، میزان سایه را در حالت هاور متفاوت کرد.

این قسمت بلند نشده است (elevate-0)

این قسمت یک سطح بلند شده است (elevate-1)

این قسمت دو سطح بلند شده است (elevate-2)

این قسمت سه سطح بلند شده است (elevate-3)

این قسمت چهار سطح بلند شده است (elevate-4)

این قسمت پنج سطح بلند شده است (elevate-5)

<div class="joqd blue soft-corner elevate-0">
  <p>این قسمت بلند نشده است (<span lang="en">elevate-0</span>)</p>
</div>
<div class="joqd blue soft-corner elevate-1">
  <p>این قسمت یک سطح بلند شده است (<span lang="en">elevate-1</span>)</p>
</div>
<div class="joqd blue soft-corner elevate-2">
  <p>این قسمت دو سطح بلند شده است (<span lang="en">elevate-2</span>)</p>
</div>
<div class="joqd blue soft-corner elevate-3">
  <p>این قسمت سه سطح بلند شده است (<span lang="en">elevate-3</span>)</p>
</div>
<div class="joqd blue soft-corner elevate-4">
  <p>این قسمت چهار سطح بلند شده است (<span lang="en">elevate-4</span>)</p>
</div>
<div class="joqd blue soft-corner elevate-5">
  <p>این قسمت پنج سطح بلند شده است (<span lang="en">elevate-5</span>)</p>
</div>