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
Related
I have a very basic static HTML web page with borders and box shadow on a containing element.
The box shadow displays correctly on desktop browsers but on the Chrome mobile browser (only tested on Chrome) the box shadow on the bottom edge of the element is much larger than it should be.
There are also inconsistencies in how it displays. Sometimes when I first load the page I don't see the box-shadow and then it will suddenly appear.
I've checked for errors in the HTML and CSS but can't find anything wrong.
This is the code I'm using for the box shadow:
-webkit-box-shadow: 0 1px 5px rgba(255,255,0,0.5);
-moz-box-shadow: 0 1px 5px rgba(255,255,0,0.5);
box-shadow: 0 1px 5px rgba(255,255,0,0.5);
I've recreated the page on Codepen:
https://s.codepen.io/sean-collins/debug/GRKvBeP/YvkgOeODyLNk
I've changed the colors of the borders and color and size of the box-shadow to make it easier to see them but otherwise everything is the same as on the actual page.
I ran across something peculiar today regarding inset box-shadows and https vs http.
Using Chrome (Version 37.0.2062.120 m), if I do an inset box-shadow on an img, it works just fine so long as that img's URL is http (example: http://somebodyelseswebsite.com/myimage.png). If that image is using https (example: https://thisotherguyswebsite.com/hisimage.png), the inset drop-shadow will not show up.
Is it a security issue or perhaps a bug/oversight by Google? Anyone have any thoughts?
<img style="width:150px; box-shadow:inset 0 0 0 5px #000" src="https://kfscdn.api.np.km.playstation.net/64924751177e14943eec338b1f02cb08a838321c2ed38d0dc546622311399dc5/48b8a11c7d5f31a1efd874e197d0e1b9/1410306322100.png"></img>
<br>
<img style="width:150px; box-shadow:inset 0 0 0 5px #000" src="http://static-resource.np.community.playstation.net/avatar/default/DefaultAvatar.png"></img>
http://jsfiddle.net/9TMdc/4/
Http or Https is not the problem, see this:
http://jsfiddle.net/carloscalla/9TMdc/6/
I am calling it the two ways:
<img style="width:150px; box-shadow:inset 0 0 0 5px #000" src="http://static-resource.np.community.playstation.net/avatar/default/DefaultAvatar.png"></img>
<img style="width:150px; box-shadow:inset 0 0 0 5px #000" src="https://static-resource.np.community.playstation.net/avatar/default/DefaultAvatar.png"></img>
Http and Https the same image and I see the box-shadow. The problem is that the first image have white background and the second image has background transparent. So you see the box-shadow in the second image but not in the first one because of the white background.
See that the first image I called it the two ways Http and Https, in the first one with box-shadow: inset and the second one not inset and it worked fine. You just dont see the inset shadow because of the white background of the image.
UPDATE
http://jsfiddle.net/carloscalla/9TMdc/9/
I set a background-color in a div containing your images so you can see the background of your images. The first one has a background color white and the second one is transparent. Remember that in PNG images you can have transparent background colors while in JPEG images you can't.
UPDATE
http://jsfiddle.net/carloscalla/9TMdc/10/
I included a workaround to set the box-shadow: inset in your image with background color different than transparent. I wrapped it in a div and set the z-index: -1 to your image so the div comes in front. Notice that position: relative is important because z-index property only applies to positioned elements, that means relative, absolute and fixed. Does not apply to static elements (which comes by default).
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/
We have the following code: http://jsfiddle.net/Z92Qp/
As you can see the green line that appear on mouse hover is "oblique" on the right side.
see the image
Is that a bug of the browsers?
Thanks in advance
This is not a bug its how the browsers choose to render the border.
See this example I mocked up.
http://jsfiddle.net/blowsie/Uss7X/
No, borders are designed that way, to meet half way as seen here
Hey now used to box shadow as like this
li:hover {
box-shadow: 0 4px 0 0 #00FF00;
-webkit-box-shadow: 0 4px 0 0 #00FF00;
-moz-box-shadow: 0 4px 0 0 #00FF00;
}
Live demo
CSS borders are drawn with diagonal corners.
Otherwise, if you had 2 different colours for bottom and right (blue & red for e.g), what would happen in the corner? Would it be all red, or all blue?
This is well known, and is even exploited to make CSS Triangles
I am using RGBA to create a transparent background that overlays on top of an image. Works just fine. My questions is this: Is there a way to "soften" the edges of the box to where it flows more into the picture vs a hard edge.
Here is my CSS for the box:
#past{
position:absolute;
left:0;
top:363px;
background-color: rgba(34,34,34,0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
/* For IE 8*/
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
z-index:10;
padding:10px;
}
I know I can do this by creating a background image in Photoshop but I was looking for a CSS only way vs using an image.
Also I would prefer if at all possible for this to work in all browsers.
Thanks for the help. =>
Another option is to use one of my personal favorite CSS tools: box-shadow.
A box shadow is really a drop-shadow on the node. It looks like this:
-moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
box-shadow: 1px 2px 3px rgba(0,0,0,.5);
The arguments are:
1px: Horizontal offset of the effect. Positive numbers shift it right, negative left.
2px: Vertical offset of the effect. Positive numbers shift it down, negative up.
3px: The blur effect. 0 means no blur.
color: The color of the shadow.
So, you could leave your current design, and add a box-shadow like:
box-shadow: 0px -2px 2px rgba(34,34,34,0.6);
This should give you a 'blurry' top-edge.
This website will help with more information: http://css-tricks.com/snippets/css/css-box-shadow/
It depends on what type of fading you are looking for.
But with shadow and rounded corners you can get a nice result. Rounded corners because the bigger the shadow, the weirder it will look in the edges unless you balance it out with rounded corners.
http://jsfiddle.net/tLu7u/
also.. http://css3pie.com/
You can use CSS gradient - although there are not consistent across browsers so You would have to code it for every one
Like that: CSS3 Transparency + Gradient
Gradient should be more transparent on top or on top right corner (depending on capabilities)