How is this styling achieved using html and css? It looks like three divs, however when inspected through the console, it appears that ::before might be being used.
Also does anyone know what this kind of style might be called so I can update the title of this question to be more specific?
I took this image and example from here http://todomvc.com/examples/react/#/
Looking into code, it's pretty simple to find how they achieved this effect. Stacked box-shadows.
.footer:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 50px;
overflow: hidden;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
0 8px 0 -3px #f6f6f6,
0 9px 1px -3px rgba(0, 0, 0, 0.2),
0 16px 0 -6px #f6f6f6,
0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
But surely there are more ways of doing this, depending on your needs.
I have multiple sections placed one after another, each of them should drop shadow on the next one. Number of sections might change
My current idea is to create about 10 css rules like
section {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
section:nth-child(1){
z-index:10
}
section:nth-child(2) {
z-index:9
}
...
This approach has obvious flaw, so my question is - is there more elegant way to achieve this using only html/css?
Set z-index automatically somehow or make shadows in completely different way?
It's actually possible without using JavaScript or a pseudo-element.
Just using the transform-style: preserve-3d property and a specific rotation.
.section {
height: 32px;
width: 100%;
background: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transform: rotateX(1deg);
}
.wrapper {
transform: rotateX(-1deg);
transform-style: preserve-3d;
}
<div class="wrapper">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
It's impossible to do it via html/css. But you can use javascript:
for (var i=$("section").length; i > 1; i++){
$("section:nth-child(" + i +")").css ({"z-index":i});
}
And css:
section {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
I sit with a little teasing at the Responsive design on my page...
In a PC browser all is as it should ..
But on other mobile devices, the boxes not really fit ...
The site is www.iværksætterpodcast.dk
here can you see the problem from an iphone 5 browser.
http://mobiletest.me/iphone_5_emulator/ # u = http://iværksætterpodcast.dk
So if you click load the page from a mobile browser and brows through the menu, you'll see the page doesn't fit.
I tried to chance this:
page_content {
width: 824px;
opacity: 0.8;
overflow: hidden;
margin: 50px auto 120px;
padding: 5px 0 30px;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
but that doesn't help.
I think its something with: media queries maybe?
Well if you some kind can install a plugin with a responsive menu which will fix my other issue, that would be fine aswell.
Hope you can help ...
How would something like this do for you. You can expand the window to see it is responsive.
.wrap {
max-width:960px;
margin:0 auto;
}
.page-content {
width: 92%;
float:left;
opacity: 0.8;
overflow: hidden;
margin:10px 2%;
padding:20px 2%;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
Check it out on fiddle
I have a container div which, inside, has an inner div. I would like it for my outer div to grow (in height) alongside the contents of its inner div. I've set a minimum height, however the size of the outer div never has a height different from the minimum one I have set.
This is the html:
<div id="containerDiv">
<div class="innerDiv">
<div id="header" class="layout">...</div>
<div id="mainMenu" class="layout">...</div>
<div id="content" class="layout">...</div>
<div id="footer" class="layout">...</div>
</div>
</div>
This is the CSS:
#containerDiv {
background-image: url('/Content/images/backgroundimage.png');
min-height: 760px;
width: 100%;
border-radius: 1px;
box-shadow: 0 96px 86px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
overflow: auto;
}
.innerDiv{
border-radius: 1px;
-webkit-border-radius: 1px;
box-shadow: 0 0 86px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
position: absolute;
background-color: white;
}
This fiddle should help see my problem. The red div should be the same height as the white one. The width is ok, it is supposed to be 100%.
http://jsfiddle.net/arrsoph87/euB8H/
Based on this solution I tried setting the overflow property to auto (in the container), with no luck.
Based on this solution, I tried setting the container's property float, to left. This didn't work either.
I also tried adding right after this line
<div id="footer" class="layout">...</div>
(meaning, right before closing the inner div), to add this line based on another post
<div style="clear:both;"></div>
Also couldn't get this to work. Any suggestions?
Change overflow: auto to overflow: hidden. That oughta work.
#containerDiv {
background-image: url('/Content/images/backgroundimage.png');
min-height: 760px;
width: 100%;
border-radius: 1px;
-webkit-border-radius: 1px;
-o-border-radius: 3px;
box-shadow: 0 96px 86px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
overflow: hidden; // <-------
}
This typically happens if your innerDiv is floating right or left. You seem to not have added the class definition of innerDiv.
Usually the solution to this is to add after the end tag of innerDiv (and not before it).
Ok, the problem seemed to be that the position:absolute property of the innerDiv. I changed it to relative and it worked. The following would be the relevant HTML:
<div id="containerDiv">
<div class="innerDiv">
<div id="header" class="layout">HEADER</div>
<div id="mainMenu" class="layout">MAIN MENU</div>
<div id="content" class="layout">CONTENT</div>
<div id="footer" class="layout">FOOTER</div>
</div>
</div>
And the CSS:
#containerDiv
{
background-image: url('/Content/images/backgroundimage.png');
min-height:760px;
width: 100%;
border-radius: 1px;
-webkit-border-radius: 1px;
box-shadow: 0 96px 86px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
overflow:hidden; /*added*/
/* removed overflow:auto; */
}
.innerDiv
{
border-radius: 1px;
-webkit-border-radius: 1px;
box-shadow: 0 0 86px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
position: relative; /*added*/
/*removed position:auto;*/
left:230px; /*added*/
background-color:white;
width: 100px;
}
I placed it in this new fiddle.
http://jsfiddle.net/arrsoph87/BC5n8/
Any way to get box-shadow on left & right (horizontal?) sides only with no hacks or images. I am using:
box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);
But it gives shadow all around.
I have no borders around the elements.
NOTE: I suggest checking out #Hamish's answer below; it doesn't involve the imperfect "masking" in the solution described here.
You can get close with multiple box-shadows; one for each side
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
http://jsfiddle.net/YJDdp/
Edit
Add 2 more box-shadows for the top and bottom up front to mask out the that bleeds through.
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);
http://jsfiddle.net/LE6Lz/
I wasn't satisfied with the rounded top and bottom to the shadow present in Deefour's solution so created my own.
inset box-shadow creates a nice uniform shadow with the top and bottom cut off.
To use this effect on the sides of your element, create two pseudo elements :before and :after positioned absolutely on the sides of the original element.
div:before, div:after {
content: " ";
height: 100%;
position: absolute;
top: 0;
width: 15px;
}
div:before {
box-shadow: -15px 0 15px -15px inset;
left: -15px;
}
div:after {
box-shadow: 15px 0 15px -15px inset;
right: -15px;
}
div {
background: #EEEEEE;
height: 100px;
margin: 0 50px;
width: 100px;
position: relative;
}
<div></div>
Edit
Depending on your design, you may be able to use clip-path, as shown in #Luke's answer. However, note that in many cases this still results in the shadow tapering off at the top and bottom. This taper is subtle and depending on your colour scheme and blur radius you may find it acceptable. In this example I have added a 2nd box to make the taper easy to see:
div {
width: 100px;
height: 50px;
background: #EEE;
box-shadow: 0 0 15px 0px #000;
clip-path: inset(0px -15px 0px -15px);
position: relative;
margin: 0 50px;
}
<div>1</div>
<div>2</div>
Negative spread and Masking shadow
CSS box-shadow uses 4 parameters: h-shadow, v-shadow, blur, spread:
box-shadow: 10px 0 8px -8px black;
The blur parameter adds the gradient effect, but adds also a little shadow on top and bottom borders. To get rid of this side effect we can use:
Negative spread reduces the shadow on all borders: you can play with it trying to remove that little vertical shadow without affecting too much the one obn the sides (it's easier for small shadows, 5 to 10px.)
Masking shadows of the same color of the background (white in this case), which allows for ticker shadows. Note that this masking shadow needs to have blur = 0 to fully cover the side effects.
Here two examples, the second one uses Masking shadow:
div{
width: 100px;
height: 100px;
border: 1px solid green;
margin: 10px;
float: left;
}
#example1{
box-shadow: -10px 0 8px -8px black, 10px 0 8px -8px black;
}
#example2{
box-shadow:
0 -6px white,
0 6px white,
-7px 0 4px -3px black,
7px 0 4px -3px black;
}
<div id="example1"></div>
<div id="example2"></div>
If none of these approaches suit your needs, you can also add an absolute div on the side of any existing divs.
Just remember to set the container div as position: relative so this absolute div will stay inside.
#example3 {
position: relative;
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid green;
}
.shadow {
position: absolute;
height: 100%;
width: 4px;
left: 0px;
top: 0px;
box-shadow: -4px 0 3px black;
}
<div id="example3">
content here
<div class="shadow"></div>
</div>
Try this, it's working for me:
box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
clip-path is now (2020) the best way I have found to achieve box-shadows on specific sides of elements, especially when the required effect is a "clean cut" shadow at particular edges, like this:
.shadow-element {
width: 100px;
height: 100px;
background-color: #FFC300;
box-shadow: 0 0 10px 5px rgba(0,0,0,0.75);
clip-path: inset(0px -15px 0px -15px);
/* position and left properties required to bring element out from edge of parent
so that shadow can be seen; margin-left would also achieve the same thing */
position: relative;
left: 15px;
}
<div class="shadow-element"></div>
...as opposed to an attenuated/reduced/thinning shadow like this:
.shadow-element {
width: 100px;
height: 100px;
background-color: #FFC300;
box-shadow: 15px 0 15px -10px rgba(0,0,0,0.75), -15px 0 15px -10px rgba(0,0,0,0.75);
/* position and left properties required to bring element out from edge of parent
so that shadow can be seen; margin-left would also achieve the same thing */
position: relative;
left: 15px;
}
<div class="shadow-element"></div>
Simply apply the following CSS to the element in question:
box-shadow: 0 0 Xpx Ypx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);
Where:
Apx sets the shadow visibility for the top edge
Bpx right
Cpx bottom
Dpx left
Enter a value of 0 for any edges where the shadow should be hidden and a negative value (the same as the combined result of the blur radius + spread values - Xpx + Ypx) to any edges where the shadow should be displayed.
Another way is with overflow-y:hidden on the parent with padding:
body {
padding: 30px;
}
#wrap {
overflow-y: hidden;
padding: 0 10px;
}
#wrap > div {
width: 100px;
height: 100px;
box-shadow: 0 0 20px -5px red;
}
<div id="wrap">
<div></div>
</div>
You must use the multiple box-shadow; . inset property makes it look nice and inside:
div {
box-shadow: inset 0 12px 15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px 8px -4px rgba(31, 73, 125, 0.8);
width: 100px;
height: 100px;
margin: 50px;
background: white;
}
<div></div>
This works fine for all browsers:
-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
-moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
For a nice inset shadow in right and left sides on images, or any other content, use it this way (the z-index:-1 does a nice trick when showing images or inner objects with insets):
.shadowcontainer{
display:inline-flex;
box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9);
}
.innercontent{
z-index:-1
}
<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>
In some situations you can hide the shadow by another container. Eg, if there is a DIV above and below the DIV with the shadow, you can use position: relative; z-index: 1; on the surrounding DIVs.
Another idea could be creating a dark blurred pseudo element eventually with transparency to imitate shadow. Make it with slightly less height and more width i.g.
You can use 1 div inside that to "erase" the shadow:
.yourdiv{
position:relative;
width:400px;
height:400px;
left:10px;
top:40px;
background-color:white;
box-shadow: 0px 0px 1px 0.5px #5F5F5F;
}
.erase{
position:absolute;
width:100%;
top:50%;
height:105%;
transform:translate(0%,-50%);
background-color:white;
}
You can play with "height:%;" and "width:%;" to erase what shadow you want.
I tried to copy the bootstrap shadow-sm just in the right side, here is my code:
.shadow-rs{
box-shadow: 5px 0 5px -4px rgba(237, 241, 235, 0.8);
}
This worked for me:
box-shadow: 0 5px 5px 0 #000;
If you want your div to have an arrow on top of it, use this:
box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
For horizontal only, you can trick the box-shadow using overflow on its parent div:
.parent{
overflow:hidden;
}
.box-shadow{
box-shadow: box-shadow: 0 5px 5px 0 #000;
}
<div class="parent">
<div class="box-shadow">content</div>
</div>