سازندهی افکت شیشهای CSS
افکت شیشهی مات را زنده تنظیم کنید و CSS آماده با پیشوند webkit بگیرید.
کارت شیشهای
این کارت دقیقاً با همان CSSی رسم شده که پایین میبینید؛ هر اسلایدر را جابهجا کنید تا اثرش را همینجا ببینید.
دکمهی نمونهدربارهی سازندهی افکت شیشهای CSS
backdrop-filter آنچه را پشت عنصر رسم شده تار میکند، نه خود عنصر را؛ به همین دلیل کارتی که پسزمینهی کدر دارد هر قدر هم بلور را بالا ببرید شیشهای نمیشود و حتماً باید rgba با آلفای پایین بگیرد. نکتهی دوم اینکه تار کردن رنگها را بیجان میکند؛ برای همین در کدهای حرفهای تقریباً همیشه saturate بین ۱۵۰ تا ۱۸۰ درصد کنار blur میآید. این ابزار هر دو را همراه خط دور، سایه، خط نور داخلی و یک بلوک جایگزین اختیاری برای مرورگرهای قدیمی مینویسد.
راهنمای استفاده از سازندهی افکت شیشهای CSS
- 1
یکی از پنج پسزمینهی رنگی بالای صفحه را انتخاب کنید تا افکت واقعاً دیده شود؛ گزینهی راهراه برای سنجیدن دقیق میزان تاری بهترین است.
- 2
تاری، شفافیت لایه، رنگ لایه، اشباع و روشنایی را با اسلایدرها تنظیم کنید؛ کارت نمونه بلافاصله تغییر میکند.
- 3
ضخامت و رنگ خط دور، گردی گوشه، سایهی بیرونی و خط نور داخلی را تنظیم کنید یا از یکی از پنج پیشتنظیم آماده شروع کنید.
- 4
اگر پشتیبانی از مرورگرهای قدیمی برایتان مهم است، تیک بلوک جایگزین را بزنید تا شرط پشتیبانی با پسزمینهی کدرتر به خروجی اضافه شود.
- 5
نام کلاس دلخواه را در فیلد سلکتور بنویسید و CSS نهایی را کپی کنید.
پرسشهای متداول
چرا افکت شیشهای من در پروژه هیچ اثری ندارد؟
سه دلیل رایج دارد: پسزمینهی خود عنصر کاملاً کدر است و چیزی از پشت پیدا نیست؛ پشت عنصر فقط یک رنگ تخت است و تار کردن رنگ تخت هیچ تفاوتی نمیسازد؛ یا یکی از عنصرهای والد خاصیت filter دارد که ریشهی پسزمینه را جابهجا میکند و blur را خنثی میکند.
پیشوند -webkit- هنوز لازم است؟
برای سافاری بله. کروم و اج از نسخهی ۷۶ و فایرفاکس از نسخهی ۱۰۳ شکل بدون پیشوند را میفهمند، ولی سافاری سالها فقط نسخهی webkit را میشناخت. نگه داشتن هر دو خط هزینهای ندارد و ترتیب درست این است که اول خط پیشونددار بیاید و بعد خط استاندارد.
این افکت روی کارایی سایت اثر میگذارد؟
بله، backdrop-filter یکی از گرانترین خاصیتهای CSS است چون مرورگر باید ناحیهی پشت عنصر را جداگانه رندر و تار کند. روی یک هدر یا چند کارت مشکلی پیش نمیآید، ولی گذاشتن آن روی دهها آیتم یک لیست یا روی عنصری که مدام اسکرول میشود، مخصوصاً در موبایل، افت محسوس فریم میدهد.
خروجی این ابزار خوانایی متن را تضمین میکند؟
خیر و این محدودیت واقعی ابزار است: اینجا فقط ظاهر کارت ساخته میشود و کنتراست متن اصلاً سنجیده نمیشود. چون زمینهی پشت کارت در صفحهی واقعی شما متغیر است، متن ممکن است روی نواحی روشن به حد استاندارد WCAG نرسد؛ در این حالت شفافیت لایه را بالاتر ببرید یا به متن سایه بدهید.