سایه ها

پادکست CSS - 017: Shadows

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

CSS دارای ویژگی های box-shadow و text-shadow است، اما تصویر متنی نیست، بنابراین نمی توانید text-shadow استفاده کنید. اگر box-shadow استفاده می کنید، سایه روی جعبه اطراف است نه دور تی شرت.

خوشبختانه، گزینه دیگری وجود دارد: فیلتر drop-shadow() . این به شما امکان می دهد دقیقاً آنچه را که طراح خواسته است انجام دهید. گزینه های زیادی در مورد سایه ها در CSS وجود دارد که هر کدام برای موارد استفاده متفاوت طراحی شده اند.

سایه جعبه

ویژگی box-shadow برای افزودن سایه به کادر یک عنصر HTML است. روی عناصر بلوک و عناصر درون خطی کار می کند.

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

ترتیب مقادیر برای box-shadow به شرح زیر است:

1. آفست افقی : یک عدد مثبت آن را از سمت چپ و یک عدد منفی آن را از سمت راست بیرون می راند.
2. افست عمودی : یک عدد مثبت آن را از بالا به پایین هل می دهد و یک عدد منفی آن را از پایین به بالا می راند.
3. شعاع تاری : یک عدد بزرگتر سایه تارتری ایجاد می کند، در حالی که تعداد کوچک سایه واضح تری ایجاد می کند.
4. شعاع گسترش (اختیاری): یک عدد بزرگتر اندازه سایه را افزایش می دهد و یک عدد کوچکتر آن را کاهش می دهد و اگر روی 0 تنظیم شود، اندازه آن با شعاع تاری برابر می شود.
5. رنگ : هر مقدار رنگ معتبر . اگر این تعریف نشده باشد، رنگ متن محاسبه شده استفاده خواهد شد.

برای اینکه سایه باکس به جای سایه بیرونی پیش‌فرض، سایه درونی باشد، یک کلمه کلیدی inset را قبل از خصوصیات دیگر اضافه کنید.

/* Outer shadow */
.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

/* Inner shadow */
.my-element {
    box-shadow: inset 5px 5px 20px 5px #000;
}

سایه های متعدد

با box-shadow می توانید هر تعداد سایه که دوست دارید اضافه کنید. برای رسیدن به این هدف، مجموعه ای از مجموعه های ارزش جدا شده با کاما اضافه کنید:

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

ویژگی های موثر بر جعبه سایه

افزودن border-radius به جعبه شما نیز بر شکل سایه جعبه تأثیر می گذارد. این به این دلیل است که CSS بر اساس شکل جعبه سایه ای ایجاد می کند که گویی نور به سمت آن نشانه می رود.

.my-element {
  box-shadow: 0px 0px 20px 5px darkslateblue;
  border-radius: 25px;
}

اگر جعبه شما با box-shadow در ظرفی است که دارای overflow: hidden ، سایه نیز از آن سرریز خارج نمی‌شود .

<div class="my-parent">
  <div class="my-shadow">My shadow is hidden by my parent.</div>
</div>

.my-parent,
.my-shadow {
  width: 250px;
  height: 250px;
}

.my-shadow {
  box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
  overflow: hidden;
}

سایه متن

ویژگی text-shadow بسیار شبیه به ویژگی box-shadow است. فقط روی گره های متنی کار می کند.

.my-element {
  text-shadow: 3px 3px 3px hotpink;
}

مقادیر text-shadow مانند box-shadow و به همان ترتیب است. تنها تفاوت این است که text-shadow هیچ ارزش spread و inset ای ندارد.

وقتی یک box-shadow اضافه می کنید، به شکل کادر شما بریده می شود، اما text-shadow هیچ برشی ندارد. به این معنی که اگر متن شما کاملاً یا نیمه شفاف باشد، سایه از طریق آن قابل مشاهده است.

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

سایه های متعدد

شما می توانید هر تعداد سایه که دوست دارید با text-shadow اضافه کنید، همانطور که با box-shadow . مجموعه‌ای از مجموعه‌های ارزش جدا شده با کاما اضافه کنید و می‌توانید جلوه‌های متنی بسیار جالبی مانند متن سه بعدی ایجاد کنید.

.my-element {
  text-shadow: 1px 1px 0px white,
    2px 2px 0px firebrick;
  color: darkslategray;
}

رها کردن سایه

برای دستیابی به سایه ای که از هر منحنی بالقوه تصویر پیروی می کند، از فیلتر drop-shadow CSS استفاده کنید. این سایه روی یک ماسک آلفا اعمال می شود که آن را برای افزودن سایه به یک تصویر برش بسیار مفید می کند، همانطور که در مقدمه این ماژول وجود دارد.

.my-image {
  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}

فیلتر drop-shadow همان مقادیر box-shadow را دارد اما کلمه کلیدی inset و مقدار spread مجاز نیستند. با افزودن چندین نمونه از مقادیر drop-shadow به ویژگی filter ، می‌توانید هر تعداد سایه که دوست دارید اضافه کنید. هر سایه از آخرین سایه به عنوان نقطه مرجع تعیین موقعیت استفاده می کند.

درک خود را بررسی کنید

دانش خود را در مورد سایه ها آزمایش کنید