Fading Out Text at Bottom of a Section with Transparent Div, But Height Stays Under Section After Overlaying Div

Faded text at bottom of div?

http://jsfiddle.net/6k3vV/167/

here. Need a parent with relative too

.fadeout {
bottom: 0;
height: 4em;
background: linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
position: absolute;
width: 100%;
}
section {
height: 100px;
overflow: auto;
}

Fade out divs behind transparent nav but keep a background canvas visible behind it

Fading Content using Iframes (No JavaScript)

You will need to create an Iframe tag with src attribute set to the content file you would like fade. The main content has to have separate styles. The iframe must be in focus to allow scrolling. More details in the code below.

Demo: https://fadingiframe.netlify.app/

/* Index.html style style-sheet below */

iframe {
position: absolute;
top: 5rem;
width: 100vw;
height: calc(100vh - 6rem);
border: none;
-webkit-mask-image: linear-gradient( /* Mask iframe */
transparent 1rem,
#fff 5%,
#fff 70%,
transparent 90%
);
mask-image: linear-gradient(
transparent 1rem,
#fff 5%,
#fff 70%,
transparent 90%
);
}

/* mainContent.html style style-sheet below */

body {
position: absolute;
overflow-x: hidden;
margin-top: 2rem;
color: aliceblue;
width: 80vw;
left: 5vw;
}

body::-webkit-scrollbar { /* Remove scroll bar */
display: none;
}

body {
-ms-overflow-style: none; /* keep in mind that it will only scroll if the iframe is in focus */
scrollbar-width: none;
}

p {
padding: 2rem;
font-size: 2rem;
}
  <body>
<nav></nav>
<iframe id="main-content-iframe" src="mainContent.html"></iframe>
<!-- Add iframe and src to main content html file -->
<canvas id="canvas1"></canvas>
<footer></footer>
</body>




<!-- Separate html file in root directory -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./mainContent.css" /> <!-- Link to css file -->
</head>
<body>
<section>
<!-- Your Content here-->
</section>
</body>
</html>

-------------------------------------------------------------------------

For Text only -

Body Tag Has Special/Hide Properties

I think your issue is that you do not use the "body" element selector. It has special properties, that by default set the body element height to match the screen. Although it still allows to scroll the inner content. I add and extra background div for the text as well. It provides a better reading experience. Have a look at my solution it may help you solve your problem. If you have any questions don't hesitate to ask.

Demo : https://jsfiddle.net/hexzero/5yjqk43a/

body {
background-image: black;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
color: #fff;
}

section {
position: absolute;
padding: 3rem 25%;
background-image: Linear-gradient(
transparent 6rem, <-- Should be the same as nav Height
#fff 30%, <-- Can set this to nav Height for abrupt cut-off
#fff 70%,
transparent 90%
);
-webkit-background-clip: text;
background-clip: text;
background-attachment: fixed;
scroll-behavior: auto;
z-index: 3;
}

nav {
background: rgba(0, 0, 0, 0.616);
width: 100%;
position: fixed;
top: 0;
height: 6rem; <-- Navigation Height
z-index: 4;
}

section > p {
margin-top: 12rem;
color: transparent;
}

.text-background { <-- Remove this style section to have no background for the content,
width: 60%; <-- along side the <div class="text-background"></div> element
height: 100vh;
right: 20%;
position: fixed;
top: 0;
background-image: Linear-gradient(
transparent 6rem, <-- Background to nav height
rgba(102, 51, 153, 0.924) 20%,
rgba(102, 51, 153, 0.931) 90%,
transparent 100%
);
z-index: 0;
}

canvas {
width: 100%;
background-color: rebeccapurple;
position: fixed;
top: 0;
z-index: -1;
}

footer {
position: fixed;
width: 100%;
height: 1rem;
background: rebeccapurple;
z-index: 1;
bottom: 0;
}

p {
font-size: 2rem;
}

Tell me if you would be interested in a JavaScript version, for better browsers support. Thanks

Is it possible to use pure CSS to make a HTML container be gradient fade away in a fixed height?

Yup, you can use mask-image then gradient

something like this:

#wrap {
height: 200px;
overflow:hidden;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}
<div id="wrap">
<h1>h1 Title</h1>
<p>Lorem ipsum dolor sit amet, commodo virtute in eam, delenit accusam repudiandae mei ne. No electram moderatius mei, te nusquam assentior definiebas sea. Te brute nominavi mel, quot quodsi doctus has no. No sed putent nostrud ullamcorper, no idque oratio
consulatu eos. Ius ne wisi denique, ea inani perpetua sapientem vix, in brute vivendum ius.
</p>
<p>
Inani voluptua ne sea, doming vivendum eos ea. Mea amet vero delicata ea, mazim contentiones cu per. Oratio dolores eu sit, tation perfecto adolescens nam an, lorem ludus sea id. In mollis iuvaret maluisset vim, illum mundi eos ut.
</p>
<p>
Eu nam agam putent utamur, oblique recusabo cum id. Clita elaboraret interesset pro no. Et rationibus sadipscing cum, ut nam everti gloriatur. Cu eos veniam laudem aeterno, duo ad equidem delenit vulputate. Sit in agam sale, nisl congue animal eu vis,
eam in placerat imperdiet consequuntur. In soluta volutpat usu, harum tibique ut quo.
</p>
<p>
Stet blandit an sit, populo efficiendi an sea, exerci mandamus ea mei. An vel nonumes lobortis, ne vim alterum veritus moderatius, per recteque contentiones id. Ei sed wisi timeam, nam molestie praesent salutandi eu. Et fuisset antiopam partiendo est.
</p>
<p>
Delicata necessitatibus at quo, idque adipiscing necessitatibus in eos, falli omnium moderatius an eam. Veniam essent nostrum mea at, pri ceteros salutatus vituperata te, oblique prompta et eum. Mea eu civibus evertitur, eam ei commodo viderer insolens,
ne sed augue atomorum hendrerit. Iriure accusata omittantur his ei, id iriure aperiam cotidieque has. In sale doctus mel. Et per homero graeci, sea decore detraxit efficiendi cu. Duo doctus postulant ei, esse mnesarchum posidonium cu qui.</p>
</div>

Fade the end of the text

or just add left

background: -webkit-linear-gradient(`left`, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);

section {  position: relative;}.fadeout {  position: absolute;  right: 0;  bottom: 0;  width: 100%;  height: 50%;  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);  background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);  background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);}
<section>  <p>malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor    sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  <p>malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor    sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  <div class="fadeout"></div></section>

Gradient opacity on the bottom of div

You can use this HTML

<div class="content">
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>

<div class="gradientback">

</div>
</div>

With This CSS

body{background:#000;}
.content{
width:500px;
height:300px;
position:relative;
color:#fff;
overflow:hidden;
}
.gradientback{

position:absolute;
bottom:0px;
left:0px;
width:100%;
height:50px;
background: -moz-linear-gradient(top, rgba(137,255,241,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(137,255,241,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089fff1', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}

Here is jsfiddle link

Hiding content with shadow

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


Related Topics



Leave a reply



Submit