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