Linear Fade Out Div, Content and Border (Solid at Top to Transparent at Bottom)

Linear fade out div, content and border (solid at top to transparent at bottom)

Quoting from my answer here:

Check this working demo, and try to add/remove contents from #contents

HTML

<div id="container">
    <div id="contents">
        Some contents goes here
    </div>
    <div id="gradient">
    </div>
</div>

CSS

#container {
    position:relative;
}
#contents {
    background:red;
}
#gradient {
    position:absolute;
    z-index:2;
    right:0; bottom:0; left:0;
    height:200px; /* adjust it to your needs */
    background: url(data:image/svg+xml;base64,alotofcodehere);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(70%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
}​

This will work almost in any browser which supports opacity (including IE9), and here's the IE8 "rgba" fallback (untested):

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

To generate your own gradient, visit Colorzilla.

The first stop (0%) must have opacity 0 ( rgba(255,255,255,0); ), then around 70% - do some tests to find what's good for you - add another stop with opacity 1 ( rgba(255,255,255,1); ).

CSS - Fading All Edges of div to Transparent over Defined Distance

I've used box shadows in the past to achieve this sort of effect.

  box-shadow: 0px 0px 25px 25px rgba(55,54,51, 1);

By adding a box shadow with a translation of 0px in any direction, a spread distance of 25px, and a blur radius of 25px, it makes it the 50px blur you like. By changing the margin to 50px and using top, right, etc. for positioning you can get it exactly where you want.

HTML:

<div class="formBackground">
  <form id="gform" method="POST" action="***">
    <input type="text" id="name" name="name" placeholder="Name" style="width: 100%; float: left;">
    <input type="text" id="email" name="email" placeholder="Email" style="width: 100%; float: left;">
    <input type="textarea" id="message" name="message" placeholder="Write your message here..." style="width: 100%; float: left;">
  </form>
</div>

CSS:

.formBackground {
    height: auto;
    background-color : rgba(55,54,51, 1);
    overflow: hidden;
    margin: 50px;
    box-shadow: 0px 0px 25px 25px rgba(55,54,51, 1);
}

Fade bottom or top of text in a div

I was able to get an ugly prototype together. This only works with -webkit- browsers (Chrome, Safari, etc), but it might point you in the right direction and help you adapt to get it cross browser compatible.

.con{background:#0f0; color:#fff;}ul{margin:0; padding:0; list-style:none; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,  from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

<div class="con">    <ul>     <li>thing1</li>     <li>thing2</li>     <li>thing3</li>     <li>thing4</li>     <li>thing5</li>     <li>thing6</li>    </ul></div>

How to fade out text on top of semi-transparent div using CSS?

I finally found a solution that meets all my requirements by adding just one line of CSS to .box > p: -webkit-mask-image (accepted answer by Adrian van Vliet). I've updated my codepen to show this solution: http://codepen.io/thdoan/pen/wKZBrN

.box > p {
    -webkit-mask-image: -webkit-gradient(
        linear,
        left 50%,
        left bottom,
        from(rgba(0,0,0,1)),
        to(rgba(0,0,0,0))
    );
}

Even though this is considered "non-standard" CSS, it's no big deal for my case since if a browser doesn't support it then the content will degrade gracefully to white text simply not having a gradient fade. In the meantime, I am experimenting with another solution that is more cross-browserish using SVG: Applying SVG effects to HTML content. I will update this answer with a codepen using an SVG mask if I ever get it to work.

Thanks to all who replied :-).

UPDATE: Here is a solution using SVG: http://codepen.io/thdoan/pen/rObVdJ

The full cross-browser solution is laid out in the nice tutorial, CSS Masks – How To Use Masking In CSS Now by Christian Schaefer.

CSS - fading gradient border from-to

You can try like below. make sure to correctly set the different values.

.box {  height:50px; /* this need to be a multiple of 10 for the effect to work */  border-top:   10px solid;  border-bottom:10px solid;  background:#f2f2f2;  border-image:repeating-linear-gradient(#fff 0,red 10px) 10;}

<div class="box"></div>

Gradient borders

The border-image property can accomplish this. You'll need to specify border-style and border-width too.

border-image: linear-gradient(#f6b73c, #4d9f0c) 30;
border-width: 4px;
border-style: solid;

Read more on MDN.

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

---

Related Topics