How do you replicate this box-shadow effect?


Tags: css3,box-shadow

Problem :

This is my first year in CSS and I'm trying to replicate this box-shadow effect I found on Udemy:

#1 Visual Aid

I'm trying my best to replicate this effect and this is the closet I've gotten:

#box {
  -webkit-box-shadow: 3px 14px 14px -11px rgba(245,245,245,1);
-moz-box-shadow: 3px 14px 14px -11px rgba(245,245,245,1);
box-shadow: 3px 14px 14px -11px rgba(245,245,245,1);
  width: 50px;
  height: 50px;
  background: white;
  }

body {
  background: black;
  
  }
<div id='box'> Hi </div>

How would you achieve this box-shadow effect?


Thanks! I solved the problem. After the fact, I discovered how Udemy solves this problem:

#A_16 {
    bottom: 0px;
    box-sizing: border-box;
    color: rgb(73, 133, 184);
    display: block;
    height: 34px;
    position: absolute;
    text-decoration: none;
    width: 358px;
    column-rule-color: rgb(73, 133, 184);
    perspective-origin: 179px 17px;
    transform-origin: 179px 17px;
    background: rgba(0, 0, 0, 0) linear-gradient(rgba(244, 244, 244, 0), rgba(244, 244, 244, 0.952941), rgb(244, 244, 244)) repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(73, 133, 184);
    font: normal normal bold normal 15px / 24px 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: rgb(73, 133, 184) none 0px;
    padding: 0px 0px 10px 20px;
}


Solution :

The box-shadow property supports a keyword called "inset" for box-shadow inside a box. E.g. box-shadow: inset 0 -10px 5px 5px hsl(0, 0%, 90%);

(btw, no need for the prefixes, see http://caniuse.com/#feat=css-boxshadow )

HOWEVER, the effect is more likely a linear-gradient background effect with a element positioned absolutely at the bottom but overlaying the clipped content.

.box {
    position: relative;
    height: 5.5em;
    overflow: hidden;
    border: 1px solid #222;
}

.box footer {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding-top: 0.5em;
    background: linear-gradient(0deg, #eee 80%, transparent 100%);
}
<div class="box">
    Lorem<br>
    pork<br>
    ipsum<br>
    bacon
    <footer>READ MORE</footer>
</div>


    CSS Howto..

    CSS: how to get scrollbars responsive for div inside container when user resizes it upwards

    How to avoid CSS styles to be applied for particular element

    How to know if an element's width is absolute or relative?

    How to create four even and fluid css columns?

    how to diplay two html elements seemlessly

    How to add condition in Extjs4 tpl for detecting current browser

    How to change the CSS for all elements with a common identifier using Javascript?

    How to add 'important' to zIndex

    How to remove rounded from to select query in jquery?

    How to keep css id to the 'li' in css

    how to trigger “onMouseOut” from click

    How can I avoid div overflowing my container without using overflow:hidden?

    How to add css in post? [closed]

    How can I create a color with values for green, blue, orange, and gold only?

    How to align dropdown sub menu?

    How can I resize these divs while keeping the same layout?

    CSS How to create a container with non-linear borders

    How can I center my icon horizontally and vertically?

    How can I do to merge font attributes in css

    How to set a:link height/width with css?

    CSS: How to attach an arrow to a div and make it overlap the border

    How to Progressively highlight a chunk of text using jquery/js/css

    How to create a list with three columns in a row by css and html?

    How can I add fixed background just to this section? [demo included]

    How to customize the CSS of a theme generated with the ThemeBuilder?

    How to make nested divs appear as siblings with CSS?

    How can I add multiple classes to a Rails form input with erb?

    html, how to make elements not shift when browser zooms?

    Why does overflow hidden affect height and how can I fix it in this example?

    How can i display images horizontally using PHP and mysql?