How is this slightly-more-advanced box-shadow effect accomplished?

Report · Nov 22, 2018

I just came across the most elegant use of box-shadow I think I've ever seen, at NASA's site, which uses it to accentuate the fact that there's a horizontal scroll there (on the right side of the chart).

Too many stylesheets for me to sift through there... I tried Googling for a way to do this - and found way more complex stuff I didn't think was do-able - but couldn't find this specific method (fades to transparent in 3 different directions, not just 1).

Report · Nov 22, 2018

It uses the box-shadow 'inset' property, with only the right border being set. It then uses a box-shadow property to increase the shadow slightly on horizontal scroll of the elements content.

Edit - like you there is way to much css to go through it all, but the 'gentel' expansion of the box shadow on horizontal scroll can be done using css transitions.

Report · Nov 22, 2018

pziecina wrote
It uses the box-shadow 'inset' property,

Yes, here's an example for the OP to view:

<!DOCTYPE html>

<html">

<head>

<title>Box Shadow</title>

<style>

.box-shadow {

border-collapse: collapse;

width: 600px;

border-top: 1px solid #ccc;

border-bottom: 1px solid #ccc;

margin: 0 auto;

}

.box-shadow td {

border: 1px solid #ccc;

padding: 20px 15px;

}

.box-shadow td:first-child {

border-left: none;

}

.box-shadow td:last-child {

box-shadow: inset -16px 0 16px -16px rgba(0,0,0,0.5);

border-right: none;

}

.even {

background-color: #edf4fb;

}

</style>

</head>

<body>

<tr>

<td>Column 1</td><td>Column 2</td><td>Column 3</td>

</tr>

<td >Column 1</td><td>Column 2</td><td>Column 3</td>

</tr>

<tr>

<td>Column 1</td><td>Column 2</td><td>Column 3</td>

</tr>

<td>Column 1</td><td>Column 2</td><td>Column 3</td>

</tr>

<tr>

<td>Column 1</td><td>Column 2</td><td>Column 3</td>

</tr>

<td>Column 1</td><td>Column 2</td><td>Column3</td>

</tr>

</table>

</body>

</html>

Report · Nov 22, 2018

osgood_ wrote
pziecina wrote
It uses the box-shadow 'inset' property,
Yes, here's an example for the OP to view:
<!DOCTYPE html>
<html">
<head>
<meta charset="UTF-8" />
<title>Box Shadow</title>
<style>
.box-shadow {
border-collapse: collapse;
width: 600px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 0 auto;
}
.box-shadow td {
border: 1px solid #ccc;
padding: 20px 15px;
}
.box-shadow td:first-child {
border-left: none;
}
.box-shadow td:last-child {
box-shadow: inset -16px 0 16px -16px rgba(0,0,0,0.5);
border-right: none;
}
.even {
background-color: #edf4fb;
}
</style>
</head>
<body>
<table class="box-shadow" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>Column 1</td><td>Column 2</td><td>Column 3</td>
</tr>
<tr class="even" >
<td >Column 1</td><td>Column 2</td><td>Column 3</td>
</tr>
<tr>
<td>Column 1</td><td>Column 2</td><td>Column 3</td>
</tr>
<tr class="even">
<td>Column 1</td><td>Column 2</td><td>Column 3</td>
</tr>
<tr>
<td>Column 1</td><td>Column 2</td><td>Column 3</td>
</tr>
<tr class="even">
<td>Column 1</td><td>Column 2</td><td>Column3</td>
</tr>
</table>
</body>
</html>

Just tried this, and all it does is a straight gradient (single fade to the left, no fades up or down). Not the more realistic one that fades in 3 directions, like the example linked to at the top (NASA).

I was also hoping it was do-able with a single class applied on a single object, but looks like it's trickier than it looks.

Report · Nov 22, 2018

Didn't notice the decrease in width at the top and bottom, so -

In order to get that effect you could also use a border-image.

Report · Nov 22, 2018

pziecina wrote
Didn't notice the decrease in width at the top and bottom, so -
In order to get that effect you could also use a border-image.

Me neither, does it actually add much?

Report · Nov 22, 2018

It may do Os, knowing a few of the web site developers at NASA, and their Q.C. they place a lot of emphasis on getting the small, (virtually unnoticeable) visual effects right.

Report · Nov 22, 2018

pziecina wrote
It may do Os, knowing a few of the web site developers at NASA, and their Q.C. they place a lot of emphasis on getting the small, (virtually unnoticeable) visual effects right.

I agree. its the finer points that matter, this one just escaped me. Personally I dont think it brings much at all and Im fairly picky myself.

Report · Nov 22, 2018

osgood_ wrote
pziecina wrote
It may do Os, knowing a few of the web site developers at NASA, and their Q.C. they place a lot of emphasis on getting the small, (virtually unnoticeable) visual effects right.
I agree. its the finer points that matter, this one just escaped me. Personally I dont think it brings much at all and Im fairly picky myself.

I think I would also be tempted to try a border radius on the top/bottom r/h, along with the box-shadow, to see if that was acceptable. The problem with border-image, (not in modern evergreen browsers) is that they sometimes did not render correctly, (didn't match up) on corners.

Report · Nov 22, 2018

Read the specs on border-image. You can use with image or CSS gradients.

https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

Nancy O'Shea— Product User, Community Expert & Moderator