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/
Related
I'm working on some button styles on codepen and am using double box-shadow to produce this effect for use as a :focus state.
box-shadow: 0 0 0 3px currentColor, 0 0 0 5px var(--background);
Is there a way to produce box-shadow like this without knowledge of the background color? Like to somehow inset the box-shadow? I'd like to produce this effect without needing to know the background color.
You could increase the padding, then have an inset border by a certain amount. The inset border (really the outline) would be the white, while the outer orange would be part of the original background.
Box-shadow renders incorrectly in firefox (was observed on v49).
Css:
.block {
width: 90px;
height: 90px;
box-shadow: 0 0 0 1px #0084A3;
border-radius: 100%;
}
It renders asymmetrically and depend on window height.
Here's the fiddle. Try to resize the window vertically and see what is happening to box-shadow. It's easy to achieve something like this:
invalid box-shadow rendering. You can see that top shadow is much wider than bottom one.
Chrome and Safari handles it well.
I would appreciate any helpful ideas.
Please use box-shadow: inset 0 0 0 1px #0084A3; it gives same output in both firefox and chrome browsers.
Try this -moz-box-shadow: 0 0 0 1px #0084A3; for Firefox;
San is right but Just for more detail..
There is 2 type of shadow
1. Inner ( inset )
2. Outer ( default )
so in css3, by default it is taking outer shadow if you are not specified inset property.
inset
If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content).
The presence of the inset keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content.
check this link for more detail
I've got this page where I'd like to give to the exterior of the player a blurry effect, something like this, with the black part being transparent. Is it possible to do that only with CSS?
Thanks!
Try using box-shadow instead of a css border
box-shadow: 0px 0px 10px #000000;
I'm trying to find a reasonable CSS style for highlighting a particular table row (i.e. on a click selection) that doesn't involve changing the background color, because the row colors already serve a purpose in my application.
This probably means making the border stand out or doing something to the background that doesn't change its color. I've tried the following
border: 2px ... with margin: -2px or something like that. However, it doesn't display too well, especially when the table is scrolling, and doesn't offer a good highlight without a super thick border. Browser support of borders on <tr> elements also isn't great.
outline: 3px ... only seems to display on the top and bottom when the div containing the table is scrollable.
box-shadow: 5px 5px ... color inset doesn't seem to display properly without messing up the table.
Does anyone have any good CSS suggestions for how to achieve this?
It turns out that you can do this using css selectors on the <td> elements, being careful with the two ends. For example, I created the following stylus code, which could be turned into a mixin. The trick is to use a negative spread value to get rid of the borders that would show up on any side you don't want, while using the blur and horizontal/vertical values to get the nice effect on the sides you do want. The blur must be at most half the spread.
shadow-color = rgba(0,0,0,0.5)
shadow = 15px
-shadow = - shadow
blur = 5px
spread = -10px
tr.selected > td
box-shadow:
0 shadow blur spread shadow-color inset,
0 -shadow blur spread shadow-color inset
// Since we have to, make the top left and bottom right corners the dark overlapping ones
tr.selected > td:first-child
box-shadow:
shadow -shadow blur spread shadow-color inset,
0 shadow blur spread shadow-color inset
tr.selected > td:last-child
box-shadow:
0 -shadow blur spread shadow-color inset,
-shadow shadow blur spread shadow-color inset
This creates a shadow border like the following, allowing any background color to still show up:
However, it's not possible to do this with normal (non-inset) box-shadows because they will show up in between the table cells.
Change the HTML to:
<td style="padding:20px;">
<div class="tdContentWrapper">
<div>SomeStuff</div>
<div>SomeMoreStuff</div>
</div>
</td>
Change the CSS to:
#MyTable .tdContentWrapper:hover{
background: black;
}
How about increasing the padding and/or line-height with a subtle increase in font-size?
The row gets highlighted explicitly enough without affecting the visual styling of its corresponding peers; I might even tweak the color, if it's possible, depending on the alternating backgrounds.
I read this article http://heygrady.com/blog/2011/08/06/recreating-photoshop-drop-shadows-in-css3-and-compass/ many times. But I can't find the correct way to convert drop shadow of PSD to box shadow of CSS3 in this case:
Stroke: #E4E4E4; opacity 75%
Inner glow: #FFFFFF 50%; opacity 75%
Drop shadow: Angle=90 degrees; distance=1px; spread=5%; size=9px
border: 1px solid rgba(228,228,228,0.75);
box-shadow: inset 0 0 0 9px rgba(255,255,255,0.75), 0 1px 9px 0 rgba(0,0,0,.5);
I had to guess here a bit as there’s missing information. The rgba(r,g,b,a) colour syntax takes a value of 0–255 for each of the colour components and a 0–1 value for the opacity of the colour. So the border rule is equivalent to Photoshop stroke.
There’s no direct equivalent of an inner glow but you can do an inset box shadow which can simulate it. You specify multiple shadows with a comma on the same rule, so the first one can be the inset shadow. This is specified with an inset keyword to start with, then the x and y offset (none in this case), then a blur radius, then a spread distance, then finally the colour of the shadow. Play with the values; I guessed at 9px for the spread and 0 for the rest.
Finally, we specify a box shadow for the outside. The same rules apply as to the inset shadow (again with my guessing to the values). Have a play around!
There is a cloud based Photoshop extension that you can download and install in photo shop here: http://css3ps.com/. Then select a layer or layers which contain the drop shadow and click a button in toolbox then it will give you the css3 you need that matches the box shadow in the PSD. They have done the calculations for you.
I use it all the time for this question its great.