Smooth Overflow: Hidden

Question

This script should explain my problem. I have a container with overflow: hidden. I want the content to be cut so that it is "smooth". The font should gradually become more transparent before it is turned off. I found a solution that you can see in my violin.

I would like to know if there is a more elegant solution compared to my solution. Now there are 5 different levels of transparency, but I want to work with at least 10 different levels. Therefore it would be very dirty. Thank you for your help!

A short HTML / CSS-Sample that shows how much code is required for this small effect:

HTML

<div id="transparencydiv">
    <div id="transparency1" class="transparencys"></div>
    <div id="transparency2" class="transparencys"></div>
    <div id="transparency3" class="transparencys"></div>
    <div id="transparency4" class="transparencys"></div>
    <div id="transparency5" class="transparencys"></div>

</div>

CSS

    #transparencydiv{
        position:absolute;
        top:45%;
        height:10%; width:100%;
    }
    .transparencys{
        float:right;
        height:100%;width:2ex;
        background-color:black;
        z-index:5;

    }
    #transparency1{opacity:0.9;margin-right:2%;}
    #transparency2{opacity:0.7;}
    #transparency3{opacity:0.5;}
    #transparency4{opacity:0.3;}
    #transparency5{opacity:0.1;}

http://jsfiddle.net/y049jbm8/

Answer 1

linear-gradient:

#scrollmenu:after {
    content:" ";
    width:15%;
    position:absolute;
    right:0;
    top:0;
    height:100%;
    background-image: linear-gradient(to right, rgba(255,255,255,0), black);
}

Fiddle

---

:

Chrome, . http://css-tricks.com/css3-gradients/

Answer 2

divs div , .

, . http://www.colorzilla.com/gradient-editor/

, !

Answer 3

! CSS:

HTML:

<div id="scrollmenu">
    <div id="arrow1"></div>
    <div id="content">
        <p>THIS CONTENT WILL SCROLL! Theres will always be a different word cut of in the end. somecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontent somecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontent</p>
        <div id="transparencydiv"></div>
    </div>
    <div id="arrow2"></div>
</div>

body, html {
    height:100%;
    width:100%;
}
* {
    padding:0;
    margin:0;
}
#scrollmenu {
    position:absolute;
    top:45%;
    height:10%;
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    background-color:black;
    color:white;
}
#arrow1, #arrow2 {
    position:absolute;
    top:0;
    height:100%;
    width:2%;
    z-index:2;
    background-color:red;
}
#arrow1 {
    left:0;
}
#arrow2 {
    right:0;
}
#content {
    height:100%;
    margin-left:2%;
    position:relative;
    z-index:1;
}
#transparencydiv {
    background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(80%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1)));
    background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,1) 100%);
    background: -o-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,1) 100%);
    background: -ms-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,1) 100%);
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 );
    height:100%;
    left:0;
    max-height:100%;
    position:absolute;
    top:0;
    width:100%;
}

:

JSFiddle .

Answer 4

- , , . , , - .

, , ( , CSS Gradient ). , , , , , .

body { background: url('http://i.imgur.com/I5G6HaZ.jpg'); }

.container { 
  background: -webkit-linear-gradient(left, white, transparent); 
  width: 50%;
  -webkit-background-clip: text;
  overflow-x: hidden;
}

p {
  width: 20em;
  
  font-size: 24px;
  -webkit-text-fill-color: transparent;
}

<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
</div>

Hide result