افکت شیشه مات برای رابط بسازید. محو، شفافیت و حاشیه را تنظیم کنید و CSS را در پروژه کپی کنید. کاملاً رایگان و بدون ثبت‌نام.
افکت شیشه ماتِ رایج برای طراحی وب امروزی.
از پایه برای حریم خصوصی سخت‌گیرانه، اجرای فوری و بدون اصطکاک ساخته شده. بدون اشتراک، دیوار پرداخت یا ثبت‌نام.
محو، شفافیت و اشباع را زنده روی پس‌زمینه پررنگ تنظیم کنید تا افکت شیشه همان لحظه دیده شود.
کد backdrop-filter با پیشوند webkit را خودکار می‌سازد تا در Safari، Chrome و Firefox سازگار باشد.
کلاس استاندارد CSS بسازید یا طرح دیداری را همان لحظه به کلاس ابزاری Tailwind CSS ترجمه کنید.
اجرای کاملاً سمت کاربر یعنی لغزنده را بکشید و به‌روزرسانی ریاضی CSS را بدون تأخیر ببینید.
موتور محلی WebAssembly ما را با ابزارهای ابری قدیمی مقایسه کنید.
| ویژگی | Utiliome (مرورگر محلی) | مبدل‌های ابری قدیمی |
|---|---|---|
| پیش‌نمایش زنده | بوم تعاملی زنده | سازنده کد ثابت |
| خروجی کد | CSS خام و کلاس ابزاری Tailwind | فقط CSS |
| سازگاری | افزودن خودکار -webkit-backdrop-filter | نیاز به پیشوند دستی |
| هزینه | برای همیشه رایگان و بدون تبلیغ | دیوار پرداخت برای چیدمان ممتاز |
نیازی به نصب نرم‌افزار نیست. همه‌چیز مستقیم داخل مرورگر اجرا می‌شود.
با لغزنده محو مشخص کنید عناصر پس‌زمینه پشت کارت شیشه‌ای چقدر مات شوند.
کانال آلفای رنگ پس‌زمینه را عوض کنید تا شیشه ته رنگ تیره ملایم یا سفید مات روشن بگیرد.
دکمه خروجی را بزنید تا قطعه CSS آماده تولید مستقیم در کلیپ‌بورد کپی شود.
پاسخ کوتاه: شیشه‌ای‌سازی روند طراحی رابط مدرن است با پس‌زمینه نیمه‌شفاف، محو سنگین پس‌زمینه (شیشه مات)، سایه چندلایه ملایم و حاشیه نازک. حس عمق عمودی و سلسله‌مراتب می‌دهد.
این سبک که در macOS Big Sur، iOS و طراحی Fluent ویندوز ۱۱ پررنگ شد، استاندارد عملی اپلیکیشن وب مدرن و ممتاز شده است.
فلسفه اصلی به محور Z تکیه دارد. با نیمه‌شفاف کردن لایه بالا و محو سنگین لایه‌های پررنگ زیر آن، طراح سلسله‌مراتب دیداری می‌سازد بدون سایه افتان سخت. کاربر زمینه آنچه «پشت» پنجره فعال است را می‌بیند.
پاسخ کوتاه: ویژگی CSS به نام backdrop-filter اثر گرافیکی مثل محو یا جابه‌جایی رنگ را روی ناحیه بلافاصله پشت عنصر اعمال می‌کند. برخلاف filter معمولی که خود عنصر را محو می‌کند، backdrop-filter فقط آنچه از پس‌زمینه شفاف دیده می‌شود را عوض می‌کند.
برای افکت شیشه‌ای، توسعه‌دهنده کاملاً به قاعده CSS یعنی backdrop-filter تکیه می‌کند. وقتی عنصر رنگ پس‌زمینه نیمه‌شفاف دارد (مثلاً background: rgba(255, 255, 255, 0.2);) و backdrop-filter: blur(10px); اعمال شود، موتور رسم مرورگر پیکسل‌های درست پشت عنصر را می‌گیرد، ریاضی محو می‌کند و داخل عنصر می‌کشد.
چون مرورگر باید هنگام پیمایش پیوسته پیکسل را دوباره حساب کند، این ویژگی با شتاب سخت‌افزاری است. سازنده Utiliome این معیار سخت‌افزاری را همان لحظه حساب می‌کند تا اثر کارایی را زنده ببینید.
پاسخ کوتاه: Tailwind CSS ابزار آماده افکت شیشه دارد. backdrop-blur-md، bg-white/30 و حاشیه نازک border-white/20 را ترکیب کنید تا نگاه شیشه مات بدون CSS سفارشی ساخته شود.
نوشتن CSS سفارشی برای یادگیری خوب است، اما توسعه‌دهنده مدرن اغلب چارچوب ابزاری مثل Tailwind را ترجیح می‌دهد.
برای کارت شیشه‌ای در Tailwind سه لایه ضروری است:
backdrop-blur-md یا backdrop-blur-lg برای مات کردن پس‌زمینه استفاده کنید.bg-white/20 (حالت روشن) یا bg-slate-900/40 (حالت تیره) استفاده کنید تا شیشه حضور فیزیکی داشته باشد.border border-white/20 شبیه‌سازی کنید.سازنده Utiliome کلیدی دارد که CSS استاندارد یا رشته کلاس قالب‌بندی‌شده Tailwind را خروجی می‌دهد.
پاسخ کوتاه: Safari از قدیم برای فیلتر پس‌زمینه پیشوند -webkit- می‌خواهد. اگر این پیشوند نباشد، افکت شیشه در iOS و macOS کاملاً شکست می‌خورد و جعبه تخت شفاف می‌ماند.
دام بزرگ برای توسعه‌دهنده تازه‌کار در شیشه‌ای‌سازی، فراموش کردن سخت‌افزار اپل است. Chrome و Firefox ویژگی استاندارد backdrop-filter را بومی پشتیبانی می‌کنند، اما Safari (به‌ویژه نسخه‌های قدیمی‌تر iOS) پیشوند فروشنده را سخت می‌خواهد.
اگر -webkit-backdrop-filter: blur(10px); را نگذارید، کاربر اپل فقط یک div شفاف گیج‌کننده می‌بیند و متن روی پس‌زمینه کاملاً ناخوانا می‌شود.
سازنده CSS در Utiliome پیشوند لازم WebKit را خودکار در کد خروجی می‌گذارد تا طرح در همه سیستم‌عامل‌های اصلی یکسان باشد.
پاسخ کوتاه: شیشه‌ای‌سازی اغلب دسترس‌پذیری را خراب می‌کند چون متن روی پس‌زمینه محو و پررنگ ممکن است نسبت کنتراست WCAG را رد کند. رنگ متن باید نسبت به ته‌رنگ میانگین شیشه به اندازه کافی تیره یا روشن باشد.
رایج‌ترین نقد روند شیشه‌ای، دسترس‌پذیری ضعیف است. اگر تصویر پس‌زمینه رنگارنگ از آبی تیره به زرد روشن پشت کارت برود، متن سفید ممکن است ناگهان کاملاً ناپدید شود.
برای رفع، باید ته‌رنگ قوی پس‌زمینه (شفافیت) بگذارید. مثلاً اگر متن سفید است، رنگ پس‌زمینه شیشه چیزی مثل rgba(0, 0, 0, 0.6) باشد. این تضمین می‌کند هر تصویر پررنگی پشت شیشه باشد، متن حداقل نسبت کنتراست ۴٫۵ به ۱ را که قانون می‌خواهد حفظ کند.
پاسخ کوتاه: صفحه شیشه مات که صاف روی سطح نشسته شبیه شیشه نیست. باید با سایه افتان ملایم و پهن آن را بالا ببرید (مثلاً box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)) تا از لایه پس‌زمینه جدا شود.
مغز انسان برای درک عمق به نشانه نور نیاز دارد. اگر فقط پس‌زمینه را محو کنید، رابط ممکن است «تخت» به نظر برسد.
برای برجسته شدن شیشه باید آن را روی محور Z بالا ببرید. سازنده Utiliome اجازه می‌دهد box-shadow ملایم را کوک کنید. با شفافیت خیلی کم سایه (حدود ۱۰٪) و شعاع محو خیلی بالا (۳۲ پیکسل)، انسداد محیطی نرم می‌سازید که شیشه را زیبا از پس‌زمینه پررنگ جدا می‌کند.
هرچه برای استفاده از ساخت CSS شیشه‌ای رایگان و آنلاین Utiliome لازم است.
Safari پیشوند -webkit-backdrop-filter را می‌خواهد. Utiliome این پیشوند را خودکار در خروجی CSS می‌سازد تا سازگاری مرورگرها حفظ شود.
بله. سازنده Utiliome کلیدی دارد که طرح دیداری را همان لحظه به کلاس ابزاری Tailwind ترجمه می‌کند (مثلاً backdrop-blur-md bg-white/30).
بله، استفاده زیاد از محو سنگین روی عنصر بزرگ می‌تواند در موبایل ضعیف لگ بسازد، چون GPU را وادار می‌کند هنگام پیمایش پیوسته پیکسل را دوباره حساب کند.
شیشه واقعی نور را روی لبه بازمی‌تاباند. حاشیه توپر ۱ پیکسل با شفافیت خیلی کم (مثل rgba(255, 255, 255, 0.2)) بگذارید تا این بازتاب لبه شبیه‌سازی شود.
بله، کاملاً رایگان و بدون محدودیت، تبلیغ یا ثبت‌نام حساب.