This question already has answers here:
Box-shadow only on right and left
(3 answers)
Closed 3 years ago.
I currently have global box shadow on a site -
box-shadow: 0 0 5px rgba(0,0,0,.1);
But how do I modify the above so that it only appears on left or right side or both left and right?
Remember that you can use negative values for spread and multiple values for box-shadow.
.shadow {
width: 30%;
height: 40px;
margin: 2rem;
box-shadow:
-5px 0px 5px -6px rgba(0,0,0,1),
5px 0px 5px -6px rgba(0,0,0,1);
}
<div class="shadow"></div>
Another solution could be to use ::before and ::after and filter: blur. The benefits here is that you can transform: rotate the shadows to make it look like the parent element is slightly tilting.
.shadow {
position: relative;
margin: 2rem;
width: 30%;
height: 30px;
background-color: white;
}
.shadow::before,
.shadow::after {
z-index: -1;
content: '';
position: absolute;
top: 2px;
bottom: 2px;
background-color: #000;
width: 2px;
filter: blur(2px);
}
.shadow::after {
right: 0px;
}
.tilting.shadow::before,
.tilting.shadow::after
{
height: 4px;
top: initial;
bottom: 0px;
width: initial;
}
.tilting.shadow::before {
left: 0px;
right: 10px;
transform: rotate(-3deg);
}
.tilting.shadow::after {
left: 10px;
right: 0px;
transform: rotate(3deg);
}
<div class="shadow"></div>
<div class="tilting shadow"></div>
Try this:
box-shadow:
5px 0 5px -2px rgba(0,0,0,.5),
-5px 0px 5px -2px rgba(0,0,0,.5);
I want an animation like this:
(The lower blue line is an image of movement. lol)
I tried to make with cubic-bezier but it didn't work..
I don't know much about css animation, but cubic-bezier can add points other than the first and last?
In my opinion, I feel like I should increase points..
Q. What kind of curve should I use for css animation like this?
That's not possible with CSS animation -Gui Magnani
If you manualy set the animations times and keyframes you can get close to your drawing.
.container {
position: relative;
height: 90vh;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
width: 15px;
height: 15px;
box-shadow: 0px 0px 0px 5px green;
animation: pulse 2s linear infinite;
}
#keyframes pulse {
0% {
box-shadow: 0px 0px 0px 10px green;
width: 1px;
height: 1px;
}
20% {
box-shadow: 0px 0px 0px 100px green;
width: 1px;
height: 1px;
}
30% {
box-shadow: 0px 0px 0px 90px green;
width: 1px;
height: 1px;
}
90% {
box-shadow: 0px 0px 0px 10px green;
width: 300px;
height: 300px;
}
95% {
box-shadow: 0px 0px 0px 0px green;
width: 300px;
height: 300px;
}
100% {
box-shadow: 0px 0px 0px 0px green;
width: 290px;
height: 290px;
}
}
<div class="container">
<div class="circle"></div>
</div>
It's been a couple hours already that I am struggling with my CSS.
I'm trying to add a box-shadow on an element of my website that is composed of 3 divs : #top #content and #bot.
Here is a picture to help you visualize what I deal with :
Having the box-shadow on the left and right of the div #content was kind of the easy part, but I'm really struggling for the top and bottom part. I can't make anything that looks decently clean.
Here is my code :
body {
margin-top: 30px;
}
div#content {
padding: 20px 30px 20px 30px;
color: #515348;
font-size: 76%;
line-height: 1.6em;
height: 100px;
background: #FFF;
width: 240px;
margin-right: auto;
margin-left: auto;
border-left: 1px solid grey;
border-right: 1px solid grey;
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 8px 0 14px -4px rgba(33, 33, 33, 0.6), -8px 0 14px -4px rgba(33, 33, 33, 0.5);
}
#top {
background: #FFF;
height: 10px;
width: 300px;
margin: 0 auto;
position: relative;
-webkit-border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
behavior: url(/PIE.htc);
border-top: 1px solid grey;
border-left: 1px solid grey;
border-right: 1px solid grey;
box-shadow: 0 9px 0px 0px white, -8px 0 14px -4px rgba(33, 33, 33, 0.5), 8px 0 14px -4px rgba(33, 33, 33, 0.6), -8px 0 14px -4px rgba(33, 33, 33, 0.5);
}
#bot {
background: #FFF;
height: 10px;
width: 300px;
margin: 0 auto;
position: relative;
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px;
behavior: url(/PIE.htc);
border-bottom: 1px solid grey;
border-left: 1px solid grey;
border-right: 1px solid grey;
box-shadow: 8px 4px 14px 4px rgba(33, 33, 33, 0.5), 0 9px 0px 0px white, 8px 0 14px -4px rgba(33, 33, 33, 0.6), -8px 0 14px -4px rgba(33, 33, 33, 0.5);
}
<div id="top"></div>
<div id="content"></div>
<div id="bot"></div>
Any idea about making this thing a bit "cleaner" ?
Quick Edit: The box-shadow on the bot part actually didn't look that bad on my screen, i had found some better settings that I since lost by trying different configurations.
Shadow all around the shape:
The image provided in question (when seen along with the snippet) is a bit confusing on whether you are looking for a shadow on only the sides (or) for the entire shape as a whole.
If you are looking to add a shadow to the entire shape then one option is to add one pseudo-element to the container element such that it is equal to the height of the container + the top + the bottom element. This pseudo-element should also be given border-radius and be positioned above the container by the same no. of pixels as the height of the top element (inversed). Adding the required box-shadow to this pseudo-element will produce the expected output.
body {
margin-top: 30px;
}
div#content {
position: relative;
height: 100px;
width: 240px;
padding: 20px 30px 20px 30px;
margin-right: auto;
margin-left: auto;
color: #515348;
font-size: 76%;
line-height: 1.6em;
background: #FFF;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
div#content:before {
position: absolute;
content: '';
left: 0px;
top: -10px; /* positioning above makes shadow extend above */
height: calc(100% + 20px); /* to offset for top and bottom */
width: 100%;
border-radius: 8px;
z-index: -1; /* to send the elements and their shadow behind */
box-shadow: 6px 0px 6px 0px rgba(33, 33, 33, 0.25), -6px 0px 6px 0px rgba(33, 33, 33, 0.25), 0px 6px 6px 0px rgba(33, 33, 33, 0.25), 0px -6px 6px 0px rgba(33, 33, 33, 0.25);
}
#top {
position: relative;
height: 10px;
width: 300px;
margin: 0 auto;
background: #0F0;
border-radius: 8px 8px 0px 0px;
border: 1px solid grey;
border-width: 1px 1px 0px 1px;
}
#bot {
position: relative;
height: 10px;
width: 300px;
margin: 0 auto;
background: #00F;
border-radius: 0px 0px 8px 8px;
border: 1px solid grey;
border-width: 0px 1px 1px 1px;
}
<div id="top"></div>
<div id="content"></div>
<div id="bot"></div>
Shadow all around shape but fades towards top and bottom:
In this approach the shadow is applied all around the shape but it gradually fades towards the top and bottom. These are all the possible variants based on description, image in question and snippet. You can choose the one which suits you best.
body {
margin-top: 30px;
}
div#content {
position: relative;
height: 100px;
width: 240px;
padding: 20px 30px 20px 30px;
margin-right: auto;
margin-left: auto;
color: #515348;
font-size: 76%;
line-height: 1.6em;
background: #FFF;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
div#content:before {
position: absolute;
content: '';
left: 0px;
top: -8px; /* positioning above makes shadow extend above */
height: calc(100% + 16px); /* to offset for top and bottom */
width: 100%;
border-radius: 8px;
z-index: -1; /* to send the elements and their shadow behind */
box-shadow: 6px 0px 6px 0px rgba(33, 33, 33, 0.25), -6px 0px 6px 0px rgba(33, 33, 33, 0.25), 0px 0px 6px 0px rgba(33, 33, 33, 0.25), 0px 0px 6px 0px rgba(33, 33, 33, 0.25);
}
#top {
position: relative;
height: 10px;
width: 300px;
margin: 0 auto;
background: #0F0;
border-radius: 8px 8px 0px 0px;
border: 1px solid grey;
border-width: 1px 1px 0px 1px;
}
#bot {
position: relative;
height: 10px;
width: 300px;
margin: 0 auto;
background: #00F;
border-radius: 0px 0px 8px 8px;
border: 1px solid grey;
border-width: 0px 1px 1px 1px;
}
<div id="top"></div>
<div id="content"></div>
<div id="bot"></div>
Shadow only on sides:
Looking closely at the original image provided in the question, one thing that I can see is that you don't actually need a box-shadow on the top and bottom elements. You just need shadow on the container which extends a little above and below it. This can be achieved in a very hacky way by using just the container element alone but that's just way too complex and ugly.
So, the alternate option is to add one pseudo-element to the container element and position it a little bit above the container. Once box-shadow is added to this pseudo-element, the expected appearance will be achieved.
Note: In the below snippet, I've added a red colored shadow and also colored the top and bottom div just to illustrate how the shadow extend above and below the #content. I've also removed extra properties which are no longer required and shortened a few others.
I would also strongly recommend converting the three div into one as it would make the entire thing a lot more simpler.
body {
margin-top: 30px;
}
div#content {
position: relative;
height: 100px;
width: 240px;
padding: 20px 30px 20px 30px;
margin-right: auto;
margin-left: auto;
color: #515348;
font-size: 76%;
line-height: 1.6em;
background: #FFF;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
div#content:before {
position: absolute;
content: '';
left: -1px;
top: -7px; /* positioning above makes shadow extend above */
height: calc(100% + 14px); /* to cover top and bottom */
width: 100%;
z-index: -1; /* to send the elements and their shadow behind */
box-shadow: 6px 0px 12px -6px rgba(255, 0, 0, 0.75), -6px 0px 12px -6px rgba(255, 0, 0, 0.75);
}
#top {
position: relative;
height: 10px;
width: 300px;
margin: 0 auto;
background: #0F0;
border-radius: 8px 8px 0px 0px;
border: 1px solid grey;
border-width: 1px 1px 0px 1px;
}
#bot {
position: relative;
height: 10px;
width: 300px;
margin: 0 auto;
background: #00F;
border-radius: 0px 0px 8px 8px;
border: 1px solid grey;
border-width: 0px 1px 1px 1px;
}
<div id="top"></div>
<div id="content"></div>
<div id="bot"></div>
Whats the point of having three divs instead of one?
box {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 300px;
height: 120px;
background: #FFF;
border: 1px solid grey:
}
and then apply box shadow on selector as you wanted
I would like to create this page (see image) with css shadow. Is this possible? So to have the page peel css box shadow bottom left and right and the shadow left and right?
You can do this with pseudo elements :before and :after. Creating two new areas which have their own box-shadows and placing them where required you can create the illusion of the shadow getting bigger as the page goes down.
body {
background: lightgrey;
}
div {
background: white;
margin: 40px auto;
height: 500px;
width: 300px;
position: relative;
padding: 10px;
}
div:before,
div:after {
height: 97%;
z-index: -10;
position: absolute;
content: "";
bottom: 15px;
left: 8px;
width: 30%;
top: 2%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 5px rgba(0, 0, 0, 0.3);
transform: rotate(1deg);
}
div:after {
transform: rotate(-1deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 5px rgba(0, 0, 0, 0.3);
}
<div>
test
</div>
An alternative is using CSS transforms to change the perspective of a single :before pseudo element.
This was done by Harry **
body {
background: lightgrey;
}
div {
background: white;
margin: 40px auto;
height: 500px;
width: 300px;
position: relative;
padding: 10px;
box-shadow: 10px 0px 5px -10px gray, -10px 0px 5px -10px gray;
}
div:after {
content: '';
position: absolute;
bottom: 10px;
left: 0px;
height: 50%;
width: 100%;
transform-origin: 50% 100%;
transform: perspective(100px) rotateX(1deg);
box-shadow: 5px 0px 10px gray, -5px 0px 10px gray;
z-index: -1;
}
<div></div>
CSS :before & :after
I have a square div with rounded corners. Inside this div, I need to make this shape:
I want to do it with pure css, but there are two problems:
Little 1px green artifacts I can't get rid off (you can see them on the bottom and right sides)
I need a 1px red border around #login_form to also appear on top of my oval shapes.
Maybe there is a better way to cut the ovals.
Here is a jsfiddle of the below:
#login_form {
margin-left: auto;
margin-right: auto;
position: relative;
width: 200px;
height: 200px;
background: red;
border: 1px solid black;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
#white_ovale {
position: absolute;
right: -10px;
bottom: -10px;
width: 125px;
height: 80px;
background: white;
-webkit-border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
-moz-border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
}
#green_ovale {
position: absolute;
right: -21px;
bottom: -21px;
width: 139px;
height: 75px;
border: 0px;
background: #72B038;
-webkit-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-moz-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-webkit-box-shadow: inset -10px -10px 0px 10px white;
-moz-box-shadow: inset -10px -10px 0px 10px white;
box-shadow: inset -10px -10px 0px 10px white;
}
<div id="login_form">
<div id="white_ovale"></div>
<div id="green_ovale"></div>
</div>
you need overflow: hidden
you need a 3rd inner div which adds the border (Just think of an independent border that stacks i top of the others)
BTW: Don't id everthing. Use classes. Use id only if you need to. And try not the nest ids.
As a rule of thumb I use only class for CSS and idfor JS only
http://jsfiddle.net/Lt4x3ufg/1/
.login_form {
margin-left:auto;
margin-right:auto;
position: relative;
width: 200px;
height: 200px;
background: red;
border:1px solid red;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
overflow: hidden;
}
.login_form .border {
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
border: 1px solid red;
border-radius: 10px;
}
.login_form .white_ovale {
position: absolute;
right: -10px;
bottom: -10px;
width: 125px;
height: 80px;
background: white;
-webkit-border-radius:
225px 0px 7px 0px / 150px 0px 7px 0px;
-moz-border-radius:
225px 0px 7px 0px / 150px 0px 7px 0px;
border-radius:
225px 0px 7px 0px / 150px 0px 7px 0px;
}
.login_form .green_ovale {
position: absolute;
right: -21px;
bottom: -21px;
width: 139px;
height: 75px;
border: 0px;
background: #72B038;
-webkit-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-moz-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-webkit-box-shadow: inset -10px -10px 0px 10px white;
-moz-box-shadow: inset -10px -10px 0px 10px white;
box-shadow: inset -10px -10px 0px 10px white;
}
<div class="login_form">
<div class="white_ovale"></div>
<div class="green_ovale"></div>
<div class="border"></div>
</div>
Single element solution
There is no need for extra markup. We can create:
the two shapes inside the div with ::before and ::after
the red border with the containing div itself
The excess background is cut off with overflow: hidden
Nice Advantage: Because IE 8 does not support the border-radius property, and will render an ugly square, we can use the double colon (::) for the pseudo elements. IE 8 does not recognise this syntax and will render just the red box. This is the modern syntax and valid CSS.
Note: For child elements to overlap the green shape, they should be given position: relative and z-index: 1
Browser Compatibility: Due to the border-radius property, IE 9 +. It is unlikely that you need the browser prefixes for the border-radius property.
Complete Example
I have condensed the CSS as much as possible.
.login_form {
margin: auto;
position: relative;
width: 200px;
height: 200px;
background: red;
border-radius: 10px;
overflow: hidden;
border: 1px solid red;
}
.login_form::before,
.login_form::after {
content: '';
display: block;
position: absolute;
right: -10px;
bottom: -10px;
width: 125px;
height: 80px;
background: white;
border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
}
.login_form::after {
right: -31px;
bottom: -21px;
width: 149px;
height: 75px;
background: #72B038;
border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
}
<div class="login_form"></div>