css - बेसन से झाइयों को दूर करने के उपाय




मैं तत्व के एक तरफ एक बॉक्स-छाया कैसे जोड़ सकता हूं? (7)

मुझे कुछ block तत्वों पर एक बॉक्स-छाया बनाने की ज़रूरत है, लेकिन केवल (उदाहरण के लिए) इसके दाईं ओर। जिस तरह से मैं करता हूं वह आंतरिक तत्व को box-shadow साथ padding-right और overflow:hidden; साथ बाहरी में लपेटना है overflow:hidden; तो छाया के तीन अन्य पक्ष दिखाई नहीं दे रहे हैं।

क्या इसे हासिल करने का कोई बेहतर तरीका है? box-shadow-right ?

संपादित करें : मेरा इरादा छाया का केवल ऊर्ध्वाधर भाग बनाना है। नियम background:url(shadow.png) 100% 0% repeat-y repeat-y के समान ही background:url(shadow.png) 100% 0% repeat-y करेगा।


इस साइट ने मेरी मदद की: https://gist.github.com/ocean90/1268328 (ध्यान दें कि उस साइट पर बाएं और दाएं इस पोस्ट की तारीख के रूप में उलट दिए गए हैं ... लेकिन वे अपेक्षित काम करते हैं)। वे नीचे दिए गए कोड में सही हैं।

<!DOCTYPE html>
<html>
    <head>
        <title>Box Shadow</title>

        <style>
            .box {
                height: 150px;
                width: 300px;
                margin: 20px;
                border: 1px solid #ccc;
            }

            .top {
                box-shadow: 0 -5px 5px -5px #333;
            }

            .right {
                box-shadow: 5px 0 5px -5px #333;
            }

            .bottom {
                box-shadow: 0 5px 5px -5px #333;
            }

            .left {
                box-shadow: -5px 0 5px -5px #333;
            }

            .all {
                box-shadow: 0 0 5px #333;
            }
        </style>
    </head>
    <body>
        <div class="box top"></div>
        <div class="box right"></div>
        <div class="box bottom"></div>
        <div class="box left"></div>
        <div class="box all"></div>
    </body>
</html>

छाया जोड़ने के लिए छद्म तत्व से पहले :: या :: :: का उपयोग करें। इसे 1px बनाएं और जो भी पक्ष आप चाहते हैं उसे स्थिति दें। नीचे शीर्ष का उदाहरण है।

footer {
   margin-top: 50px;
   color: #fff;
   background-color: #009eff;
   text-align: center;
   line-height: 90px;
   position: relative;
}

footer::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
}
<footer>top only box shadow</footer>


मेरा उदाहरण यहां दिया गया है:

.box{
        
        width: 400px; 
        height: 130px; 
        background-color: #C9C; 
        text-align: center; 
        font: 20px normal Arial, Helvetica, sans-serif; 
        color: #fff; 
        padding: 100px 0 0 0;
        -webkit-box-shadow: 0 8px 6px -6px black;
           -moz-box-shadow: 0 8px 6px -6px black;
                box-shadow: 0 8px 6px -6px black;
    }
<div class="box">
</div>


मेरा स्वयं निर्मित समाधान जो संपादित करना आसान है:

HTML:

<div id="anti-shadow-div">
    <div id="shadow-div"></div>
</div>​

सीएसएस:

#shadow-div{
    margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
    margin-left:0px; /* Set to 20px if you want shadow at the left side */
    margin-top:0px; /* Set to 20px if you want shadow at the top side */
    margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
    box-shadow: 0px 0px 20px black; 
    height:100px;
    width:100px;
    background: red;
}

#anti-shadow-div{
    margin:20px;
    display:table;
    overflow:hidden;
}​

डेमो:
http://jsfiddle.net/jDyQt/103


यह एक आसान तरीका हो सकता है

border-right : 1px solid #ddd;
height:85px;    
box-shadow : 10px 0px 5px 1px #eaeaea;

इसे किसी भी div को सौंपें


यहां एक छोटा हैक है जो मैंने किया था।

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

1. एक <div class="one_side_shadow"></div> तत्व के ठीक नीचे बनाएं जिसे मैं एक तरफ बॉक्स छाया बनाना चाहता हूं (इस मामले में मैं id="element" लिए एक तरफा इन्सेट छाया चाहता हूं नीचे से)

2. फिर मैंने एक तरफ छाया को ऊपर की तरफ धक्का देने के लिए एक नकारात्मक लंबवत ऑफसेट का उपयोग करके एक नियमित box-shadow बनाई।

`box-shadow: 0 -8px 20px 2px #DEDEE3;`

div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}




box-shadow