I have a main content div with the property;
box-shadow: inset -15px 0 15px -15px;
I wish to make it so that the div has the same box shadow on each side, but I am not sure on how to do this. Here is the JSFiddle Demo.
HTML :
<div id="content"></div>
CSS :
#content {
width: 100px;
height: 100px;
background-color: #999999;
position: absolute;
left: 10px;
top: 10px;
box-shadow: inset -15px 0 15px -15px;
}
try this
box-shadow: inset -15px 0 15px -15px, inset 15px 0 15px -15px;
Just slightly modify your original CSS code to add left and right shadow:
#content {
width: 100px;
height: 100px;
background-color: #999999;
position: absolute;
left: 10px;
top: 10px;
box-shadow: inset -15px 0 15px -15px, inset 15px 0 15px -15px;
}
That's very simple to do, according to W3SCHOOLS the synstax for box-shadow is
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
You can replace the none with inset or any other properties for the kind of shadow you want. the h-shadow is for the horizontal (left and right), the v-shadow is for the vertical (up and bottom) the blur is how sharp you want it to be and the spread is how far from each side you want it to be, also bare in mind these values are specified in px and finally color.
This is an example:
box-shadow: inset 0px 0px 5px 10px #888;
This has already been answered here
-webkit-box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.45),
inset -25px 0px 25px -25px rgba(0, 0, 0, 0.45);
-moz-box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.45),
inset -25px 0px 25px -25px rgba(0, 0, 0, 0.45);
box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.45),
inset -25px 0px 25px -25px rgba(0, 0, 0, 0.45);
Here is a jsfiddle
Try This
box-shadow: inset 0px 0px 5px 10px #8888;
Demo
Related
how might I add a shadow effect on a background image, using CSS ? I would like to have a shadow on the left, right and bottom of the background image ?
The command to add the shadow is the "box-shadow". But you can use this site to do this automatically for you:
https://www.cssmatic.com/box-shadow
There's a really handy tool that may help you here https://cssgenerator.org/box-shadow-css-generator.html.
This is an example of a shadow that appears in the areas you mentioned
box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.57);
I've made an example for you:
.shadow {
width: 90%;
margin: 20px;
height: 100px;
background: url(https://placekitten.com/640/360);
box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.57);
-webkit-box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.57);
}
<div class="shadow"></div>
div {
width: 300px;
height: 300px;
box-shadow: 0 15px 30px #888 inset
}
<div>
</div>
Refer inset property of box-shadow: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#Values
In an attempt to create shadows around custom shapes, I discovered the drop-shadow filter CSS property. However after having implemented it, I realised that it slowed the website down significantly.
I am therefore searching for an alternative to gain the same effect without compromising the load speed of the page.
The main content of the site is surrounded by a shadow-box wrapper using a box shadow, but this could not be used for the end section due to the transparent part of the background.
I am trying to achieve a shadow which resembles the shadow of the shadow-box.
Here is a jsFiddle illustrating how it currently looks
and here it can bee seen on the real site
HTML
<div class="container shadow-box no-padding"></div>
<div class="container justify-content-center">
<section class="light-bg end-section" id="portfolio"></section>
</div>
CSS
.container{
width:70%;
margin:auto;
}
.shadow-box{
background:green;
height:200px;
-webkit-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
-moz-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
-ms-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
-o-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
}
.end-section {
background: radial-gradient(circle at 50% 100%, transparent 50px, #c1c1c1 50px);
z-index: 5;
height:200px;
filter: drop-shadow(0 30px 15px rgba(0, 0, 0, 0.6))
drop-shadow(0 10px 5px rgba(0, 0, 0, 0.6));
}
.light-bg:before {
content: '';
position: absolute;
z-index: 3;
top: -50px;
left: 50%;
margin-left: -50px;
height: 50px;
width: 100px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
background: #c1c1c1;
}
I want to set box shadow inside a box or div but only at right and left sides.
I want something like this below. Please help me.
To get it to appear only on the sides you need to essentially have two different sets:
box-shadow:inset 5px 0 8px -5px #000,inset -5px 0 8px -5px #000;
You can create one inner div and one outer div. Then you need to set the shadow separately for both divs.
.outer, .inner {
width: 200px;
height: 50px;
display: inlin-block;
}
.outer {
-webkit-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75);
box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75);
}
.inner {
-webkit-box-shadow: inset -10px 0px 23px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset -10px 0px 23px -9px rgba(0,0,0,0.75);
box-shadow: inset -10px 0px 23px -9px rgba(0,0,0,0.75);
}
<div class="outer">
<div class="inner"></div>
</div>
Or you can use also one div, with 2 inset parameters:
.outer {
width: 200px;
height: 50px;
display: inlin-block;
-webkit-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75), inset -10px 0px 23px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75), inset -10px 0px 23px -9px rgba(0,0,0,0.75);
box-shadow: inset 5px 0 8px -5px #000,inset -5px 0 8px -5px #000, inset -10px 0px 23px -9px rgba(0,0,0,0.75);
}
<div class="outer">
</div>
And what about a linear-gradeint solution:
.box {
width:200px;
height:100px;
background:
linear-gradient(to left,#ccc , transparent 20%),
linear-gradient(to right,#ccc , transparent 20%);
}
<div class="box">
</div>
You can do this using the two div's. check the below code.
But it will great if you can use the background image.
<div class="div1">
<div class="div2"><div>
<div>
.div1 {
width: 200px;
height: 100px;
border: 1px solid #c51e1e;
margin: 50px;
overflow: hidden;
}
.div2 {
width: 80%;
height: 100px;
margin: 0 auto;
box-shadow: 0px 0px 27px 17px #d6cdcd;
}
try this with html:
<div id="box"></div>
and css:
#box {
border: 1px solid;
position: relative;
overflow: hidden;
}
#box:before {
content: "";
box-shadow: 0px 0px 20px 10px #888888;
position: absolute;
height: 100%;
width: 0px;
}
#box:after {
content: "";
box-shadow: 0px 0px 20px 10px #888888;
position: absolute;
height: 100%;
width: 0px;
right: 0px;
top: 0;
}
<div class="myContainer">
Some text...
</div>
Now I only want on the left side and the top of the element a box-shadow.
How can I do this?
I tried this:
.myContainer {
box-shadow: 10px 10px 5px #888888;
}
But this doesn't work.
Like this, See fiddle: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/25/
1st number - is the horizontal position (negative is left, positive right)
2nd number - is the vertical position (negative is up, positive down)
3rd number - is the blur radius
4th number - is spread radius
-webkit-box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
HTML
<div class="someDiv"></div>
CSS
.someDiv {
width: 400px;
height: 400px;
background-color: lightblue;
margin-left: 50px;
margin-top: 50px;
-webkit-box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
}
This should work :
div
{
width:400px;
height:400px;
left:45px;
box-shadow:-10px -5px 4px #ccc;
}
You can use negative values for the positioning.
box-shadow: -10px -10px 5px 0px #888888;
Use a CSS3 generator to try it out, like this one
Remember to also include the vendor specific prefixes to ensure cross browser compatibility.
-webkit-box-shadow: -10px -10px 5px 0px #888888;
-moz-box-shadow: -10px -10px 5px 0px #888888;
You can check it out with this jsfiddle
If you want to know more about the box-shadow property, then check out MDN box-shadow
Try this
div{
width:200px;
height:200px;
background-color:red;
margin:50px;
box-shadow:-10px -5px 4px #ccc;
}
<div></div>
i have a line of width: 15px; and height of 2px;
my question is, how to create the shadow only on right and left side?
This fiddle has examples showing shadows only on:
Top and bottom
Left and right
Top
With that you should be able to do any kind of shadow.
http://jsfiddle.net/rafaelchiti/5jdHW/
The code:
div {
margin-top: 20px;
margin-left: 20px;
width: 100px;
height: 100px;
}
.horizontal {
box-shadow: 0px 15px 10px -11px rgba(0, 0, 0, .1) inset,
0px -15px 10px -11px rgba(0, 0, 0, .1) inset;
}
.vertical {
box-shadow: 0px 15px 10px -11px rgba(0, 0, 0, .1) inset,
0px -15px 10px -11px rgba(0, 0, 0, .1) inset;
}
.one-side {
box-shadow: 0px 15px 10px -11px rgba(0, 0, 0, .1) inset;
}
Hope this help.
Try this (based on the link you gave in your comment above):
box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 1);
-webkit-box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 1);
You can tweak it to how you like it using the CSS3 Generator
CSS Box Shadow
Add the following class to apply shadow. Check this jsfiddle example
.shadow {
-moz-box-shadow: 3px 3px 10px 1px #000;
-webkit-box-shadow: 3px 3px 10px 1px #000;
box-shadow: 3px 3px 10px 1px #000;
}
The horizontal offset of the shadow, positive means the shadow will
be on the right of the box, a negative offset will put the shadow on
the left of the box.
The vertical offset of the shadow, a negative one means the
box-shadow will be above the box, a positive one means the shadow
will be below the box.
The blur radius (optional), if set to 0 the shadow will be sharp,
the higher the number, the more blurred it will be.
The spread radius (optional), positive values increase the size of
the shadow, negative values decrease the size. Default is 0 (the
shadow is same size as blur).
Color Hexadecimal color value.
.box {
height: 150px;
width: 300px;
margin: 20px;
border: 1px solid #ccc;
}
.top {
box-shadow: 0 -5px 5px -5px #333;
}
.right {
box-shadow: -5px 0 5px -5px #333;
}
.bottom {
box-shadow: 0 5px 5px -5px #333;
}
.left {
box-shadow: 5px 0 5px -5px #333;
}
.all {
box-shadow: 0 0 5px #333;
}
in the body put..
<div class="box top"></div>
<div class="box right"></div>
<div class="box bottom"></div>
<div class="box left"></div>
<div class="box all"></div>