I have a div tag that I want to style with rounded top corners. And, I am facing an issue with my box-radius.
.box {
width: 100px;
height: 100px;
-webkit-box-shadow: inset 0 20px 3px 1px #4D7594;
box-shadow: inset 0 20px 3px 1px #4D7594;
border-radius: 15px;
}
<div class="box">
</div>
Well, so far works good. But in this sample, if I add more px to my border-radius, it will break the inset of box-shadow.
.box {
width: 100px;
height: 100px;
-webkit-box-shadow: inset 0 20px 3px 1px #4D7594;
box-shadow: inset 0 20px 3px 1px #4D7594;
border-radius: 16px;
}
<div class="box">
</div>
You may notice that on the top area of the .box seems to have its shadow missing. This behavior only happens on firefox. And currently, I am using firefox 45.0.1.
Setting two shadows seems to fix it at this time :
.box {
width: 100px;
height: 100px;
-webkit-box-shadow: inset 0 20px 3px 1px #4D7594;
box-shadow: inset 0 18px #4D7594, inset 0 20px 3px 1px #4D7594;
border-radius: 16px;
}
<div class="box">
</div>
Related
So I have this 'floating-card' which has a box-shadow around it. On one side I want to put a colored border. But the box-shadow gives an extra white border. I want this removed but I dont know how. I want to keep the box-shadow. I tried several things including the answer of this question.
CSS Box-Shadow adds arbitrary white border to Div
To show specifically what I want removed:
The little small white border on the left of the blue.
Here is a JSFiddle and the code:
https://jsfiddle.net/pg5omtqq/
.floating-card {
background-color: white;
border-left: 5px solid blue;
box-shadow: 0px 0px 10px grey;
margin: 1.0em;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
}
<div class="floating-card">
<h3 class="tile_title">Title</h3>
</div>
EDIT: To be clear, I want to keep the box-shadow. But have the small white border removed.
This will remove the shadow on the left
-webkit-box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);
box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);
You can adjust this by using this generator box shadow.
source: https://www.cssmatic.com/box-shadow
Add to your CSS
box-shadow: none;
remove left box-shadow by using below css.
.floating-card{
background-color: white;
border-left: 5px solid blue;
-webkit-box-shadow: 0px 0px 10px 0px grey;
-moz-box-shadow: 0px 0px 10px 0px grey;
box-shadow: 0px 0px 10px 0px grey;
margin: 1.0em;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
}
<div class="floating-card">
<h3 class="tile_title">Title</h3>
</div>
-webkit-box-shadow: 2px 1px 10px grey;
-moz-box-shadow: 2px 1px 10px grey;
box-shadow: 2px 1px 10px grey;
.part-two{
float: left;
height:300px;
width: 200px;
background-color:green;
box-shadow: -10px -10px 1px red;
}
<div id="part-two" class="part-two">
</div>
in the above code i have given an outer shadow using box-shadow property,instead of that i want to give the shadow on inside of the container,is it possible to give inner shadow using box-shadow method?if yes,how?
else ,is there any methods exists to giver inner shadow using css?
Yes it is possible to add inner-shadow to an element, you just need to add inset along with your properties in box-shadow.
The presence of the inset keyword changes the shadow to one inside the
frame (as if the content was depressed inside the box). Inset shadows
are drawn inside the border (even transparent ones), above the
background, but below content.
.part-two{
float: left;
height:300px;
width: 200px;
background-color:green;
box-shadow: inset 0px 1px 10px 20px orange;
}
<div id="part-two" class="part-two">
</div>
Use this box-shadow: 10px 10px 0px 0px red inset;
.part-two{
float: left;
height:300px;
width: 200px;
background-color:green;
box-shadow: 10px 10px 0px 0px red inset;
}
<div id="part-two" class="part-two">
</div>
used to this
box-shadow:inset 5px 5px 1px red, inset 15px 15px 1px yellow;
inset as like this
.part-two{
float: left;
height:300px;
width: 200px;
background-color:green;
box-shadow:inset 5px 5px 1px red, inset 15px 15px 1px yellow;
}
<div id="part-two" class="part-two">
</div>
you looking for something like this?
.part-two
{
float: left;
height:300px;
width: 200px;
background-color:green;
box-shadow: -10px -10px 1px red;
-moz-box-shadow: inset 0 0 10px red;
-webkit-box-shadow: inset 0 0 10px red;
box-shadow: inset 0 0 10px red;
}
<div id="part-two" class="part-two">
</div>
Try this:
.part-two{
float: left;
height:300px;
width: 200px;
background-color:green;
box-shadow: inset -10px -10px 1px red;
}
I have this problem where I want to have a border and a box-shadow, but the shadow must be over the border.
The box-shadow property starts when the border ends, is it possible to move it over the border?
.border
{
border: solid rgba(128,42,42,.98) 16px;
}
.img-box-shadow
{
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
}
My HTML:
<img class="border img-box-shadow" src="img.png">
Already tried inset in my box shadow, but it didn't work!
I'm looking for this effect:
And I'm getting this result:
I think this would be much more easily achieved with two overlayed box shadows
Something like this approaches what you're looking for
box-shadow: 0 0 20px 5px #000000,
0 0 0 16px rgba(128,42,42,.98);
Seem like you want an inset box shadow, then you can use:
box-shadow: inset 0 -15px 10px -10px #444;
-moz-box-shadow: inset 0 -15px 10px -10px #444;
-webkit-box-shadow: inset 0 -15px 10px -10px #444;
Fiddle Demo
How about this one?
.ds-bottom {
position:relative;
overflow:hidden;
border-bottom:1px solid #ddd;
}
.ds-bottom:before {
content: "";
position:absolute;
z-index: 1;
width:96%;
bottom: -10px;
height: 10px;
left: 2%;
border-radius: 100px / 5px;
box-shadow:0 0 18px rgba(0,0,0,0.6);
}
You can try using inset and then lowering the alpha value of your border. It may not exactly be what you want, but it's close.
.border
{
border: solid rgba(128,42,42,.5) 4px;
}
.img-box-shadow
{
-moz-box-shadow: inset 0px 0px 20px #000000;
-webkit-box-shadow: inset 0px 0px 20px #000000;
box-shadow: inset 0px 0px 20px #000000;
}
Alternate option (borrowed from this question). Don't use the .border and just use this (you can play around with pixel values):
.img-box-shadow
{
box-shadow: rgba(0,0,0,.98) 0px 0px 3px, inset rgba(0,0,0,.98) 0px -2px 3px;
}
Here's a JSFiddle
First, you have mistake in box shadow format.
box-shadow: 0px 0px 20px #000000;
Change to
box-shadow: 0px 0px 20px 0 #000000;
Due to the right format of Box Shadow Properties
box-shadow: horizontal-length vertical-length blur-radius
spread-radius;
Next, to make it works with your requirement you must wrap your image inside div. Box-shadow wont works over border.
Here's the style
div {
display:inline-block;
padding:4px; /* Act as border width */
background:rgba(128,42,42,.98); /* Act as border color */
}
.img-box-shadow
{
box-shadow: inset 0px 0px 20px 0 #000000;
-webkit-box-shadow: inset 0px 0px 20px 0 #000000;
-moz-box-shadow: inset 0px 0px 20px 0 #000000;
}
And the HTML Markup
<div class="img-box-shadow">
<img src="http://graph.facebook.com/715380382/picture?type=large">
</div>
Check live demo http://jsbin.com/hex/1/edit
I am trying to make a custom button with a border radius and box shadow. Here is my html and css
.selectOptionButton{
display: block;
-webkit-box-shadow: inset 1px 1px 15px 2px #e7e6e0;
-moz-box-shadow: inset 1px 1px 15px 2px #e7e6e0;
box-shadow: inset 1px 1px 15px 2px #e7e6e0;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
height: 50px;
width: 100px;
background-color: #e7e6e0;
}
<div class="selectOptionButton text-center">Test</div>
For some reason when i inspect the element i see this :
.selectOptionButton {
background-color: #E7E6E0;
border-radius: 100px 100px 100px 100px;
display: block;
height: 50px;
width: 100px;
}
it's an inset color that is the same as the background color
check out this Fiddle with
-webkit-box-shadow: inset 0px 0px 15px 2px #333aaa;
-moz-box-shadow: inset 0px 0px 15px 2px #333aaa;
box-shadow: inset 0px 0px 15px 2px #333aaa;
When I try to apply a box shadow to my element that has a 3px border radius I get ugly corners with pixels of the elements background.
HTML
<div id="wrapper">
</div>
CSS
body {
background: #fff;
}
#wrapper {
background: black;
width: 300px;
height: 300px;
margin: 40px auto;
border-radius: 3px;
-moz-box-shadow: inset 0 0 5px 4px yellow;
-webkit-box-shadow: inset 0 0 5px 4px yellow;
box-shadow: inset 0 0 5px 4px yellow;
}
JSFIDDLE
http://jsfiddle.net/PCzFC/1/
If you look at the fiddle you see that the black background is in the corners. Is it supposed to be like this or is it a bug? I use Firefox.
This is a known bug in Google Chrome, perhaps it's present in Firefox as well.
http://code.google.com/p/chromium/issues/detail?id=29427
You can create the same effect without the inset. Make a yellow wrapper around it.
body {
background: #fff;
}
#wrapper {
background: black;
width: 290px;
height: 290px;
border-radius: 3px;
-moz-box-shadow: 0 0 5px 1px black;
-webkit-box-shadow: 0 0 5px 1px black;
box-shadow: 0 0 5px 1px black;
margin: 5px;
}
.yellow {
background: yellow;
border-radius: 6px;
overflow: hidden;
width: 300px;
height: 300px;
margin: 40px auto;
}
<div class="yellow">
<div id="wrapper">
</div>
</div>
http://jsfiddle.net/PCzFC/65/
What shadow: inset does is to add shadows inside the box. If you remove inset on all the box shadows, the shadows will move to the outside of the box.
it is not a bug this will happen because you use inset shadow effect and if you can understand css then inset meaning is inside so it's normal if u remove inset from your code then it should be look fine or if you need shadow effect inside the box then you have to choose color and matched it to box color
or you can remove border radius from your code then it should be look fine
#wrapper {
background: black;
width: 300px;
height: 300px;
margin: 40px auto;
-moz-box-shadow: inset 0 0 5px 4px yellow;
-webkit-box-shadow: inset 0 0 5px 4px yellow;
box-shadow: inset 0 0 5px 4px yellow;
}