Hiding content with shadow

Question

I need to use JS/CSS/HTML5 to make the content hidden in a div container with shadow. It should be similar to the image I posted here. Also color of shadow should be changeable.

See attached image for reference

If it is a duplicate question, please refer to the original one.

HTML:

<div class="makehidden">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

CSS:

.makehidden{
height: 100px;
width: 600px;
box-shadow:10px 10px 50px 20px pink inset;
}

[What have you tried…?](http://mattgemmell.com/what-have-you-tried/) What about the HTML/CSS you currently have..? — T J, May 28 '14 at 08:04
I tried box shadow with inside property but unable to achieve this. — Taco, May 28 '14 at 08:07

score 0 · Answer 1 · answered May 28 '14 at 08:12

One way would be to make the content of the div you want to hide position:relative; and then have an element inside it with:

position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background: /* Some gradient that you could generate */

Gradient Generator

This would cover the element completely with the background gradient as an overlay.

score 0 · Accepted Answer · answered May 28 '14 at 08:13

I would use something like this:

http://jsfiddle.net/5BsXs/

.hidden-with-shadow {
    width: 200px;
    height: 100px;
    overflow: hidden;
    position: relative;
}

.hidden-with-shadow:after {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
}

All these scary background stuff are just the css rules to create the correct gradient (white to transparent) on every browser. You can change the color by swapping the #ffffff with the color you want. I suggest you use something like sass with compass (scss), so you can write like:

background: linear_gradien(rgba(255,255,255,255), rgba(255,255,255,0))

Thanks, this works for almost all the browsers and versions. — Taco, May 28 '14 at 08:21

score 0 · Answer 3 · answered May 28 '14 at 08:14

Here you are. Hope It will help you.

HTML

<div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget elit sed metus pellentesque rutrum. Etiam sodales auctor eros, id luctus elit. In hac habitasse platea dictumst. Sed cursus nec sem a tincidunt. Proin vitae nulla augue. Vestibulum adipiscing a magna sit amet convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    <div class="shadow"></div>
</div>

CSS

.text {
    position: relative;
}
.shadow {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 75%;
    width: 100%;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.2)));

}

http://jsfiddle.net/Gj6UZ/2/

score 0 · Answer 4 · answered May 28 '14 at 08:18

0

change your box-shadow to box-shadow: 0 -50px 50px -30px pink inset;

http://jsfiddle.net/7ukhp/1/

answered May 28 '14 at 08:18

Friedrich

2,211
20
42

I liked this answer too. This is what I was trying to achieve, but this does not work on all the browser. We need to modify it for different browsers. Thanks anyway. – Taco May 28 '14 at 09:05

Hiding content with shadow

4 Answers4

Gradient Generator