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.
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
<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 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
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;