باکس دیالوگ شیشه‌ای با افکت بلور | HTML, CSS خالص

معرفی سورس

یک باکس دیالوگ (Dialog Box) شیشه‌ای، سبک و مدرن که با استفاده از تکنیک Frosted Glass (شیشه مات) در CSS پیاده‌سازی شده است. این کامپوننت با پس‌زمینه‌ای شفاف و فیلتر backdrop-filter: blur()، ظاهری بسیار جذاب و امروزی ایجاد می‌کند و می‌تواند برای نمایش پیام‌ها، هشدارها، تأییدیه‌ها یا مودال‌های ساده استفاده شود.

🎯 ویژگی‌ها

• ✅ افکت شیشه‌ای (Glassmorphism) حرفه‌ای با backdrop-filter
• ✅ پس‌زمینه گرادیانت رنگارنگ و چشم‌نواز
• ✅ گوشه‌های گرد و حاشیه‌های نیمه‌شفاف
• ✅ دکمه تعاملی "باشه" با استایل هماهنگ
• ✅ طراحی کاملاً واکنش‌گرا و مدرن
• ✅ استفاده از تکنیک‌های پیشرفته CSS بدون JavaScript
• ✅ کد بسیار سبک، تمیز و آماده استفاده

🎨 طراحی ظاهری

باکس در مرکز صفحه و روی یک پس‌زمینه گرادیانت گرم (آبی، قرمز، طلایی) قرار گرفته است. خود دیالوگ با backdrop-filter: blur(18px) و پس‌زمینه نیمه‌شفاف rgba(255, 255, 255, 0.12) جلو‌ه‌ای شیشه‌ای و مات دارد. دکمه نیز با استیل شیشه‌ای طراحی شده است. در مجموع یک نمونه زیبا از سبک Glassmorphism در طراحی وب را به نمایش می‌گذارد.

📦 محتویات سورس

• index.html – ساختار باکس دیالوگ و المنت‌ها
• style.css – تمام استایل‌های گرادیانت، بلور و دکمه

🚀 نحوه استفاده

1. دو فایل را در یک پوشه قرار دهید.
2. فایل index.html را با مرورگر باز کنید.
3. برای استفاده در پروژه خود، کدهای CSS را به استایل‌شیت اضافه کرده و ساختار HTML را کپی کنید.

📋 مشخصات فنی

• تکنولوژی: HTML5, CSS3
• افکت: Glassmorphism (backdrop-filter: blur)
• پس‌زمینه: linear-gradient
• وابستگی: صفر
• تعداد فایل: ۲
• حجم کلی: بسیار کم

🎁 این سورس برای چه کسانی مناسب است؟

• طراحان و توسعه‌دهندگانی که به دنبال پیاده‌سازی سبک Glassmorphism هستند
• افراد مبتدی که می‌خواهند با قابلیت backdrop-filter در CSS آشنا شوند
• پروژه‌های نیازمند دیالوگ‌ها، مودال‌ها یا کارت‌های شیشه‌ای جذاب
• هرکسی که یک کامپوننت آماده و زیبا برای رابط کاربری می‌خواهد

💡 چرا این سورس؟

• 🔹 طراحی مدرن و منطبق با ترندهای روز
• 🔹 کد بسیار تمیز و کوتاه
• 🔹 کاملاً قابل شخصی‌سازی (رنگ‌ها، میزان شفافیت، ابعاد)
• 🔹 بدون نیاز به JavaScript یا کتابخانه اضافی
• 🔹 عملکرد بالا و پیاده‌سازی آسان