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/
Related
My goal is to make the icon glow, but if apply shadow it comes with a ugly rounded div.
React code :
<SunIcon
className="h-10 w-10 rounded-3xl mr-2.5 text-suncolor shadow-sunshadow"
/>
The sunshadow is 0 0 20px 7px rgb(255 204 51 / 66%)
Output i get: I get that outline
I also tried using outline none, but doesn't work
I'm taking a guess that the icon library you're using is rendering SVG elements. Using box-shadow on an SVG results in the effect in the image you posted.
SVG can display shadows, which you can read about here, but when using a preexisting library, modifying them can be difficult.
For a CSS-driven shadow, you could use drop-shadow in a filter, however I have always found the effect to be too faded:
filter: drop-shadow( 0 0 5px rgba(255, 204, 51, .66));
Be aware that drop-shadow has limited browser compatibility.
Elements are always Squares and rectangles (or with a radius, even a circle) but never custom shapes
Try it with a ::before pseudo element
.iconClassName::before, .iconClassName::before:hover, .iconClassName::before:active { content:""; box-shadow: 0 0 20px 7px rgb(255 204 51 / 66%)}
Maybe you have to edit width/height, position...
Try to remove your Border-Radius, but without minimal example code it is hard to try
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 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.
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
Disclaimer: I have already seen the following questions and their solutions did not apply to me even though they are very similar situations:
Creating a CSS3 box-shadow on all sides but one
How to add drop shadow to the current element in a tab menu?
CSS shadows on 3 sides
Simply put, I am trying to add a -moz-box-shadow of 0 0 10px to the .current_page_item class that is applied to the currently active tab in the tab navigation at the top of my website. The website does not yet include the actual box-shadow or any of these changes, I have only been playing with these modifications in firebug for now before I actually publish them. Naturally this causes the shadow to appear on all sides, and so the bottom edge's shadow overlaps into the .content div which stores all of the blog's actual content, i.e. posts.
Based on what I have seen so far, it seems like I should set the z-index of something, not sure what (I have tried ul.menu) to something lower and the z-index of the .content div to something higher, but this seems to have no effect.
I am just wondering if this is normal behavior and if not, if someone could help me out with this situation.
Thanks, I really appreciate it.
EDIT: I put box-shadow in the post earlier, but I meant the respective specific directives, such as -moz-box-shadow. That was not the problem I was having.
You will need to add overflow:hidden on the ul.menu as honeybuzzer mentions, but since that would also cut-off the top shadow you should add some padding-top to the ul.menu as well..
overflow:hidden on ul.menu seems to get rid of the bottom shadow.
clip-path is now (2020) an excellent solution for hiding specific box-shadow edges if you're wanting the box-shadow to be cut off "clean" like this:
.shadow-element {
width: 100px;
height: 100px;
border: 1px solid #333;
box-shadow: 0 0 15px rgba(0,0,0,0.75);
clip-path: inset(0px -15px 0px 0px);
}
<div class="shadow-element"></div>
Simply apply the following CSS to the element in question:
box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);
Where:
Apx sets the shadow visibility for the top edge
Bpx right
Cpx bottom
Dpx left
Enter a value of 0 for any edges where the shadow should be hidden and a negative value (the same as the box-shadow blur radius - Xpx) to any edges where the shadow should be displayed.
This solution removes the need to apply styling to a parent element, which gives more flexibility.