hey guys i was playing around with css box-shadow property and I'm struggling with it a little bit. Im trying to create shadow on a box but I want to apply shadow only on the top,bottom and left side of my div.
here is my css code until now but it is going to apply for all of the 4 sides which i do not want..
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
Thanks
Try this:
-webkit-box-shadow: -8px 3px 25px 1px rgba(0,0,0,0.75);
-moz-box-shadow: -8px 3px 25px 1px rgba(0,0,0,0.75);
box-shadow: -8px 3px 25px 1px rgba(0,0,0,0.75);
Also you can play around here.
Related
I am attempting to create an inner border to an image using box-shadow. I'm using code I copied from a CSS generator and it does not work on my image. How can I get this code to work with my image?
I am trying to make a top and a bottom border only. No sides.
http://codepen.io/trevoray/pen/NPxyzG
.bannerImages {
-webkit-box-shadow: inset 0px -17px 0px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: inset 0px -17px 0px 0px rgba(0, 0, 0, 1);
box-shadow: inset 0px -17px 0px 0px rgba(0, 0, 0, 1);
}
<img class="bannerImages" src="http://webtest-community.canoo.com/wiki/space/SnipSnap/config/webtest_tag_rgb_pos_small.jpg" />
You can use outline to get a border inside the image
.bannerImages {
outline: 1px solid red;
outline-offset: -4px;
}
<img class="bannerImages" src="http://webtest-community.canoo.com/wiki/space/SnipSnap/config/webtest_tag_rgb_pos_small.jpg" />
More info: http://caniuse.com/#search=outline
Here's how. The trick is to wrap your image in another element and use an absolutely positioned before pseudo-element.
The problem with using an inset box-shadow on an image appears to be that the shadow is rendered behind the image.
If you really have your heart set on using a box-shadow, you will need an image with a transparent background... (Convert your jpg to png and delete the background)
.bannerImages {
-webkit-box-shadow: inset 0px 7px 10px -4px #000 inset, 0px -7px 10px -4px #000 inset;
-moz-box-shadow: inset 0px 7px 10px -4px #000 inset, 0px -7px 10px -4px #000 inset;
box-shadow: 0px 7px 10px -4px #000 inset, 0px -7px 10px -4px #000 inset;
}
<img class="bannerImages" src="http://i.stack.imgur.com/rCgfw.png" />
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 want my input form has inset shadow, but it doesn't work. Here my code
#searchopt div input[type='text'],#searchopt div select{
width:220px;height:30px;padding:6px;
/* Overall Layout: box shadow insect*/
-webkit-box-shadow: inset 10px 3px 296px -172px rgba(51,39,51,1);
-moz-box-shadow: inset 10px 3px 296px -172px rgba(51,39,51,1);
box-shadow: inset 10px 3px 296px -172px rgba(51,39,51,1);
}
However, my overall wrapper div I use shadow as well but outside shadow and it works fine. Here it is
/* Overall Layout*/
#wrapper{
margin:0px auto;
border:.5px solid #CCC;
width:1028px;
height:1028px;
overflow:hidden;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
/* Overall Layout: box shadow*/
-webkit-box-shadow: 0px 1px 8px 0px rgba(50, 50, 50, 0.69);
-moz-box-shadow: 0px 1px 8px 0px rgba(50, 50, 50, 0.69);
box-shadow: 0px 1px 8px 0px rgba(50, 50, 50, 0.69);
}
Can anyone help me? Thanks
add border: none; to the input CSS. That way the input wouldn't use the default, browser specific input style and box-shadow should work
[EDIT] Here is a fiddle: http://jsfiddle.net/AR6m8/. I had to use custom shadow values to see if it works, so your problem might be with the shadow values.
Chrome version: 25.0.1364.172
The code:
<div style="
border: 2px solid black;
width: 100px;
height: 100px;
-webkit-box-shadow: inset 0px 5px 8px -10px red, inset 0px -5px 8px -10px red;
">
</div>
Can anyone give it a try ?
With this code, I was expecting to have inset shadows on TOP and BOTTOM only.
No dice.
http://jsfiddle.net/ngZNv/
If it does not work on your side either, can you please suggest a perhaps alternative way of doing this ?
This declaration seems to (more or less) work:
-webkit-box-shadow: inset 0px 1px 0px red, inset 0px -1px 0px red;
But it's a clearly different interpretation.
To sum it all up:
This works for Mozilla (without the prefix):
box-shadow: inset 0px 5px 8px -10px red, inset 0px -5px 8px -10px red;
No luck on chrome.
Please advice
It seems that the -10px is stopping the shadow from being displayed, that value is changing the spread of the shadow, so, it being negative doesn't make much sense. Not sure what you're intending it to look like. But it's at least visible if you change them to 10px rather than -10px.
<div style="
border: 2px solid black;
width: 100px;
height: 100px;
-webkit-box-shadow: inset 0px 5px 8px 10px red, inset 0px -5px 8px 10px red;
">
</div>
The usage is as follows:
box-shadow: [inset] <horizontal-offset> <vertical-offset> [blur] [spread] [color];
EDIT:
Does this have a similar effect to what you want?
-webkit-box-shadow: inset 0px 5px 10px -5px #F00, inset 0px -5px 10px -5px #F00;
I'm having issues getting the CSS3 box-shadow to look correct.
I currently have a box-shadow on my content wrapper like so:
border: 1px solid #D5D5D5;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 2px #DADADA, 0 -3px 0 #E6E6E6 inset;
I'd like the box shadow to appear on top of the content box, exactly how it appears on the bottom of the box. I just can't seem to get it right.
Not sure if I'm clear on what you're trying to do, but how about adding a third drop-shadow for the top, if the second one works fine on the bottom:
box-shadow: 0 0 2px #000, 0 -3px 0 #E6E6E6 inset, 0 3px 0 #E6E6E6 inset;
Or replace the second drop-shadow with the third one, if you wanted the inset drop-shadow on the top rather than on the bottom:
box-shadow: 0 0 2px #000, 0 3px 0 #E6E6E6 inset;