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.
Related
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/
In this Plunker you can see I've tried to make an inset drop-shadow appear in the viewport area of the grid. It is visible in the space where there are no rows, but none where the rows are. I don't quite understand what about the rows is blocking it.
Below are my styles:
.gridStyle .ngViewport
{
box-shadow:inset 0 0 4px 1px rgba(0,0,0,.3);
}
.gridStyle .ngFooterPanel, .gridStyle .ngTopPanel
{
box-shadow:0 0 3px 1px rgba(0,0,0,.3);
}
Is there a way to get the box-shadow to be visible even when rows are present in the viewport?
You don't see the box-shadow because the the row elements are on TOP of the ngViewport element that has the shadow. If you make the ngViewport container wider than the rows, you'll see the shadow appear at the edges.
You could set a cellClass to define inset box-shadows for the appropriate side(s) of the cells (see Can CSS3 box-shadow:inset do only one or two sides? like border-top?)
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