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;
Related
I want to create something like this with CSS only, is it possible?
div {
height: 50px;
width: 200px;
background: #006B96;
box-shadow: 0px 0px 0px 4px #006B96;
border: 4px solid #fff;
margin: 0 auto;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
}
<div>
</div>
div{
height:50px;
width:200px;
background:#006B96;
box-shadow:0px 0px 0px 4px #006B96;
border:4px solid #fff;
margin:0 auto;
}
<div>
</div>
span {
display:inline-block;
padding:5px;
box-shadow:
0px 0px 0px 5px #000,
0px 0px 0px 10px #fff,
0px 0px 0px 15px #000;
}
http://jsfiddle.net/gwhq3uk6/
Try to go with Bootstrap and you will no longer have to worry about designing buttons because it is much easier get all kind of buttons and other stuff you need without writing a single line of code.
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;
I would like to achieve a CSS border similar to the one seen around the Tim Cook image on this page: http://www.macstories.net/news/tim-cook-at-d11/ — however, I would only like the border around images in the body text on my own site, not, for instance, images in the sidebar of my site.
What code would I need to achieve the cool border, and how can I target only images in the body text?
If your "body text" is, say, in a div classed as "main", you can target the images just in that section like so:
.main img {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
margin: 30px 0;
padding: 10px;
background: #FFF;
border: 1px solid #CCC;
position: relative;
display: block;
}
img{
-webkit-box-shadow:0 0px 7px rgba(0,0,0,0.3);
box-shadow:0 0 5px rgba(0,0,0,0.2);
padding:10px;
background:#fff;
border:1px solid #ccc;
width:auto;
height:auto;
}
Well i think it would be something like this for just a generic shadow effct.
The HTML:
<div id="example" class="outerglow">Full Shadow</div>
The CSS:
#example {
font-size: 1.4em;
color: #CCCCCC;
line-height: 40px;
text-align: center;
background-color: #333333;
margin: 25px auto;
padding: 5px 10px;
height: 40px;
width: 80%;}
.outerglow {
box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);}
and here is the jsfiddle to look see..
http://jsfiddle.net/KMtc6/
Forgive me if my code is sloppy or jumbled.
My problem is that for the div classes form-profile and form-profile-side, if I want 2 of those divs, they must be on the same line within the HTML:
<div class="span13">
<form class="form-profile-side"></form><form class="form-profile"></form>
</div>
if I put the second class on a new line, it messes up the layout (this is what I'm trying to do):
<div class="span13">
<form class="form-profile-side"></form>
<form class="form-profile"></form>
</div>
CSS:
.form-profile-side {
display: inline-block;
vertical-align: top;
width: 120px;
background-color: #fff;
border: 1px solid #d6d6d6;
border-right: 0;
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
border-radius: 0x 0px 0px 0px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-profile {
display: inline-block;
width: 817px;
padding: 15px 15px 15px;
background-color: #fff;
border: 1px solid #d6d6d6;
-webkit-border-radius: 0px 5px 5px 5px;
-moz-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
How do I make it so that I can create a new line in the HTML using the class, instead of having it all on one line?
JSFiddle: http://jsfiddle.net/VzTxM/4/
I believe the issue you're having (if i understand the question right) is that the display:inline-block; is adding a lil spacer when the HTML is on two seperate lines - you can fix this by flaoting the elements instead?
CSS
.form-profile-side,.form-profile {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
border: 1px solid #d6d6d6;
background-color: #fff;
float:left;
}
.form-profile-side {
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
border-radius: 0x 0px 0px 0px;
vertical-align: top;
border-right: 0;
width: 120px;
}
.form-profile {
-webkit-border-radius: 0px 5px 5px 5px;
-moz-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
padding: 15px 15px 15px;
width: 817px;
}
.clear {
clear:both;
}
HTML
<div class="span13">
<form class="form-profile-side"><br><br></form>
<form class="form-profile"><br><br></form>
<div class="clear"></div>
</div>