I'm trying to color two adjacent DIV's with box shadows that extend into each others paths. For some reason the box shadow of one of the elements will bleed onto the top of the other div creating an ugly effect.
Here is the current effect: https://imgur.com/Gs3hT5P
But I am attempting to make it look like this: https://imgur.com/eBQLGCv
The code for what I have is as follows, keep in mind the expected result is not coded in HTML/CSS so maybe what I'm trying to accomplish is not possible with CSS as it is.
span {
position: relative;
display: inline-block;
background: #fff;
width: 40px;
height: 20px;
margin-right: 7px;
border-radius: 1px;
}
span:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
span.red {
box-shadow: 0px 0px 30px 10px #ff0000;
}
span.blue {
box-shadow: 0px 0px 30px 10px #00ccff;
}
<span class="red"></span>
<span class="blue"></span>
A solution is to set the shadows to the before pseudo-elements instead:
span.red::before {
box-shadow: 0px 0px 30px 10px #ff0000;
}
span.blue::before {
box-shadow: 0px 0px 30px 10px #00ccff;
}
Since you set their z-index to -1, those pseudo-elements will be behind their parents, i.e. the span elements.
Update: you fixed the HTML, so for information purposes I let what I wrote below.
Also don't forget to close your span elements this way (see HTML5 standard for more details):
<span class="red"></span>
<span class="blue"></span>
I know about the box-shadow property in CSS, but this produces a shadow that looks like being projected on a wall right behind the element. I need to create a shadow that looks like the element is standing on the ground like this:
This is what I have so far:
div {
display: inline-block;
height: 150px;
width: 150px;
background: url(https://via.placeholder.com/150);
margin-left: 20px;
box-shadow: -5px 5px 10px 0 rgba(0,0,0,0.75);
}
<div></div>
<div></div>
You can achieve this without using the box-shadow property on the element itself, but on the pseudo element ::before.
transform: skewX(60deg); will make it look like the light source is coming from the side
height: 10%; will make it look like projected on the ground
width: 70% and some positioning will hide the actual element
And at last box-shadow: -25px -4px 4px 0 rgba(0,0,0,0.75); will produce the shadow
Of course for older browsers you should use vendor prefixes.
div {
position: relative;
display: inline-block;
height: 150px;
width: 150px;
background: url(https://via.placeholder.com/150);
margin-left: 30px;
}
div::before {
content: "";
position: absolute;
z-index: -1;
bottom: 0;
left: 15px;
height: 10%;
width: 70%;
box-shadow: -25px -4px 4px 0 rgba(0,0,0,0.75);
transform: skewX(60deg);
}
<div></div>
<div></div>
I have one problem with internet explorer about css div positioning.
I have created this DEMO from codepen.io .
If you check this demo with chrome or firefox then you can see the .test div positioning vorking correctly but when you open the demo with internet explorer then you can see the .test div shifted to the left side. How can i fixed this problem to work all browser anyone can help me in this regard ?
.test {
display: block;
position: absolute;
height: auto;
top: 0;
left: 0;
right: 0;
max-width: 580px;
min-width: 300px;
margin-top: 64px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
padding-top: 2px;
background-color: #f7f7f7;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
min-height: 840px;
}
.header {
height: 12rem;
background: #009688;
}
<div class="test"></div>
position : absolute
The element is positioned relative to its first positioned (not static) ancestor element.
So you need to specify position (position:relative | fixed | absolute i.e. any position apart form static) to the parent (this case body or html)
It works fine without position: absolute;
https://jsfiddle.net/agnmx7s6/1/
To center align the DIV below code enough.
body{text-align:center}
Remove the below code in .text class
position: absolute;
You can achieve this without absolute positioning.
Please check the fiddle - https://jsfiddle.net/afelixj/agnmx7s6/4/
Also added negative margin-top to the center div.
I simply need the form to be within the center of the screen, and for its width to be 325px. Currently it is slightly to the left of the center. You can see here. The text that says "In the middle" is not directly in the center of the form.
How do I make the form centered horizontally no matter the viewport size?
Here is the form HTML:
<div class='form animated flipInX'>
<h2>Sign up Today</h2>
<form>
<input placeholder='Your Email Address' type='text'>
<button class='animated infinite pulse'>Let's Go!</button>
</form>
</div>
and here's a codepen
Any suggested code changes is great, thanks!
I just look at your code and change some.
YOUR CSS
.form {
position: absolute; // remove this one
background: #fff;
width: 325px;
margin: -140px 0 0 -182px; // change this code to margin: 0 auto;
padding: 40px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
TRY THIS CSS
.form {
background: #fff;
margin: 0 auto;
width: 325px;
padding: 40px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
JSFiddle!
Hope it helps :)
Unless I'm missing something
change this rule:
margin: -140px 0 0 -182px;
to this:
margin: -140px 0 0 -200px;
So the total rule set for the .form class would be
.form {
position: absolute;
top: 50%;
left: 50%;
background: #fff;
width: 325px;
margin: -140px 0 0 -200px;
padding: 40px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
I have updated your codepen - http://codepen.io/anon/pen/MYVPNR
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>