केवल एक तरफ इनसेट बॉक्स-छाया कैसे बनाएं?

Question

क्या यह संभव है कि किसी तरह डिवेट के एक तरफ केवल इनसेट बॉक्स-छाया हो? ध्यान दें कि मैं यहाँ एक इनसेट बॉक्स-शैडो की बात कर रहा हूँ , न कि सामान्य बाहरी बॉक्स-शैडो की।

उदाहरण के लिए, निम्नलिखित JSFiddle में, आप देखेंगे कि इनसेट छाया सभी 4 तरफ अलग-अलग डिग्री में दिखाई देती है।

मैं इसे केवल शीर्ष पर दिखाने के लिए कैसे प्राप्त करूं? या केवल सबसे ऊपर और नीचे?

JSFiddle: http://jsfiddle.net/ahmadka/KFrun/

.box {
  -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
  box-shadow: inset 0px 5px 10px 1px #000000;
}

.text {
  padding: 20px;
}

<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>

Comments

एक वैकल्पिक (और पूरी तरह से अनुकूलन योग्य) तरीका एक पृष्ठभूमि ढाल होगा ...

— 17-12 में

केवल बाएँ और दाएँ पक्ष पर बॉक्स-छाया पाने के लिए

— ब्रिचिन्स

Answer 1

यह वही है जो आप ढूंढ रहे हैं। यह प्रत्येक पक्ष के लिए उदाहरण है जिसे आप छाया के साथ चाहते हैं।

.top-box
{
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);
}
.left-box
{
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
}
.right-box
{
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
}
.bottom-box
{
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4);
}

अधिक उदाहरणों के लिए स्निपेट देखें:

body {
    background-color:#0074D9;
}
div {
    background-color:#ffffff;
    padding:20px;
    margin-top:10px;
}
.top-box {
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
}
.left-box {
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.7);
}
.right-box {
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
.bottom-box {
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.7);
}
.top-gradient-box {
    background: linear-gradient(to bottom, #999 0, #ffffff 7px, #ffffff 100%);
}
.left-gradient-box {
    background: linear-gradient(to right, #999 0, #ffffff 7px, #ffffff 100%);
}
.right-gradient-box {
    background: linear-gradient(to left, #999 0, #ffffff 7px, #ffffff 100%);
}
.bottom-gradient-box {
    background: linear-gradient(to top, #999 0, #ffffff 7px, #ffffff 100%);
}

<div class="top-box">
        This area has a top shadow using box-shadow
</div>

<div class="left-box">
        This area has a left shadow using box-shadow
</div>

<div class="right-box">
        This area has a right shadow using box-shadow
</div>

<div class="bottom-box">
        This area has a bottom shadow using box-shadow
</div>

<div class="top-gradient-box">
        This area has a top shadow using gradients
</div>
<div class="left-gradient-box">
        This area has a left shadow using gradients
</div>
<div class="right-gradient-box">
        This area has a right shadow using gradients
</div>
<div class="bottom-gradient-box">
        This area has a bottom shadow using gradients
</div>

Answer 2

चाल एक दूसरा .box-innerअंदर है, जो मूल की तुलना में चौड़ाई में बड़ा है .box, और उस box-shadowपर लागू होता है।

फिर, .textजोड़ा चौड़ाई के लिए बनाने के लिए और अधिक पैडिंग जोड़ा गया।

इस तरह से तर्क दिखता है:

और यहाँ है कि यह CSS में कैसे किया गया है:

अधिकतम पाने के लिए अधिकतम चौड़ाई का उपयोग .inner-boxन करें .box, और overflowयह सुनिश्चित करने के लिए कि शेष को क्लिप किया गया है:

.box {
    max-width: 100% !important;
    overflow: hidden;
}

माता-पिता की तुलना में 110% व्यापक है जो एक बच्चे के संदर्भ में 100% है (जब माता-पिता के .boxपास एक निश्चित चौड़ाई होनी चाहिए , उदाहरण के लिए)। नकारात्मक मार्जिन चौड़ाई के लिए बनाते हैं और तत्व को केंद्रित करने का कारण बनते हैं (केवल दाएं भाग को छिपाने के बजाय):

.box-inner {
    width: 110%;
    margin-left:-5%;
    margin-right: -5%;
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
    box-shadow: inset 0px 5px 10px 1px #000000;
}

और एक्स अक्ष पर कुछ गद्दी जोड़कर व्यापक बनाने के लिए .inner-box:

.text {
    padding: 20px 40px;
}

यहां वर्किंग फिडल है।

यदि आप फिडेल का निरीक्षण करते हैं, तो आप देखेंगे:

Comments

आप कोड के बिना फिडल के लिंक को कैसे पोस्ट कर सकते हैं? : ओ

— मोहम्मद अरीब सिद्दीकी

आदमी! यह एक SO हैक है! कूल: पी

— मोहम्मद अरीब सिद्दीकी

अपने फ़ायरफ़ॉक्स में मैं दाईं और बाईं सीमा पर पाठ नहीं देख सकता। पाठ बस काट दिया जाता है। (यहाँ स्क्रीन शॉट goo.gl/aO8ZX है ) मैंने इसे स्वयं आज़माया है और divछाया को छिपाने के लिए कुछ अतिरिक्त उपयोग किया है ... jsfiddle.net/KFrun/19

— Fabian N.

हाँ, मैं jsfiddle.net/KFrun/6/ का उपयोग करता हूँ क्या यह संभवतः कुछ फ़ायरफ़ॉक्स संस्करण समस्या है? मैं Ubuntu के लिए Firefox 21.0 का उपयोग करता हूं ...

— Fabian N.

लेकिन अभी भी एक छाया नीचे है

— कोडी गुलडनर

Answer 3

थोड़ा देर से, लेकिन एक डुप्लिकेट उत्तर जिसमें पैडिंग को बदलने या अतिरिक्त divs जोड़ने की आवश्यकता नहीं है, यहां पाया जा सकता है: केवल बॉक्स-शैडो इनसेट नीचे के साथ एक समस्या है । यह कहता है, "चौथी लंबाई के लिए एक नकारात्मक मान का उपयोग करें जो प्रसार दूरी को परिभाषित करता है। इसे अक्सर अनदेखा किया जाता है, लेकिन प्रमुख उपयोगकर्ता द्वारा समर्थित है"

उत्तरदाता की बेला से :

box-shadow: inset 0 -10px 10px -10px #000000;

Answer 4

यह थोड़ा पास आता है।

.box
{
    -webkit-box-shadow: inset -1px 10px 5px -3px #000000;
    box-shadow: inset -1px 10px 5px -3px #000000;
}

Comments

यही मैंने कोशिश की! लेकिन वह ऐसा नहीं चाहता था, इसलिए उत्तर के रूप में इसे पोस्ट नहीं किया! :(

— मोहम्मद अरीब सिद्दीकी

बड़े की तरह। धन्यवाद '

— mghhgm

इस एक (कम से कम क्षण के लिए) की तुलना में सबसे सरल उत्तर हो सकता है। धन्यवाद

— Gendrith

Answer 5

कोशिश करो, शायद उपयोगी ...

box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 3px #cbc9c9;
                    -webkit-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -o-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -moz-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;  

ऊपर CSSकारण आप नीचे में एक बॉक्स छाया है।
आप यहाँ और अधिक लाल कर सकते हैं

Answer 6

यह वह सटीक चीज नहीं हो सकती है जिसकी आप तलाश कर रहे हैं, लेकिन आप इसके rgbaसाथ संयोजन करके बहुत समान प्रभाव बना सकते हैं linear-gradient:

  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);

यह 50% अपारदर्शिता ( rgba(0,0,0,.5)) से पारदर्शी ( rgba(0,0,0,0)) के साथ काले रंग से एक रैखिक-ढाल बनाता है जो शीर्ष से 30% पारदर्शी रूप से पारदर्शी होना शुरू होता है। आप अपना वांछित प्रभाव बनाने के लिए उन मूल्यों के साथ खेल सकते हैं। आप इसे एक अलग-अलग तरफ नीचे-मूल्य ( linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%)) जोड़कर या रंगों को बदलकर रख सकते हैं । यदि आप वास्तव में विभिन्न किनारों पर विभिन्न कोणों की तरह जटिल छाया चाहते हैं, तो आप लेयरिंग भी शुरू कर सकते हैं linear-gradient।

यहाँ यह कार्रवाई में देखने के लिए एक स्निपेट है:

.box {
  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);
}

.text {
  padding: 20px;
}

<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>

Answer 7

इनसेट बॉक्स छाया केवल ऊपर की तरफ?

#box {
            background: #CCC;
            -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            font: bold 18px/1.2em sans-serif;
            height: auto;
            margin: 15px auto;
            padding: 75px 15px 25px;
            text-align: center;
            width: 80%;
        }