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" />
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'm attempting to make a wood frame with inset border. I made a border-image and applied an inset and regular box-shadow to it. The regular shadow works nicely as a drop shadow. The inset shadow is offset by many pixels. What's going wrong and can it be fixed? I'm trying to get the inset shadow to sit right up against the wood frame, not several pixels away from it, into where the text prints.
.box {
background: gray;
color: white;
}
.box-shadow2 {
border-style: solid;
border-width: 23px;
-moz-border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 23 repeat;
-webkit-border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 23 repeat;
-o-border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 23 repeat;
border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 23 fill repeat;
-webkit-box-shadow: inset 3px 3px 5px 0px rgba(0, 0, 0, 0.75), 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 3px 3px 5px 0px rgba(0, 0, 0, 0.75), 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: inset 3px 3px 5px 0px rgba(0, 0, 0, 0.75), 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
}
<div class="box box-shadow2">Text</div>
Your border-image is only 10px wide, not 23. The grey is the extra transparent space that it expects to be part of the image.
border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 10 fill repeat;
I am trying to apply a nice text shadow to two words, but it seems that the CSS isn’t doing anything. See this jsFiddle.
<p id="np">Nakshatro Production</p>
#np {
text-shadow: -0px 0px 1px 0 hsl(20, 100%, 16%),
-2px 2px 2px -1px hsl(20, 100%, 14%),
-4px 4px 2px -2px hsl(20, 100%, 12%),
-6px 6px 3px -3px hsl(20, 100%, 10%),
-8px 8px 2px -4px hsl(20, 100%, 8%),
-10px 10px 2px -5px hsl(20, 100%, 6%);
}
Unlike box-shadow, text-shadow doesn’t support a spread value; you can only select offset and blur. That is, use a maximum of three size values and one colour. jsFiddle, not quite the same.
http://www.w3schools.com/cssref/css3_pr_text-shadow.asp. You have given an extra data which is not accepted.
#np{
text-shadow: -12px 2px 2px hsl(120,70%,50%),
2px 12px 2px hsl(120,30%,20%),
-2px 2px 12px hsl(120,100%,50%);
}
Try this and I think you will have some idea.
ALso modified ur fiddle
http://jsfiddle.net/jct0vf0z/4/
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.