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

آشنایی با فیلترهای CSS

فیلترهای CSS راهی برای اعمال جلوه های بصری بر روی عناصر یک صفحه وب ارائه می دهند. این افکت‌ها می‌توانند از تنظیمات ساده مانند تغییر روشنایی یا کنتراست تصویر تا تبدیل‌های پیچیده‌تر مانند تار کردن یا اضافه کردن رنگ قهوه‌ای متغیر باشند.

بیایید به تحلیل برخی از فیلترهای CSS رایج بپردازیم و تحلیل کنیم که چگونه می توانند جذابیت بصری محتوای وب شما را افزایش دهند.

1. مقیاس خاکستری

فیلتر grayscale() رنگ ها را به سایه های خاکستری تبدیل می کند و به تصاویر شما ظاهری تک رنگ و کلاسیک می دهد. می توانید شدت اثر را با تعیین درصد کنترل کنید:

 < div class = " image-container " > < img src = " image.jpg " alt = " Grayscale Filtered Image " > </ div >

 .image-container { width : 300 px ; filter : grayscale ( 100 % ) ; } .image-container img { width : 100 % ; }

با گفت ن filter: grayscale() به کانتینر <div> ، به مرورگر دستور می‌دهیم که یک افکت خاکستری را روی تمام محتوای داخل این ظرف، از جمله تصویر اعمال کند. در نتیجه، تصویر نمایش داده شده در داخل ظرف به جای رنگ های اصلی، در سایه های خاکستری ظاهر می شود.

با قرار دادن ویژگی filter بر روی grayscale(100%) ، نشان می دهیم که قصد داریم تصویر را با شدت کامل به مقیاس خاکستری تبدیل کنیم.

2. تاری

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

 .image-container { filter : blur ( 5 px ) ; }

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

با تنظیم blur(5px) ، نشان می‌دهیم که می‌خواهیم یک افکت تاری با شعاع تاری پنج پیکسل روی تصویر اعمال کنیم.

3. کنتراست

فیلتر contrast() تفاوت بین نواحی روشن و تاریک یک عنصر را افزایش یا کاهش می دهد و از نظر بصری چشمگیرتر می شود:

 .image-container { filter : contrast ( 150 % ) ; }

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

با تنظیم آن بر روی contrast(150%) ، نشان می‌دهیم که می‌خواهیم کنتراست تصویر را تا 150% افزایش دهیم.

4. روشنایی

فیلتر brightness() روشنایی کلی یک عنصر را کنترل می کند. افزایش روشنایی می‌تواند رنگ‌ها را زنده‌تر کند، در حالی که کاهش آن می‌تواند جلوه‌ای ضعیف یا تیره ایجاد کند:

 .image-container { filter : brightness ( 120 % ) ; }

در اینجا، تصویر داخل ظرف دارای روشنایی کلی آن تنظیم می شود.

با تنظیم آن بر روی brightness(120%) ، نشان می دهیم که قصد داریم روشنایی تصویر را 20٪ افزایش دهیم.

5. سپیا

فیلتر sepia() رنگی گرم و قهوه‌ای به یک عنصر می‌دهد و حسی نوستالژیک یا قدیمی را القا می‌کند:

 .image-container { filter : sepia ( 80 % ) ; }

در اینجا، تصویر رنگی گرم و قهوه ای خواهد داشت که یادآور عکس های قدیمی است. تنظیم آن بر روی sepia(80%) نشان می دهد که قصد داریم افکت sepia را با شدت 80% روی تصویر اعمال کنیم. تنظیم مقدار درصد به ما این امکان را می دهد که قدرت افکت سپیا اعمال شده روی تصویر را کنترل کنیم.

ترکیبات فیلتر CSS

یکی از نقاط قوت فیلترهای CSS در ترکیب پذیری آنها نهفته است. ما می توانیم چندین فیلتر را برای دستیابی به جلوه های بصری پیچیده اعمال کنیم:

 .image-container { filter : grayscale ( 30 % ) blur ( 3 px ) contrast ( 150 % ) ; }

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

فیلتر grayscale(30%) رنگ های عنصر را با شدت 30% به سایه های خاکستری تبدیل می کند.

فیلتر blur(3px) یک جلوه تاری به عنصر با شعاع تاری سه پیکسل اضافه می کند.

فیلتر contrast(150%) کنتراست عنصر را تا 150% افزایش می دهد.

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

در این مثال، این عنصر دارای یک جلوه ظریف خاکستری، تاری جزئی و افزایش کنتراست خواهد بود که در نتیجه ظاهری منحصر به فرد و هنرمندانه ایجاد می کند.

اما صبر کنید، چیزهای بیشتری وجود دارد

فیلترهای CSS بیشتری وجود دارد که می توانید با آنها آزمایش کنید، از جمله drop-shadow() , hue-rotate() , invert() , opacity() و saturate() . همچنین یک ویژگی backdrop-filter وجود دارد که یک پس‌زمینه نیمه شفاف را با تصویر پس‌زمینه پشت آن ترکیب می‌کند.

می توانید در مورد این ویژگی ها در MDN اطلاعات بیشتری کسب کنید.

استفاده از قدرت حالت های ترکیبی CSS

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

1. ضرب کنید

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

 .element { mix-blend-mode : multiply ; }

با mix-blend-mode: multiply; با تنظیم روی همه دایره ها، نواحی همپوشانی دایره ها نتیجه حالت ترکیبی ضرب را نشان می دهند و در محل تلاقی دایره ها ترکیب تیره تری ایجاد می کنند. رنگ‌های منحصربه‌فرد هر دایره همچنان قابل مشاهده خواهند بود، اما به دلیل چند برابر شدن مقادیر رنگ، قسمت‌های مشترک رنگ تیره‌تری به خود می‌گیرند.

2. صفحه نمایش

حالت ترکیبی screen در CSS تعیین می کند که چگونه رنگ یک عنصر با رنگ عناصر زیرین آن ترکیب می شود. به طور خاص رنگ های لایه بالایی را روشن می کند و ترکیب روشن تری ایجاد می کند.

نحوه عملکرد حالت ترکیبی screen به شرح زیر است:

محاسبه رنگ:

برای هر پیکسل در لایه بالایی، مقادیر RGB (قرمز، سبز، آبی) معکوس می شوند.

سپس مقادیر رنگ معکوس با مقادیر RGB مربوطه در لایه پایین ضرب می شوند.

نتیجه:

نتیجه ترکیبی است که در آن نواحی مشترک لایه‌ها سبک‌تر می‌شوند و جلوه‌ای درخشان ایجاد می‌کنند.

هرچه رنگ در لایه بالایی اشباع تر باشد، اثر شدیدتر است.

 .element { mix-blend-mode : screen ; }

3. روکش

حالت ترکیبی overlay در CSS هر دو حالت multiply و ترکیب screen را با هم ترکیب می‌کند، که منجر به یک جلوه بصری غنی و متضاد می‌شود. در اینجا توضیحی درباره نحوه عملکرد حالت ترکیبی overlay آورده شده است:

محاسبه رنگ:

اگر رنگ لایه پایین (B) روشن تر از 0.5 باشد، نتیجه با استفاده از فرمول 2 * B * T محاسبه می شود، که در آن B رنگ لایه پایین و T رنگ لایه بالایی است.

اگر رنگ لایه زیرین برابر یا تیره تر از 0.5 باشد، نتیجه با استفاده از فرمول 1 - 2 * (1 - B) * (1 - T) محاسبه می شود.

نتیجه:

حالت ترکیبی همپوشانی اثر تیره شدن حالت multiply برای رنگ‌های تیره و جلوه روشن‌کننده حالت screen برای رنگ‌های روشن را ترکیب می‌کند.

نتیجه ترکیبی است که کنتراست و اشباع را افزایش می دهد. نواحی تاریک تیره‌تر می‌شوند و نواحی روشن روشن‌تر می‌شوند و جلوه‌ای چشمگیر ایجاد می‌کنند.

 .element { mix-blend-mode : overlay ; }

با mix-blend-mode: overlay; ویژگی تنظیم شده روی همه دایره ها، نواحی همپوشانی دایره ها نتیجه حالت ترکیبی همپوشانی را نشان خواهند داد. حالت ترکیبی همپوشانی ترکیبی از حالت های multiply و ترکیب screen را ایجاد می کند که در نتیجه ظاهری غنی و متضاد ایجاد می کند. مناطق مشترک ترکیبی از جلوه های تیره و روشن کننده را نشان می دهند و ترکیبی از نظر بصری جالب و پر جنب و جوش را ایجاد می کنند. رنگ‌های منحصربه‌فرد هر دایره همچنان قابل مشاهده است، اما مناطق مشترک رنگ متضادی به خود می‌گیرند.

4. تفاوت

حالت ترکیبی difference تفاوت مطلق بین مقادیر رنگ لایه های بالا و پایین را برای هر پیکسل محاسبه می کند. با تأکید بر تفاوت‌های رنگی بین عناصر همپوشانی، جلوه‌ای با کنتراست بالا ایجاد می‌کند. در اینجا نحوه عملکرد حالت ترکیبی difference آورده شده است:

محاسبه رنگ:

برای هر پیکسل در لایه بالایی، تفاوت مطلق بین مقادیر RGB (قرمز، سبز، آبی) لایه های بالا و پایین محاسبه می شود.

نتیجه نشان دهنده تفاوت رنگ بین دو لایه است.

نتیجه:

مناطقی که رنگ ها مشابه یا یکسان هستند، رنگ های تیره تری تولید می کنند.

مناطقی که رنگ ها متفاوت است، رنگ های روشن تری تولید می کنند.

اگر رنگ ها یکسان باشند، نتیجه سیاه خواهد شد (مقادیر RGB 0).

 .element { mix-blend-mode : difference ; }

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

5. طرد

حالت ترکیب exclusion اثری شبیه به حالت ترکیب difference ایجاد می‌کند، اما تمایل دارد نتایج نرم‌تر و متضاد کمتری ایجاد کند. معمولاً برای ترکیب رنگ‌های عناصر همپوشانی به‌گونه‌ای استفاده می‌شود که هم رنگ‌های مشابه و هم رنگ‌های مختلف به ظاهر نهایی کمک کنند. در اینجا توضیحی در مورد نحوه عملکرد حالت ترکیب exclusion ارائه شده است:

محاسبه رنگ:

برای هر پیکسل در لایه بالایی، فرمول B + T - 2 * B * T اعمال می شود که B مقدار رنگ لایه پایین و T مقدار رنگ لایه بالایی است.

نتیجه ترکیبی از تفاوت بین مقادیر رنگ دو لایه را نشان می دهد.

نتیجه:

مناطقی که رنگ ها مشابه یا یکسان هستند ظاهری تیره خواهند داشت.

مناطقی که رنگ ها متفاوت است، به جای کنتراست شدیدی که در حالت ترکیب difference دیده می شود، جلوه ای ترکیبی و نرم ایجاد می کنند.

این افکت ظریف‌تر است و اغلب برای ایجاد ترکیبی هماهنگ از رنگ‌ها استفاده می‌شود.

 .element { mix-blend-mode : exclusion ; }

گزینه های ترکیبی بیشتر

بسیاری از گزینه‌های ترکیبی دیگر وجود دارد که می‌توانیم با آنها آزمایش کنیم، از جمله darken ، lighten ، color-burn color-dodge ، رنگ‌سوزی، hard-light ، soft-light ، hue ، saturation ، color ، luminosity ، plus-darker و plus-lighter .

می توانید درباره نحوه کار آنها بر روی MDN اطلاعات بیشتری کسب کنید.

چند ملاحظات

همیشه برخی از کاربران نهایی وجود خواهند داشت که فیلترهای CSS و حالت های ترکیبی ممکن است برای آنها مشکل ایجاد کند. بیایید به چند نمونه نگاه کنیم.

پشتیبانی از مرورگر

پشتیبانی از فیلترهای CSS و حالت‌های ترکیبی گسترده است، اما برای اینکه کاملاً مطمئن شوید که کاربران نهایی شما نتیجه رضایت‌بخشی خواهند داشت، ممکن است یک بازگشت را در نظر بگیرید. مثلا:

 @supports not ( filter : grayscale ( 100 % ) ) { .fallback-element { } }

دسترسی

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

تضاد رنگ . اطمینان حاصل کنید که کنتراست کافی بین رنگ‌های متن و پس‌زمینه وجود دارد، مخصوصاً هنگام اعمال فیلترها یا حالت‌های ترکیبی. کنتراست کم می تواند خواندن متن را برای کاربرانی که دارای اختلالات بینایی هستند دشوار کند. طرح‌های خود را با استفاده از ابزارهایی که انواع مختلف کوررنگی را شبیه‌سازی می‌کنند آزمایش کنید تا از خوانایی برای کاربرانی که کمبود دید رنگی دارند اطمینان حاصل کنید.

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

متن جایگزین متن جایگزین برای تصاویر و گرافیک‌هایی که ممکن است تحت تأثیر فیلترها یا حالت‌های ترکیبی قرار گیرند، ارائه دهید. خوانندگان صفحه برای توصیف محتوا برای کاربرانی که دارای اختلال بینایی هستند به متن جایگزین متکی هستند.

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

طراحی تعاملی . اطمینان حاصل کنید که طراحی شما واکنش گرا است و در دستگاه ها و اندازه های مختلف صفحه نمایش به خوبی کار می کند. فیلترها یا حالت‌های ترکیبی که روی صفحه‌نمایش‌های بزرگ‌تر کار می‌کنند ممکن است به اندازه کافی مؤثر نباشند یا ممکن است باعث ایجاد مشکلاتی در صفحه‌های کوچکتر شوند.

ناوبری صفحه کلید . اطمینان حاصل کنید که همه عناصر تعاملی از طریق پیمایش صفحه کلید در دسترس و قابل استفاده باقی می مانند. کاربرانی که به ورودی صفحه‌کلید یا فناوری‌های کمکی متکی هستند، باید بتوانند به صورت یکپارچه با محتوای شما پیمایش کرده و با آن تعامل داشته باشند.

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

افزایش پیشرونده . یک رویکرد طراحی را اجرا کنید که از اصل ارتقاء تدریجی پیروی می کند. اطمینان حاصل کنید که محتوای اصلی و عملکرد قابل دسترسی است حتی اگر فیلترها یا حالت های ترکیبی پشتیبانی یا غیرفعال نشده باشند.

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

مشکلات رایج در استفاده از فیلترهای CSS و حالت های ترکیبی

در اینجا برخی از خطاهای مکرری که ممکن است توسعه دهندگان با آنها مواجه شوند و نحوه اجتناب از آنها آورده شده است.

اشتباه 1: استفاده بیش از حد از فیلترها

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

مثال:

 .overused-element { filter : grayscale ( 50 % ) blur ( 5 px ) contrast ( 150 % ) brightness ( 120 % ) sepia ( 80 % ) ; }

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

اشتباه 2: نادیده گرفتن سازگاری مرورگر

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

 .element { -webkit-filter : blur ( 5 px ) ; -moz-filter : blur ( 5 px ) ; -o-filter : blur ( 5 px ) ; filter : blur ( 5 px ) ; }

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

اشتباه 3: استفاده از فیلترها بر روی عناصر تعاملی

اعمال فیلترها بر روی عناصر تعاملی، مانند دکمه ها یا پیوندها، بدون در نظر گرفتن تعاملات کاربر، می تواند منجر به تجربه کاربری کمتر بصری و گیج کننده شود.

مثال:

 .button-with-filter { filter : grayscale ( 50 % ) ; }

فیلترها می توانند ظاهر عناصر تعاملی را تغییر دهند و به طور بالقوه بر درک کاربران از هدف آنها تأثیر بگذارند. اطمینان حاصل کنید که فیلترها وضوح و قابلیت استفاده عناصر تعاملی را به خطر نمی اندازند.

اشتباه 4: نادیده گرفتن تأثیر عملکرد

استفاده از فیلترهای پیچیده یا ترکیبی از فیلترها می تواند تأثیری بر عملکرد، به ویژه در دستگاه ها یا مرورگرهای قدیمی داشته باشد. نادیده گرفتن ملاحظات عملکرد ممکن است منجر به کندی زمان بارگذاری صفحه شود.

مثال:

 .performance-heavy-element { filter : blur ( 10 px ) contrast ( 200 % ) ; }

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

نتیجه

فیلترهای CSS و حالت‌های ترکیبی به توسعه‌دهندگان وب این امکان را می‌دهد تا مرزهای خلاقیت را پشت سر بگذارند و به ایجاد رابط‌های کاربری بصری جذاب و پویا اجازه دهند.

با درک و ترکیب این ویژگی ها، می توانید جذابیت بصری محتوای وب خود را افزایش دهید و آن را برای کاربران جذاب تر و به یاد ماندنی تر کنید.

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

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

خبرکاو