I'm trying to get box-shadow on all 4 sides of my element.
I've tried box-shadow: 4px 4px 4px 4px 5px grey but it doesn't work. There also doesn't seem to be a rule for specifically setting the blur of a box-shadow.
If you have googled this a bit more, you would have found the answer right away.
The box-shadow property syntax is the fallowing :
box-shadow : horizontal offset | vertical offset | blur | spread | color ;
So you want it on all sides means :
No offsets.
Blur as you like.
Spread here is key to this, setting 10px to the spread means 5px on all sides, basically, half the amount will be on each facing side.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
padding: 30px;
margin: 30px;
width: 300px;
height: 100px;
padding: 15px;
background-color: orange;
box-shadow: 0px 0px 10px 10px grey;
}
<div></div>
Also if you want to customize that you always define multiple shadows separated by a comma.
You have an extra value to box-shadow property. This works: box-shadow: 4px 4px 4px 5px grey
Try this instead 5px specify the blur distance of the shadow while 10px specify the horizontal and vertical shadow of the box-shadow. You can check this link for more info https://www.w3schools.com/css/css3_shadows.asp
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px grey;
}
<body>
<div>This is a div element with a box-shadow</div>
</body>
or
you can modify yours like so
box-shadow: 4px 4px 5px grey
To get a box-shadow on all sides of your element, you'll need:
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: lawngreen;
box-shadow: 0 0 20px black;
}
<div>All of my sides have a box-shadow!</div>
Related
I'm using these styles:
/** noUISlider overrides */
.noUi-horizontal
height: 20px
.noUi-target
background: #e0e0e0
border-radius: 20px
border: 0
box-shadow: none
.noUi-connect
background: #21528d
margin: 0 10px
.noUi-handle
border-radius: 10px
border: 2px solid #21528d
box-shadow: none
width: 20px !important
height: 20px !important
left: 0px !important
top: 0px !important
.noUi-handle-upper
left: -20px !important
.noUi-handle:after
display: none
.noUi-handle:before
width: 8px
height: 8px
border-radius: 10px
top: 4px
left: 4px
background: #c3c3c3
Which results in this slider:
which is exactly what I want. The problem comes in when I slide the upper handle all the way to 0:
The upper bound anchors on the right side and the lower bound anchors on the left side....which means the upper bound actually slides past the lower bound and resides to the left of it in the last screenshot.
It must be a simple style adjustment, but I haven't been able to figure out how to do it and I'm hoping someone has already solved this problem and can share the answer.
I am having an unexpected 1px margin under a div residing in a fixed container. This issue only occurs in Edge (possibly in IE as well). After some testing, I was able to reproduce the bug with a bare bones example.
This picture, which you can reproduce running the snippet below, is composed of 3 square divs inside a fixed div. Firefox
In Edge, you can "fix" this issue by either disabling the property top: 50% in the container div, or by disabling border-*-right-radius: 6px in the divs inside it. Naturally, this isn't a fix, because I need both these properties to effectively implement this design.
How can I fix this? I tried adding borders the same color as the background, but the background is not opaque.
Edit: If you can't see it right away in IE/Edge, try to select the container div and slowly increase the value of the top property. In IE11, changing it from 5% to 6% already made the problem obvious again.
.box {
background-color: rgba(0,0,0,0.15);
height: 70px;
line-height: 70px;
text-align: center;
border-right: 1px solid rgba(0,0,0,0.2);
}
.box:hover {
background-color: rgba(50,50,100,0.15);
}
.box:first-child {
border-top-right-radius: 6px;
border-top: 1px solid rgba(0,0,0,0.2);
}
.box:last-child {
border-bottom-right-radius: 6px;
border-bottom:1px solid rgba(0,0,0,0.2);
}
.main {
width: 70px;
position: fixed;
left: 0;
top: 5%;
}
<div class="main">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Try to use border on parent div: http://jsfiddle.net/gtf0fa8n/1/
Border radius on parent does not brake inner divs rendering in IE
.main {
border: 1px solid rgba(0, 0, 0, 0.5);
border-left: 0;
border-radius: 0 6px 6px 0;
overflow: hidden;
}
.box {
background-color: rgba(0, 0, 0, 0.3);
height: 70px;
line-height: 70px;
text-align: center;
}
.box:hover {
background-color: rgba(50,50,100,0.15);
}
Just give boxshadow of 1px with same color on bottom.
box-shadow: #2a2e37 0px 1px 0px;
please refer to http://jsfiddle.net/3fTyt/806/
I need box 2 has the same box shadow style with box 1 but only top of box 2 must be shadowed.
I tried a lot but couldn't find a solution. Can you please help? regards.
Codes in jsfiddle
CSS
#box1 {
background: #fff;
box-shadow: 0 0 10px 1px rgba(0,0,0,.99);
font: bold 18px/1.2em sans-serif;
height: 100px;
margin: 15px auto;
padding: 75px 15px 25px;
text-align: center;
width: 200px; float:left; margin:50px;
}
#box2
{
background: #fff;
box-shadow: 0 0 10px 1px rgba(0,0,0,.1), 0 -1px 1px rgba(0,0,0,.99);
font: bold 18px/1.2em sans-serif;
height: 100px;
margin: 15px auto;
padding: 75px 15px 25px;
text-align: center;
width: 200px; float:left; margin:50px;
}
HTML
<div id="box1">box 1</div>
<div id="box2">box 2: only top shadow is required and should has same shadow style with box 1</div>
You might try something like this :
#box2 {
box-shadow: 0px -10px 10px -10px rgba(0,0,0,.99);
...
}
Why these settings ?
horizontal offset = 0px : no horizontal offset,
vertical offset = -10px : 10px to the top,
blur radius = 10px : just used the same value as #box1,
spread distance = -10px : as for spread distance, a positive value would expand the shadow, but a negative value make it "shrink" (see the box-shadow documentation here). As we're using a 10px blur radius, we need to use at least a -10px spread distance to avoid seeing any shadow on the left, right and bottom sides.
Which gives us a pretty cool result, I think. Pretty close from what you were looking for :
<div class="row">
some content
<div class="info-box">
some other content
</div>
</div>
.row {
float: left;
margin-bottom: 1.5%;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
background-color: rgb(250, 250, 250);
width: 685px;
-webkit-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-moz-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-ms-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-o-border-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
}
.row:hover {
background-color: rgb(240, 245, 245);
-moz-box-shadow: inset 0 0 5px #4d4d4d;
-webkit-box-shadow: inset 0 0 5px #4d4d4d;
box-shadow: inset 0 0 5px #4d4d4d;
}
.info-box {
position: relative;
border-left: 1px solid #e3e3e3;
padding: 15px;
width: 170px;
font-size: 0.93em;
color: #363636;
float: left;
}
Alright, I have this info box inside row. Since at .row:hover, I'm creating an inner shadow. The border-left of the info-box seems to show on top of the shadow when you hover on row.
My question is if you can make the shadow on top of the border. Thanks in advance.
Note: z-index doesn't work for me.
Of course it's on top: the child has to appear above the parent, otherwise it'd be hidden by it. To achieve the desired effect, you would have to apply the shadow to an element that came above, ie after, the .info-box. You can achieve this with no additional markup by using the :after pseudo-element.
If you take a look at this fiddle, I've achieved the basic proposition — although you may want to shift the border to the pseudo element or adjust dimensions to get it positioned just right.
Basic guide to what I did:
Gave .row the CSS position: relative so we can place children in relation to it.
Moved everything apart from the background property in the .row:hover rule to a new .row:hover:after rule.
Added content: ' ' to force the pseudo element to display.
Added positioning, height and width, top and left to make the pseudo element cover available width.
EDIT: Felipe points out in the comments that any attempt to click in through to object within .row will be intercepted by the :after element, but suggests you can use pointer events set to pointer-events: none to mitigate the problem (in everything other than IE and Opera). I've updated my example to show this in action.
This question already has answers here:
Creating a CSS3 box-shadow on all sides but one
(10 answers)
Closed 3 years ago.
I want to have box-shadow on three sides of a div (except top side). How could I do that?
Here's a JS Fiddle for you, it only uses one single div to work.
#shadowBox {
background-color: #ddd;
margin: 0px auto;
padding: 10px;
width: 220px;
box-shadow: 0px 8px 10px gray,
-10px 8px 15px gray, 10px 8px 15px gray;
}
You set a shadow on the bottom, bottom left, and bottom right. With soft shadows it gets a bit tricky but it is doable. It just needs a bit of guesswork to decrease the middle shadow's blur radius, so that it looks seamless and not too dark when it overlaps with the side shadows.
If you are looking for something like Google material design shadows:
.shadow1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.shadow2 {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.shadow3 {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.shadow4 {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.shadow5 {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
Source: https://medium.com/#Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.wyvbmcq10
Here's an example of the negative Y value suggested by #Vigrond
box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.15);
I like #Chris C answer but I think, we do not need the first line of code. This is shorter and gives the same effect:
box-shadow: -10px 8px 15px lightgray, /*left and bottom*/
10px 8px 15px lightgray; /*right and bottom*/
#note{
position: absolute;
top: 20px; left: 30px;
width:100px; height: 100px;
background-color: #eee;
box-shadow: -10px 8px 15px lightgray,
10px 8px 15px lightgray;
}
<div id="note"></div>
If you have a solid background color, then you can accomplish this by using a combination of background-color and z-index. The trick is to give the element with box-shadow and its previous sibling positioning, then give the previous sibling a background color and set it to have a higher z-index so that it's stacked on top of the element with box-shadow, in effect covering its top shadow.
You can see a demo here: http://codepen.io/thdoan/pen/vNvpKv
If there's no immediate previous sibling to work with, then you can also use a pseudo-element such as :before or :after: http://codepen.io/thdoan/pen/ojJEMj
For translucent shadows with hard corners (i.e. no blur radius) I used this:
.shadow-no-top {
position: relative;
box-shadow: -5px 0 0 0 rgba(0,0,0,.2), 5px 0 0 0 rgba(0,0,0,.2);
}
.shadow-no-top:before {
content: "";
position: absolute;
top: 100%;
left: -5px;
right: -5px;
bottom: -5px;
background-color: rgba(0,0,0,.2);
}
This uses a shadow for the left and right parts and adds the :after pseudo content as the bottom shadow. This avoids overlaps which make the shadow darker or missing corners.
However, this does require the background of the element to be solid.