शैडो जनरेटर

हाँ, आप जटिल गहराई और प्रभाव बनाने के लिए कई शैडो जोड़ सकते हैं। प्रत्येक शैडो को अलग-अलग समायोजित किया जा सकता है।

inset शैडो एलिमेंट के बाहर के बजाय अंदर दिखाई देती है। जहाँ सामान्य box-shadow बाहर दिखती है, वहीं inset जोड़ने से एक धँसा हुआ, दबा हुआ प्रभाव बनता है।

असली छाया काली नहीं होती; वह पृष्ठभूमि के रंग का गहरा रूप होती है और किनारों की ओर जाते-जाते नरम पड़ती जाती है। 30% काली एक भारी छाया लगाने के बजाय, अलग-अलग ब्लर त्रिज्या वाली दो-तीन बहुत हल्की परतें चढ़ाइए — जैसे किनारे से सटी 1px की, उसके पीछे 8px की, और उससे बाहर बहुत हल्की 24px की। मान लीजिए रोशनी ऊपर से आ रही है: छाया को केवल ऊर्ध्वाधर ऑफ़सेट दें और क्षैतिज को शून्य रखें।

स्थिर लेआउट में लागत नगण्य है, पर जैसे ही एनिमेशन जुड़ता है बात बदल जाती है। होवर पर box-shadow के मान को ट्रांज़िशन कराने से ब्राउज़र को हर फ़्रेम में ब्लर दोबारा गिनना पड़ता है, जो कमज़ोर डिवाइसों पर साफ़ अटकता है। अगर इंटरैक्शन पर छाया बढ़नी चाहिए तो पहले से बनी छाया परत की opacity या transform को एनिमेट करें — नतीजा कहीं अधिक चिकना रहता है।