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?)
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 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.
Following is my jsfiddle in which i am trying to drop shadow on table.
The problem is shadow is droping on bottom and right of the table but not on left and top side of the table kindly let me know how can i modify the css of my fiddle so shadow will be droped on all sides of the table. Thanks,
http://jsfiddle.net/7RQtq/
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
Reset the x, y co-ordinates:
-moz-box-shadow: 0px 0px 4px #000;
-webkit-box-shadow: 0px 0px 4px #000;
box-shadow: 0px 0px 4px #000;
border-radius: 5px;
Explanation
The first option is x co-ordinate, the second is y. So, resetting both to 0px will give you centered. And, increasing the spread, the third value, will give you like Photoshop. Also, giving some border-radius will show exactly how you want.
Screenshot
Fiddle: http://jsfiddle.net/7RQtq/4/
First two parameters are x (right) and y (bottom) traslation... set them to 0px for a centered shadow:
http://jsfiddle.net/7RQtq/1/
-moz-box-shadow: 0px 0px 4px #000;
-webkit-box-shadow: 0px 0px 4px #000;
Don't know about the legacy IE filters, but for other browsers you can use box-shadow: 0 0 16px #000;. The first two values indicate offset, and the third indicates blur of the shadow.
Demo: http://jsfiddle.net/7RQtq/3/
Generator Tool: http://www.webtutorialplus.com/box-shadow.aspx
Spec: http://www.w3.org/TR/css3-background/#box-shadow
The ‘box-shadow’ property attaches one or more drop-shadows to the
box. The property is a comma-separated list of shadows, each specified
by 2-4 length values, an optional color, and an optional ‘inset’
keyword. Omitted lengths are 0; omitted colors are a UA-chosen color.
Where = inset? && [ {2,4} && ? ]
The components of each are interpreted as follows:
The first length is the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a
negative length to the left.
The second length is the vertical offset. A positive value offsets the shadow down, a negative one up.
The third length is a blur radius. Negative values are not allowed. If the blur value is zero, the shadow's edge is sharp. Otherwise, the
larger the value, the more the shadow's edge is blurred. See below.
The fourth length is a spread distance. Positive values cause the shadow shape to expand in all directions by the specified radius.
Negative values cause the shadow shape to contract. See below. Note
that for inner shadows, expanding the shadow (creating more shadow
area) means contracting the shadow's perimeter shape.
The color is the color of the shadow. If the color is absent, the used
color is taken from the ‘color’ property.
As you might imagine, you can create complicated (and elaborate) effects with a combination of these values, such as:
http://studentwebhosting.com/tutorials/amazing-css3-box-shadow-examples/
http://viget.com/inspire/39-ridiculous-things-to-do-with-css3-box-shadows
What values need to be defined for a box-shadow that only appears at the bottom.
.element{box-shadow:0 -5px 10px #000}
first value is the position of the shadow on the X,
second is the position of the shadow on the Y,
third is the shadow dimension,
fourth the color.
By putting a negative position Y of half of the shadow dimension, you get no shadow at the bottom of your element.
You could put your box in another one, smaller, with height and width defined, have the overflow hidden, and with a relative position, you hide the shadow you don't want.
This has been asked millions of times. Just use the spread parameter to make it smaller, then move it so that it appears on one side only. Similar question here: drop shadow only bottom css3
I still haven't found a decent looking way that would work in all situations. Here are two methods:
1.) http://jsfiddle.net/pGGXH/28/ - use padding+overflow to show the shadow.
<div class="no-overflow">
<div class="box">my box</div>
</div>
.no-overflow {
overflow:hidden;
padding:5px 5px 0 5px;
}
.box {
border:1px solid #000;
border-radius:5px;
box-shadow:0 0 5px #333;
padding:10px;
}
2.) http://jsfiddle.net/pGGXH/33/ - uses stacking border-shadows (you can get multiple border shadows stacked one on top of the other)
<div class="box">my box</div>
.box {
border:1px solid #000;
border-radius:5px;
box-shadow:0 10px 0 #fff, 0 0 5px #333;
padding:10px;
}
However with border-radius both solutions don't turn out that well.
It appears it's not possible ( http://www.w3.org/TR/css3-background/#the-box-shadow ), you have to try some length values.
The box-shadow property allows web designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.
The property syntax is as follows:
box-shadow: none | <shadow> [ , <shadow> ]*
<shadow> = inset? && [ <length>{2,4} && <color>? ]
For example;
box-shadow: 3px -3px 3px #000000; //Shadow towards North East direction.
Check and experiment here... http://jsfiddle.net/jgsdS/