الخلفيات والتأثيرات·مبتدئ
خلفية شبكة نقطيّة
نمط dot-grid ناعم كأنّه ورق مربّعات.
نصّ البرومبت
أضف utility grid-bg في styles.css:
@utility grid-bg { background-image: radial-gradient(oklch(0.85 0 0 / 0.5) 1px, transparent 1px); background-size: 24px 24px; }
- استخدمها كخلفية للأقسام الرئيسية.
- تلاشى الشبكة عند الحواف عبر mask-image linear-gradient.وسوم
gridpattern
كيف تخصّصه لفكرتك؟
- استبدل أسماء العناصر والألوان بما يناسب هوية منتجك.
- أضف قيوداً واضحة (مثل: بدون خلفيات متدرّجة، استخدم توكنز styles.css).
- بعد التنفيذ، راجع النتيجة على الجوال والسطح المكتبي.
محتوى مرتبط
الخلفيات والتأثيرات · متوسط
خلفية Mesh Gradient هادئة
خلفية متعدّدة الألوان بأسلوب Stripe.
الخلفيات والتأثيرات · متقدّم
طبقة ضجيج للخلفية
grain خفيف يعطي الإحساس التحريري.
الخلفيات والتأثيرات · متوسط
بطاقة زجاجية هادئة
Glassmorphism بلا مبالغة.
الخلفيات والتأثيرات · متوسط
ظهور تدريجي عند السحب
Fade + slide-up عند دخول العنصر إلى الشاشة.