CSS शैडो जनरेटर

स्लाइडर घुमाइए और नमूना साथ-साथ बदलता जाएगा। एक शैडो कम पड़े तो लेयर जोड़िए — असली इंटरफ़ेस की नरम, भरोसेमंद गहराई इसी तरह बनती है।

लेयर

प्रीसेट

कैसे इस्तेमाल करें

  1. पहले चुनें कि शैडो किसे देनी है: ब्लॉक को या टेक्स्ट को।
  2. ऑफ़सेट, ब्लर और रंग तय करें — नमूना तुरंत फिर से बनता है।
  3. गहराई चाहिए तो एक लेयर जोड़ें: दो-तीन हल्की शैडो एक भारी शैडो से बेहतर दिखती हैं।
  4. नियंत्रणों के नीचे दी CSS पंक्ति कॉपी करें।

जानने योग्य बातें

टेक्स्ट शैडो में सेटिंग कम क्यों हैं

text-shadow प्रॉपर्टी सिर्फ़ ऑफ़सेट, ब्लर और रंग लेती है। स्प्रेड और भीतरी मोड केवल box-shadow के हैं, और एक अतिरिक्त मान पूरी घोषणा को अमान्य कर देता है: ब्राउज़र उसे चुपचाप छोड़ देता है और शैडो पूरी तरह ग़ायब हो जाती है। इसलिए टेक्स्ट मोड में ये दो नियंत्रण छिपा दिए जाते हैं, यह उम्मीद करने के बजाय कि उन्हें अनदेखा कर दिया जाएगा।

कई हल्की लेयर एक भारी लेयर से बेहतर

असली शैडो एक-सी नहीं होती: वस्तु के ठीक नीचे घनी होती है और दूर जाते-जाते घुल जाती है। भारी ब्लर वाली एक शैडो सिर्फ़ धूसर आभा देती है, जबकि अलग-अलग ऑफ़सेट और कम अपारदर्शिता वाली दो-तीन लेयर वही गहराई देती हैं जो सलीके से बने इंटरफ़ेस में दिखती है। यह टूल हर लेयर अलग रखता है, और कॉपी की गई पंक्ति उन्हें क्रम से गिनाती है।

अक्सर पूछे जाने वाले सवाल

स्प्रेड किस काम आता है?

यह ब्लर लगने से पहले शैडो को बड़ा या छोटा करता है। ऋणात्मक मान शैडो को भीतर समेट लेता है ताकि वह किनारों से बाहर न झाँके — कार्ड की साफ़-सुथरी शैडो का यही तरीक़ा है, जहाँ आभा ब्लॉक के नीचे रहनी चाहिए, चारों ओर नहीं।

भीतरी शैडो कैसे बनाएँ?

«भीतरी शैडो» पर निशान लगाएँ — पंक्ति की शुरुआत में inset आ जाता है और शैडो ब्लॉक के भीतर चली जाती है। दबे हुए बटन और इनपुट फ़ील्ड में इसी का इस्तेमाल होता है, जहाँ गहराई उभार नहीं, धँसाव लगनी चाहिए।

मेरी शैडो दिख क्यों नहीं रही?

अक्सर अपारदर्शिता शून्य होती है, या ऑफ़सेट और ब्लर दोनों शून्य होते हैं और शैडो ठीक ब्लॉक के पीछे छिप जाती है। अगर मूल तत्व पर overflow: hidden है और शैडो दिखने वाले क्षेत्र से बाहर पड़ती है, तब भी वह ग़ायब हो जाती है।

क्या यह हर ब्राउज़र में चलेगा?

हाँ। box-shadow और text-shadow वर्षों से मानक हैं और उन्हें किसी प्रीफ़िक्स की ज़रूरत नहीं; यहाँ बनने वाले मान सादा CSS हैं, बिना किसी वेंडर एक्सटेंशन के।

संबंधित टूल