Skip to main content
U
Under S.
Inspiring
November 22, 2018
Question

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

  • November 22, 2018
  • 3 replies
  • 563 views

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).

    This topic has been closed for replies.

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 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
    pziecina
    pziecina
    Legend
    November 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.

    O
    osgood_
    Legend
    November 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?

    pziecina
    pziecina
    Legend
    November 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.

    pziecina
    pziecina
    Legend
    November 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.

    O
    osgood_
    Legend
    November 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>

    <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>

    U
    Under S.Author
    Inspiring
    November 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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices