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
Related
currently I have borders around all my rows. I'm looking to style the borders so they grow past the table on the left and right by a couple pixels. At the moment they all remain within the table
I hard coded the border with the following styles
--outline-box-shadow-color: ${colorTheme.primary.base};
&:focus {
box-shadow: 0 0 0 2pt var(--outline-offset-box-shadow-color), 0 0 0.75pt 3.5pt var(--outline-box-shadow-color);
}
https://jsfiddle.net/o0tev173/
Looking to have it extend a bit out like this on both left and right.
Any tips or suggestions is greatly appreciated.
Add a box shadow with a negative x value and no blur like so:
#TR_8, #TR_18, #TR_28, #TR_38 {
box-shadow: -6px 0 0 #369;
}
You can combine that with your current box-shadow value or use that by itself.
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'm experiencing a weird font rendering problem when using multiple large text-shadows in Safari 9.1.1. The text and the shadows render fine, but it looks like part of the text is being duplicated about 110px below the original text.
Here's an example of the issue (must be viewed in Safari):
h3 {
text-shadow: 0 0 40px #000, 0 0 80px #000;
}
<h3>
Testing multiple text-shadows
</h3>
The position of the duplicate text is somewhere around 110px below the real text, and starts appearing when the second shadow has a spread of 60 to 70px.
The attributes of the first shadow, and the opacity and position of the second shadow don't have any effect. Only the font-size and spread of the second shadow seem to make any difference.
The only way I have been able to get rid of it is to remove or reduce the text-shadow.
I have also been able to get the text to duplicate a second time if I add a third large text-shadow.
Has anyone seen this before? Anyone have a fix?
We've seen the same bug when creating a complex data visualization with D3.js. We could only fix it by removing the second text-shadow. There's a bug reported for Webkit that seems very related, but there's been no progress on it.
After a little bit of experimentation, it appears to be related to the blur radius value of the text shadow.
For your particular case, if you change it to
h3 {
text-shadow: 0 0 40px #000, 0 0 60px #000;
}
The text artifact in Safari should disappear. You will have both shadows, but the blur won't be as large, so YMMV.
Just use text-shadow: 0 0 40px #000;
Look at the fixed code: https://jsfiddle.net/yp9jatLw/2/
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/
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)