سایه ها، فیلترها و جلوه های بصری CSS | درس 47 + پروژه درس

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

چه جلوه ای را انتخاب کنیم؟

• box-shadow برای سایه کارت، دکمه یا سطحی که کادر مشخص دارد.
• filter: drop-shadow() برای سایه دور شکل قابل مشاهده آیکون یا تصویر شفاف.
• text-shadow برای سایه حروف، مثلا یک سایه ملایم روی تیتر.
• filter: grayscale() یا brightness() برای تغییر ظاهر تصویر بدون دست کاری فایل اصلی.

در درس کادر و سایه در CSS با تعریف اولیه سایه آشنا شدیم. اینجا هدف انتخاب ابزار مناسب برای شکل، رنگ و خوانایی است. اگر فقط می خواهید مرز یک کارت دیده شود، یک border ساده ممکن است کافی باشد.

سایه کارت با box-shadow

.card {
  border: 1px solid #acc6d6;
  border-radius: 1rem;
  box-shadow:
    0 2px 4px rgb(15 41 60 / 10%),
    0 12px 24px rgb(15 41 60 / 12%);
}

هر سایه ابتدا جابه جایی افقی، سپس جابه جایی عمودی و سپس شعاع محوشدگی دارد. در اینجا جابه جایی افقی صفر است و هر دو سایه به پایین می افتند. لایه اول کوچک و نزدیک به لبه است؛ لایه دوم پخش تر است. با کاما می توان چند سایه تعریف کرد. سایه ای که اول نوشته می شود روی سایه های بعدی قرار می گیرد.

مقدار اختیاری چهارم، گسترش سایه است. برای نمونه در 0 8px 20px -4px، عدد منفی شکل پایه سایه را جمع تر می کند. با inset سایه به داخل کادر می رود. وقتی کارت گوشه گرد دارد، سایه جعبه از همان گردی پیروی می کند. با این حال در یک تصویر PNG یا SVG شفاف، این رفتار به معنای دنبال کردن طرح داخل تصویر نیست.

سایه در محاسبه عرض و ارتفاع جعبه جا نمی گیرد. بنابراین اگر دو کارت خیلی نزدیک باشند، سایه ها می توانند روی هم بیفتند. برای فاصله واقعی از gap یا margin استفاده کنید و اگر سایه بریده شد، overflow والد را بررسی کنید. برای تفاوت کادر و فاصله، درس مدل جعبه CSS را مرور کنید.

drop-shadow: سایه روی شکل واقعی ستاره

.box {
  box-shadow: 0 8px 12px rgb(15 41 60 / 35%);
}
.shape {
  filter: drop-shadow(0 8px 6px rgb(15 41 60 / 45%));
}

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

عدد سوم در drop-shadow() انحراف معیار محوشدگی است و با شعاع blur در box-shadow معنای یکسانی ندارد. این تابع ورودی spread یا inset هم ندارد. عدد 45 درصد در مثال، آلفای رنگ سایه است؛ کم کردن آن سایه را شفاف تر می کند و به شفافیت خود ستاره دست نمی زند.

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

فیلتر تصویر بدون خاکستری شدن متن

.muted {
  filter: grayscale(100%);
}
.card img.preview {
  filter: grayscale(65%) brightness(1.08);
}

در پروژه کلاس muted روی تصویر سوم است، نه روی والد. grayscale(100%) رنگ ها را خاکستری می کند. در مثال دوم، مرورگر ابتدا خاکستری کردن و سپس افزایش روشنایی را اعمال می کند. ترتیب توابع مهم است؛ برای مثال اگر بعد از drop-shadow از grayscale استفاده کنید، رنگ سایه هم خاکستری می شود. اگر grayscale اول بیاید، سایه رنگی پس از آن ساخته می شود.

اگر دو بار در یک قاعده filter بنویسید، دو اعلان خود به خود با هم ترکیب نمی شوند. برای اعمال چند جلوه، توابع را در یک اعلان پشت سر هم قرار دهید. برای بازگشت به حالت اولیه می توانید مقدار none را استفاده کنید. برای تفاوت جلوه روی عنصر و ویژگی های تصویر زمینه، درس تصویر پس زمینه در CSS را ببینید.

سایه متن و خوانایی

.hero-title {
  color: #fff;
  text-shadow: 0 2px 6px rgb(0 0 0 / 35%);
}

این سایه دنبال شکل حروف می رود. روی تصویر شلوغ، سایه به تنهایی خوانایی متن را تضمین نمی کند؛ ابتدا رنگ متن و پس زمینه را درست انتخاب کنید و در صورت نیاز لایه تیره ای بین تصویر و متن بگذارید. سایه بزرگ روی پاراگراف های طولانی ممکن است لبه حروف را نامشخص کند. درس تایپوگرافی CSS را برای انتخاب اندازه و فاصله سطر مرور کنید.

فوکوس صفحه کلید و هزینه جلوه ها

سایه تزئینی کارت را با نشانگر فوکوس جایگزین نکنید. در پروژه، لینک با Tab یک outline نارنجی مستقل می گیرد. اگر فیلتر خاکستری وضعیت غیرفعال یک کنترل را نشان می دهد، وضعیت را در خود HTML و متن هم مشخص کنید. رنگ به تنهایی برای رساندن پیام کافی نیست. نمونه های تعامل در درس شبه کلاس های CSS آمده اند.

یک فیلتر با مقدار غیر از none می تواند زمینه پشته بندی جدید بسازد. اگر منوی بازشونده بعد از افزودن فیلتر پشت یک بخش افتاد، علاوه بر z-index به والد فیلترشده هم نگاه کنید. فیلترهای محو روی ناحیه بزرگ یا انیمیشن چند جلوه هم ممکن است روی دستگاه ضعیف هزینه داشته باشند. اول جلوه را به عنصر کوچک مورد نیاز محدود کنید و در دستگاه واقعی نتیجه را ببینید. روش آزمایش عرض های مختلف را در درس طراحی واکنش گرا دنبال کنید.

آزمایش عملی و عیب یابی

1. ZIP را استخراج و index.html را باز کنید. در دو کارت اول، سایه قاب و سایه شکل را مقایسه کنید.
2. در ابزار توسعه سایه کارت را خاموش کنید. سایه تصویر باید باقی بماند، چون روی عنصر دیگری تعریف شده است.
3. به تصویر کارت دوم موقتا پس زمینه سفید بدهید. ببینید چرا با کدر شدن کل سطح تصویر، سایه شکل دیگر فقط دور ستاره نیست. تغییر را برگردانید.
4. در کارت سوم مقدار grayscale را از 100 درصد به 30 درصد تغییر دهید. تیتر و متن کارت نباید تغییر رنگ دهند.
5. در عرض 320 و 768 پیکسل و بزرگ نمایی 200 درصد بررسی کنید که متن و کادرها بریده نشوند. با Tab به لینک تمرین بروید و نشانگر فوکوس را بررسی کنید.

تمرین: سایه ستاره را فقط در یک بخش تغییر دهید

برای تصویر داخل .practice سایه شکل بسازید: جابه جایی افقی صفر، عمودی 8px، انحراف معیار 6px و رنگ rgb(15 41 60 / 45%). معیار موفقیت این است که سایه لبه های ستاره را دنبال کند و سه کارت بالا تغییری نکنند. ابتدا خودتان در انتهای style.css قاعده را اضافه کنید. برای مقایسه، تغییر آزمایشی را بردارید و پاسخ مستقل را بعد از style.css در head بارگذاری کنید:

<link rel="stylesheet" href="solution.css">

اگر سایه دیده نشد، در ابزار توسعه بررسی کنید که انتخابگر فقط تصویر تمرین را گرفته باشد و اعلان filter خطای نحوی نداشته باشد. اگر سایه مستطیلی است، ابتدا box-shadow و پس زمینه کدر تصویر را بررسی کنید.

پرسش های متداول

آیا می توان سایه کارت و فیلتر تصویر را با هم داشت؟

بله. پروژه همین کار را انجام می دهد: box-shadow روی کارت و filter روی تصویر قرار دارد.

آیا سایه فضای کارت را بیشتر می کند؟

سایه ظاهر کارت را گسترش می دهد، ولی فضای چیدمان بیشتری نمی گیرد. فاصله اجزا را جداگانه تنظیم کنید.

آیا filter و backdrop-filter یک کار می کنند؟

خیر. filter روی خروجی رسم شده خود عنصر و محتوای آن اثر می گذارد؛ backdrop-filter روی محتوای پشت عنصر اثر دارد. برای دیده شدن اثر پشت، معمولا باید زمینه عنصر تا حدی شفاف باشد.

درس قبلی: توابع کاربردی CSS و ساخت اندازه های واکنش گرا

درس بعدی: انتقال ها و تعامل های ظریف با transition | درس 48