Menu
I have two divs next to the each other which background color is white. http://jsfiddle.net/J5ZXt/ is link to code. I want that two divs look like one element, so I need to remove a part of shadow. Any ideas?
833
If your browser supports Css Box Shadow Property then you can see multiple colored shadows below. Multiple shadows can be made using the same code that is used for making single shadow. To make these multiple shadows we just need to define multiple shadow value and seperate them with a comma.
You can comma separate box-shadow any many times as you like.
box-shadow: h-offset v-offset blur spread color; box-shadows values: h-offset: It is required and used to set the position of the shadow horizontally. The positive value is used to set the shadow on right side of the box and a negative value is used to set the shadow on the left side of the box.
To apply a shadow effect only on one side of an element set the blur value to a positive number and set the spread value to the same size but with a negative sign. Depending on which side you want the shadow on, set the offset value as follows: Top shadow: offset-x: 0 and offset-y: -5px.
Note: By default, the shadow generates outside the box but by the use of inset we can create the shadow inside the box. Syntax: box-shadow: h-offset v-offset blur spread color | inset; Approach: To give the inset shadow to an element, we will use the box-shadow property.
Yes, it is possible. Simply cover it up with :before:
/* Add relative positioning */
#two {
position:relative;
}
/* Add :before element to cover up shadow */
#two:before {
background:white;
display:block;
content:".";
font-size:0;
width:4px;
height:100px;
position:absolute;
left:-4px;
top:0;
}
/* Existing styles */
#one {
width: 100px;
height: 100px;
background: #FFF;
-moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
float:left;
}
#two {
width: 100px;
height: 300px;
background: #FFF;
-moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
float:left;
}<div id="one"></div>
<div id="two"></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
