كتلة خلف بطاقة

كتلة تجلس خلف بطاقة أو كتلة نص، بوصفها لونًا لا شكلًا يُفترض أن ينظر إليه أحد مباشرة. وهو أكثر استخدامات الكتل تسامحًا، وأفضل موضع يعمل فيه إعداد شبه دائري.

الوصفة

خطوة بخطوة

• اختر كتلة ناعمة — فالعشوائية المنخفضة تبقى هادئة خلف المحتوى.
• اختر لونًا قريبًا من خلفية صفحتك، بفارق درجة أو درجتين.
• صدّر بصيغة خلفية CSS وطبّقه على حاوية البطاقة نفسها.
• استخدم `background-position` لإزاحتها عن المركز — فالكتلة المتمركزة تبدو خطأً.

.shape {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 33.65C118.88 33.14,151.1 49.98,159.29 65.77C167.49 81.56,159.05 113.2,149.17 128.39C139.29 143.58,116.48 156.87,100 156.92C83.52 156.98,59.27 143.39,50.27 128.71C41.27 114.03,37.71 84.67,46 68.82C54.29 52.98,81.12 34.16,100 33.65Z' fill='%234f46e5'/%3E%3C/svg%3E");
  background-repeat…

بمزيد من التفصيل

أبقِ التباين منخفضًا. فالخلفية الزخرفية التي تنازع النص أمامها تفشل مرتين: تشتّت الانتباه، وتجرّ معها نسبة تباين النص إلى الأسفل. وإن لم تستطع قراءة البطاقة بارتياح والكتلة خلفها، فالكتلة داكنة أكثر من اللازم لا النص فاتح أكثر من اللازم.

أسئلة

كل رقم وكل شكل في هذه الصفحة أُنتج بتشغيل المولّد وقت البناء، فهو يصف الأداة التي أنت على وشك استخدامها لا نسخة كانت موجودة يومًا.