Concealing information beneath a veil of darkness

I'm looking to implement a solution using JS/CSS/HTML5 to hide content within a div container with a shadow effect. The end result should resemble the example image I've provided. Additionally, I'd like the ability to customize the color of the shadow.

If this is a duplicate inquiry, please direct me to the original post.

Example HTML code:

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

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

Answer №1

If I were to implement something similar, it would look 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 */
}

The complex background rules are necessary to achieve the desired gradient effect across all browsers. To change the color, simply replace #ffffff with your preferred color. Using a preprocessor like Sass with Compass (SCSS) can simplify the process, for example:

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

Answer №2

To hide a specific div, you can apply the following method: set the content of the div to have position:relative;, and then include an element inside it with the following styling:

position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background: /* Custom gradient that you create */

Try out Gradient Generator

By implementing this, the element will be completely covered by the background gradient as an overlay.

Answer №3

Here is the solution for you. Hopefully, it proves to be helpful.

HTML

<div class="content">
    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

.content {
    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)));

}

Visit this link for more details.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The argument type does not match the parameter type partial<>

While attempting to validate my Ionic React form, I encountered an error when calling the validationSchema within the useForm method. The specific error message received is as follows: Argument of type '{ validationSchema: ......' is not assignab ...

javascriptreactjsionic-frameworkprogressive-web-appsionic-react

Populate an HTML table using a JavaScript array containing objects

Greetings, fellow coders! I am new to the coding world and this community, and despite my efforts in searching for a solution, I couldn't find exactly what I was looking for. So, here is my question: I have an array structured as follows: const arr ...

javascripthtmlarraysjavascript-objects

What are the steps to implement the jQuery slide menu effect on a website?

When visiting the website , you may notice a symbol positioned in the top left corner of the site. By clicking on this symbol, a sleek div will slide out. How can this type of animation be achieved through javascript or jquery? ...

javascriptmenuslide

Modify a value using jQuery

On my Asp.net webform, I have a label called "LabelTotalNumber". I am looking to update the value of this label every minute using jQuery without having to refresh the form. How can I achieve this? Currently, I am able to accomplish updating the value onc ...

jqueryasp.netajaxlinq

"Displaying an array using React Hooks' useState causes the content to

I want to enhance my image uploading functionality in useState by implementing a specific function. Once the images are uploaded, I need to render them on the page. However, I am facing an issue with rendering the returned array. Here is the current code ...

javascriptarraysreactjsreact-hooks

What is the process for uploading a file and storing it in a specific directory?

Creating HTML Form for File Upload: <div style="width:200px"> <form action="javascript:_bulkUser();" method="post" enctype="multipart/form-data"> Select File:<input type="file" name="fname"/><br/> <input type="submit ...

javascriptjqueryfile-upload

Leveraging JavaScript or jQuery to code for advanced enterprise-grade wifi networks

After successfully developing a wifi application that supports personal WPA or WPA2 networks with password validation, I am now looking to expand my skills and tackle enterprise level wifi networks. These networks require more complex validations such as u ...

javascriptjquerycordovawifi

javascript href clears Internet Explorer webpage

I noticed a strange issue with my HTML page. In Internet Explorer, when I click on the link, it displays the return value on a blank page. However, in Chrome, it simply executes the function without affecting the page appearance. Is there a way to make I ...

javascriptinternet-explorer

Can you identify the target of the term "this" in the upcoming JavaScript code?

DISCLAIMER: I am inquiring about a specific instance of this, not its general purpose. Please refrain from quick Google responses or copied answers (: The code snippet below demonstrates JavaScript/jQuery: var req = {}; function getData() { var from ...

javascriptjquerythis

To address the footer alignment on the jQuery Mobile webpage

My problem involves the footer on a mobile website designed with jQuery Mobile. After removing data-position="fix" from the footer, it is fixed in place. However, the page content is minimal, causing the footer to not align correctly with the desktop vers ...

htmlcssjquery-mobile

Updating information with AJAX upon clicking a hyperlink

I am trying to implement AJAX for replacing the contents within a div. The setup of the application is quite complex, but I have simplified it to focus on getting the basic concept to work first. Currently, my goal is simply to replace a div based on the ...

javascriptphpjqueryajax

Update the existing code to incorporate icons into the column formatting

I'm seeking assistance from someone knowledgeable in JSON or coding as this is not my area of expertise. In my sharepoint online list, I have customized the display to show different colors based on the text content in each item. Now, I am looking to ...

javascriptjsonsharepoint-online

Issue with Bootstrap Navbar dropdown functionality not functioning correctly in browsers, but working fine on Codepen

I'm encountering an issue with a dropdown menu in the navbar of my document. The dropdown menu works fine in my codepen but not in my text editor (Sublime). I've tried various solutions and couldn't find a fix, so I'm reaching out here ...

javascriptjquerytwitter-bootstrap

There was an issue with the routing that prevented access to the student activity information at

I've been working on building my own Note Taking App using Express. Following my instructor's example, I wrote some code but encountered an issue when deploying it. Whenever I try to add a new note, I receive an error that says "cannot get/api/na ...

javascriptnode.jsapiexpress

Strange behavior exhibited by Ajax in Internet Explorer 8

Below is the function I have implemented to ajax more reviews: function retrieveAdditionalReviews(str) { var counter = Number($('#counter').val()); var xmlhttp; if (str == "") { document.getElementById("reviews").innerHTML = ...

javascriptjqueryajaxinternet-explorer-8

In React, the ES6 prototype method map failed to render anything on the screen

Is there an issue with my map method implementation? var App = React.createClass({ getInitialState(){ return { items:[1,2,3] } }, renderItem(){ return( this.state.items.map((item,i))=> <li key={i}> { ...

javascriptreactjs

Expanding the content width of Bootstrap Nav Pills

I'm currently working with Bootstrap pills that feature two tabs. I would like to customize the width of the tab content container differently for each tab, but I'm unsure how to achieve this. The tab-content class currently sets the same width f ...

csstwitter-bootstrapbootstrap-5nav-pills

When updating the innerHTML attribute with a new value, what type of performance enhancements are implemented?

Looking to optimize updating the content of a DOM element called #mywriting, which contains a large HTML subtree with multiple paragraph elements. The goal is to update only small portions of the content regularly, while leaving the majority unchanged. Co ...

javascripthtmlperformance

The test that utilizes MemoryRouter to render a component with required parameters is failing, showing the error message 'role: heading not found'

Currently, I am working on writing unit tests for the Profile component. This component includes a userParams() function to retrieve the userID from the path variable in order to display the user's information in a profile format. During testing, I u ...

javascriptreactjstestingjestjsreact-router

Using CSS for layout positioning

This problem has been confounding me for quite some time now, even though the solution is likely very simple. I can't seem to figure out how to align two divs of different sizes side by side without one being pushed down a few lines when text is added ...

htmlcss