Given a photo like so:
How can I apply an inner stroke as seen below which in photoshop is done with an inner shadow? Suggestions?
There’s an inset property on various browsers’ box-shadow attributes that makes it behave much like Photoshop’s “inner shadow”. You’ll need to create an element on top of your image with the same size and appropriate corner rounding attributes (border-radius, -webkit-border-radius, -moz-border-radius), then apply the shadow to it something like this:
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
(note edits; I fiddled with it a bit and it turns out the shadow gets drawn beneath any actual content of the element, so you’ll either need to apply the shadow to an element that’ll be layered on top of the image or put the image in the background of the element that has the shadow applied to it)
(further edit: a working JSfiddle example.)
Related
I have to create a border-right on td tag which is transparent only in the ends i.e the border must be of the width 1px in the center and keep decreasing till the end. How can I achieve this?
This might what you're looking for
border-image: linear-gradient(to right, black, rgba(0, 0, 0, 0)) 1 100%;
I have absolutely no experience in programming, html, css or anything.
Still, i want to make some kind of website and I'm struggling with several issues right at the beginning.
For starters, my wordpress theme lets me have full width navigation bar without touching any code.
Okay, but i want to have a full width drop shadow effect under the navigation bar. This just doesn't happen and no matter where i try to dig the problem, i just can't do it.
the link to my website.
As you can see, the drop shadow doesn't go full width.
I've seen sites which use the effect so it should be possible. Is it a problem with my theme, should i just forget about it?
(And yeah, the site's really ugly but i'm planning to update it when i have time)
In your CSS You need to remove the boxshadow from div id="navigation" and add it to div id="nav-container"
something like this:
#nav-container {
-webkit-box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);
}
Wrap your nav-container div with another div and apply the drop shadow effect to it. After applying the change code looks something like below
<div class="shadow">
<div id="nav-container">
.....
</div>
</div>
then shadow class in css should be like this
.shadow{
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);
}
I'm playing with inner shadow fx effect. I'm trying to get shadow appearing only on top of VBox. Can anybody give me a hint
-fx-effect: innershadow(gaussian, #787878, 10, 0, 0,2 );
I had a problem similiar to yours. I wanted to add a shadow on every edges without the top. Look into my post: JavaFX: Style undecorated Window with InnerShadow but without top
There you can find the solution given by Kalaschni: You can rebuild your shadow and add it to the border. In your case it looks like:
-fx-border-color:
linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent);
-fx-border-style: solid;
-fx-border-width:
5px 0 0 0;
Instead of px you may use em, too (-fx-border-width: 0.417em 0 0 0;).
I'm using box shadow CSS feature on images in my gallery, but somehow the inset parameter is not working. I tried z-index and I tried to put in different places code and it's still not working.
Visit the website here.
Code
box-shadow:#000000 0 1px 3px, rgba(255, 255, 255, 0.3) 0 0 0 1px inset, rgba(255, 255, 255, 0.5) 0 1px 0 0 inset;
It has nothing to do with your syntax. It's just a peculiarity of an img element, not the box-shadow property.
Consider looking at this example: http://jsfiddle.net/YhePf/ - if you disable showing images in your browser - you will see that instead of an image there will be a green block with the box-shadow applied to it.
Edit: In other words, the inset box-shadow property is applied but it cannot be seen because it's under the image itself (just like the background-color property). I may prove that with another fiddle. It's different from my previous one in the padding property. See here: http://jsfiddle.net/YhePf/6/ - see the red 2px shadow and the green background
I think you might just be missing the spread radius value from the first shadow. :)
i think there is a issue because inset box-shadow cant be applied on a image.the effect which you require can be easily achieved with help of border property. if you want to use inset box shadow apply it on div.
for more detail chk it out http://jordandobson.com/_expirements/css/vignette/
Can I have an inset shadow along the bottom of a div only? I've been playing with the box-shadow property in CSS3 for a while and cant figure out how to go about doing this.
I can get it to show on the inside along the top of the div but cant figure out how to get it to the bottom. I haven't been able to find any topics relating to this.. is it possible?
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
Use negative distances to more the shadow to the left or up (therefore having them on the right and bottom edges for inset shadows).