सीएसएस बॉक्स छाया - सीएसएस-ट्रिक्स

Anonim

ब्लॉक-स्तरीय तत्वों (जैसे डिव) से छायांकन में उपयोग किया जाता है।

.shadow ( -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; )
  1. छाया की क्षैतिज ऑफसेट , सकारात्मक का मतलब है कि छाया बॉक्स के दाईं ओर होगी, एक नकारात्मक ऑफसेट बॉक्स के बाईं ओर छाया डाल देगा।
  2. छाया के ऊर्ध्वाधर ऑफसेट , एक नकारात्मक का मतलब है बॉक्स-छाया बॉक्स के ऊपर होगा, एक सकारात्मक एक का मतलब है कि बॉक्स के नीचे छाया होगा।
  3. धब्बा त्रिज्या (वैकल्पिक), यदि 0 पर सेट किया गया तो छाया तेज होगी, संख्या जितनी अधिक होगी, उतना ही धुंधला होगा।
  4. प्रसार त्रिज्या (वैकल्पिक), सकारात्मक मान छाया के आकार को बढ़ाते हैं, नकारात्मक मान आकार में कमी करते हैं। डिफ़ॉल्ट 0 है (छाया धब्बा के समान आकार है)।
  5. रंग

उदाहरण

भीतरी छाया

.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )

उदाहरण

इंटरनेट एक्सप्लोरर बॉक्स छाया

आपको अतिरिक्त तत्वों की आवश्यकता है ...

 Box-shadowed element 
.shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); box-shadow: 5px 5px 5px rgba(68,68,68,0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )

वन-साइड ओनली

एक नकारात्मक प्रसार त्रिज्या का उपयोग करके, आप एक बॉक्स छाया में निचोड़ कर सकते हैं और केवल एक बॉक्स के एक किनारे से इसे धक्का दे सकते हैं।

.one-edge-shadow ( -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; )

सम्बंधित

  • CSS3: केवल एक तरफ मूल्य और बॉक्स-छाया फैलाएं
  • मोज़िला डॉक्स
  • के साथ कई सीमाएँ box-shadow।