فیلترها و افکت‌های گرافیکی در CSS

مقدمه

در این درس، با تعدادی از مهمترین افکت‌های بصری (visual effects) که می‌توان روی عناصر وب اعمال کرد، آشنا می‌شویم. ابتدا با پراپرتی filter آشنا شده و خواهیم دید که چطور می‌توانیم فیلترهای گرافیکی متنوعی را با استفاده از این پراپرتی روی عناصر اعمال کنیم. سپس، ایجاد گوشه‌های گِرد با استفاده از پراپرتی border-radius را یاد می‌گیریم و در نهایت، نحوه‌ی اعمال سایه روی عناصر با استفاده از پراپرتی‌های text-shadow و box-shadow را خواهیم دید.

اعمال فیلتر روی عناصر با پراپرتی filter

کمی با اسلایدرهای زیر بازی کنید و تأثیر اعمال فیلترهای مختلف روی تصویر زیر را ببینید.

blur

brightness

contrast

drop-shadow

grayscale

hue-rotate

invert

opacity

saturate

sepia

اعمال این فیلترهای بصری در گذشته تنها به کمک اپلیکیشن‌های گرافیکی مانند فتوشاپ ممکن بود. اما حالا به لطف ماژول Filter effects در CSS می‌توان این فیلترها را بدون نیاز به ابزارهای خارجی و به‌صورت دینامیک روی تصاویر و سایر عناصر وب اعمال کرد. ماژول Filter effects شامل پراپرتی filter و یک نوع داده‌ی جدید با نام <filter-function> است که امکان افزودن لفکت‌های گرافیکی بالا را فراهم می‌کند.

نوع فیلتر از روی مقدار پراپرتی filter تعیین می‌شود که می‌تواند هر یک از توابع زیر باشد.

ایجاد گوشه‌های گرد با پراپرتی border-radius

می‌دانیم که عناصر وب در CSS به صورت باکس‌های مستطیلی رندر می‌شوند. اگر بخواهیم گوشه‌های مستطیل را به جای زاویه‌ی 90 درجه‌ی پیش‌فرض به شکل گردتری نمایش دهیم، می‌توانیم از یک پراپرتی با نام border-radius استفاده کنیم.

در واقع، پراپرتی border-radius برای اعمال افکتی که در ترمینولوژی گرافیک کامپیوتری rounded corners نامیده می‌شود، کاربرد دارد. با استفاده از این افکت می‌توانیم ترتیبی دهیم که گوشه‌ها به صورت دایره‌ای یا بیضوی نمایش داده شوند. به مثال ساده‌ی زیر نگاه کنید.

CSS

.rounded-corner{
  background-color: red;
  border-radius: 10px;
  height: 5rem;
  width: 5rem;
}

اما عبارت radius (به معنی شعاع) در نام پراپرتی border-radius به چه معناست؟ در مثال بالا، شعاع 10px برای گوشه‌های عنصر چگونه تفسیر می‌شود؟

برای درک این موضوع، باید یک دایره با شعاع داده‌شده در هر گوشه در نظر بگیرید. هیچ توضیحی نمی‌تواند به‌اندازه‌ی تصویر زیر گویا باشد.

مثال بالا نحوه‌ی ایجاد گوشه‌های دایره‌ای را نشان می‌دهد. اما برای ایجاد گوشه‌های بیضوی، باید دو مقدار را به پراپرتی border-radius اختصاص دهیم که اولی معرف شعاع افقی و دومی شعاع عمودی بیضی است. این مقادیر را باید با اسلش (/) از هم جدا کنیم. مثال زیر را ببینید.

CSS

.rounded-corners{
  background-color: red;
  border-radius: 20px / 10px;
  height: 5rem;
  width: 5rem;
}

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

پراپرتی border-radius یک پراپرتی اختصاری است که همزمان چهار پراپرتی زیر را مقداردهی می‌کند:

• پراپرتی top-left-radius برای تنظیم میزان گردی گوشه‌ی بالا سمت چپ.
• پراپرتی top-right-radius برای تنظیم میزان گردی گوشه‌ی بالا سمت راست.
• پراپرتی bottom-right-radius برای تنظیم میزان گردی گوشه‌ی پایین سمت راست.
• پراپرتی bottom-left-radius برای تنظیم میزان گردی گوشه‌ی پایین سمت چپ.

در مثال‌های بالا، ما یک مقدار (دایره‌ای یا بیضوی) را به پراپرتی اختصاری border-radius داده‌ایم که همانطور که می‌دانید، به این معناست که این مقدار برای هر چهار گوشه در نظر گرفته شود. اما طبیعتاً می‌توانیم مانند مثال زیر، مقادیر متفاوتی را برای هر گوشه تعیین کنیم.

CSS

.rounded-corners{
  background-color: red;
  border-radus: 20pc 10px 5px 40px;
  height: 5rem;
  width: 5rem;
}

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

CSS

.rounded-corners{
  background-color: red;
  border-bottom-right-radius: 10px 20px;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 20px 10px;
  border-top-right-radius: 50%;
  height: 5rem;
  width: 5rem;
}

ایجاد تفکت سایه با پراپرتی box-shadow

یکی از افکت‌های دیگری که می‌توان روی باکس عناصر اعمال کرد، افکت سایه (shadow) است که با استفاده از یک پراپرتی با نام box-shadow ایجاد می‌شود. برای سایه باید یک رنگ و هر یک از چهار پارامتر زیر را تنظیم کرد:

• X offset یا فاصله‌ی افقی سایه از عنصر
• Y offset یا فاصله‌ی عمودی سایه از عنصر
• Blur radius یا شعاع محوشدگی که با رویکردی شبیه آنچه در مورد border-radius دیدیم، میزان محوشدگی (blurriness) سایه را تعیین می‌کند.
• Spread radius که میزان پخش‌شدگی سایه را مشخص می‌کند.

در حالت پیش‌فرض، میزان blur و spread برای سایه صفر است و تغییر آنها اختیاری است اما X offset و Y offset حتماً باید تعیین شوند.

CSS

.shadow{
  box-shadow: 5px 5px black;
  background: #CCCCCC;
  width: 10rem;
  height: 5rem;
}

می‌توانیم همانند مثال زیر، یک مقدار blur radius هم تعیین کنیم تا محو شدگی در سایه ایجاد شود.

CSS

.shadow{
  box-shadow: 5px 5px 10px black;
  background: #CCCCCC;
  width: 10rem;
  height: 5rem;
}

اگر همانند مثال زیر، مقداری را برای spread radius تعیین کنیم و مقدار blur را روی صفر قرار دهیم، سایز سایه در همه‌ی جهات افزایش می‌یابد.

CSS

.shadow{
  box-shadow: 5px 5px 0 5px black;
  background: #CCCCCC;
  width: 10rem;
  height: 5rem;
}

و بالاخره با اضافه کردن مجدد blur radius خواهیم داشت:

CSS

.shadow{
  box-shadow: 5px 5px 10px 5px black;
  background: #CCCCCC;
  width: 10rem;
  height: 5rem;
}

با استفاده از کلمه کلیدی inset می‌توانیم ترتیبی دهیم که سایه مانند مثال زیر، درون باکس اعمال شود.

CSS

.shadow{
  box-shadow: 0 0 25px black inset;
  background: #CCCCCC;
  width: 10rem;
  height: 5rem;
}

و بالاخره اینکه امکان اعمال بیش از یک سایه روی باکس وجود دارد. این کار می‌تواند مثلاً برای اعمال سایه‌های بیرونی و درونی به طور همزمان مفید باشد. کاری که در مثال زیر انجام شده است.

CSS

.shadow{
  box-shadow: 0 0 10px 0 black, 0 0 25px red inset;
  background: #CCCCCC;
  width: 10rem;
  height: 5rem;
}