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

در سی‌اس‌اس با استفاده از ویژگی box-shadow میتوان برای یک عنصر سایه بوجود آورد. اما همانطور که می‌دانیم این ویژگی تنها یک رنگ به عنوان رنگ سایه می‌پذیرد:

box-shadow: 0 0 5px 5px red;

حال فرض کنید تصویری داشته باشیم و بخواهیم سایه اطراف آن را به صورت زیر در بیاوریم، یعنی سایه ما چند رنگ داشته باشد:

همانطور که مشاهده می‌کنید رنگ سایه اطراف تصویر متناسب به رنگ تصویر در همان محدوده است.

منبع

ایده این کار از ابزاری به نام cosha گرفته شده است که می‌توانید پروژه این ابزار را روی گیتهاب نیز مشاهده کنید. این ابزار از جاوااسکریپت برای پیاده سازی این سایه استفاده می‌کند که در این مطلب ما نحوه پیاده سازی آن را تنها با استفاده از سی‌اس‌اس بررسی می‌کنیم.

شرح

برای انجام این کار کافی است یک کپی از تصویر مورد نظر را پشت آن قرار دهیم و به تصویر عقب فیلتر blur بدهیم (می‌توانید از این ابزار برای بازی با فیلترها استفاده کنید). اگر تا الان با فیلترها کار کرده باشید می‌دانید زمانی که به عنصری فیلتر مات شدن داده می‌شود یک هاله متناسب با رنگ همان عنصر در اطرافش بوجود می‌آید که این هاله همان سایه رنگارنگ مورد نظر ما خواهد بود، ویدیو زیر این ترفند را شرح می‌دهد:

پیاده سازی

ابزاری که معرفی شد برای ساخت این ترفند از دو عنصر تصویر (<img>) در HTML استفاده ‌می‌کند اما ما در اینجا فقط قصد استفاده از یک عنصر تصویر را داریم در نتیجه HTML مورد نظر بصورت زیر خواهد بود:

<figure>
  <img src="picture.jpg" alt="" />
</figure>

برای اینکه بتوانیم کپی تصویر را پشت سر آن قرار دهیم، باید نگهدارنده ای با position از نوع relative داشته باشیم و همچنین باید به کپی تصویر، position از نوع absolute بدهیم.

حال کپی تصویر را به چه عنصری بدهیم؟ از آنجایی که از نظر محتوایی نیازی به این عنصر کپی نیست و فقط جنبه ظاهری دارد (یعنی به درد موتورهای جستجو و ربات‌های دیگر نمی‌خورد) می‌توانیم آن را به شبه عنصر after نگهداره بدهیم:

figure {
  position: relative;
}
figure::after {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-image: url('picture.jpg');
  background-size: 100%;
}

از z-index منفی هم برای قرار دادن شبه‌عنصر در پشت عنصر اصلی استفاده می‌کنیم.

در نهایت کافی است که فیلتر مات را اعمال کنیم، همچنین اگر می‌خواهیم سایه، رنگ بیشتری به خود بگیرد می‌توانیم کمی از فیلتر saturate هم استفاده کنیم:

figure::after {
  filter: blur(15px) saturate(2);
}

نکته آخر اینکه همیشه مقدار ویژگی background-size شبه عنصر را برابر با مقدار ویژگی object-fit تگ <img>  قرار دهید.

دمو

See the Pen
Colorful shadows by Mojtaba Seyedi (@seyedi)
on CodePen.