कार्ड के पीछे ब्लॉब

किसी कार्ड या पाठ-खंड के पीछे बैठा ब्लॉब — रंग के रूप में, न कि ऐसी आकृति के रूप में जिसे कोई सीधे देखे। ब्लॉब का सबसे क्षमाशील उपयोग, और वही जहाँ लगभग गोल प्रीसेट सबसे अच्छा चलता है।

नुस्ख़ा

क़दम दर क़दम

• नरम ब्लॉब चुनिए — कम यादृच्छिकता सामग्री के पीछे चुपचाप रहती है।
• अपने पेज की पृष्ठभूमि के क़रीब का रंग लीजिए, एक-दो शेड का फ़र्क़।
• 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…

और विस्तार से

कंट्रास्ट कम रखिए। जो सजावटी पृष्ठभूमि अपने आगे के पाठ से मुक़ाबला करती है वह दो बार नाकाम होती है: वह ध्यान भटकाती है, और पाठ का कंट्रास्ट अनुपात भी अपने साथ नीचे खींच लाती है। अगर ब्लॉब के साथ कार्ड आराम से नहीं पढ़ा जाता, तो ब्लॉब ज़्यादा गहरा है, पाठ ज़्यादा हल्का नहीं।

सवाल

इस पेज का हर आँकड़ा और हर आकृति बिल्ड के समय जनरेटर चलाकर बनाई गई है, इसलिए यह उसी उपकरण का वर्णन करता है जिसे आप अभी इस्तेमाल करने वाले हैं, न कि उसके किसी पुराने रूप का।