Digital / Web UI
Frosted Film
طبقة شفافة هادئة ومبعثرة تكشف اللون تحتها من دون أن تتحول إلى زجاج واضح.
Ff
الاستخدامات
- تنقل ثابت
- طبقات جانبية
- ألواح هاتف
المعاملات
- blur
- tint
- grain
- border alpha
- contrast
AI Prompt
استخدم طبقة frosted شفافة فوق خلفية ملونة وهادئة، مع حواف مبعثرة وحبيبات ناعمة ونص واضح.
ملاحظات Tailwind
استخدم backdrop-blur-md و bg-white/10 أو bg-black/15 مع حدود خفيفة وطبقة grain ناعمة.
ملاحظات الأداء
فضل blur متوسطا، واختبر الطبقات الكبيرة على الهواتف القديمة.
CSS
.frosted-film {
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)),
rgba(20, 26, 28, 0.42);
backdrop-filter: blur(14px) saturate(1.05);
box-shadow: inset 0 1px rgba(255,255,255,.18);
}مثال React
export function FrostedFilmPanel({ children }) {
return <section className="frosted-film">{children}</section>;
}