Css Überlauf versteckte Div Fading

Question

Dies ist etwas, das ich möchte achieve.

so ähnlich wie this * aber dies wird durch die Verwendung von Farbe verblassen.

 

<div class="something"> 
    <div class="inside"> 
    <p>Long wordingggggggggggggggggggggggggggggggggggg</p> 
    </div> 
</div> 

.something {overflow: hidden; Breite: 100px; }

Ich möchte die div Opazität verblassen, anstatt der Farbe. Ist das möglich?

Answer 1

.wrapper{ 
 
background: orange; 
 
} 
 
.big-font{ 
 
font-size: 25px; 
 
} 
 
.fade-right { 
 
background: -webkit-linear-gradient(right, rgba(0,0,0,0), rgba(0,0,0,1)); 
 
-webkit-background-clip: text; 
 
-webkit-text-fill-color: transparent; 
 
} 
 
.fade-left { 
 
background: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1)); 
 
-webkit-background-clip: text; 
 
-webkit-text-fill-color: transparent; 
 
} 
 
.fade-up { 
 
background: -webkit-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0)); 
 
-webkit-background-clip: text; 
 
-webkit-text-fill-color: transparent; 
 
} 
 
.fade-down { 
 
background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); 
 
-webkit-background-clip: text; 
 
-webkit-text-fill-color: transparent; 
 
} 
 
     

<div class="wrapper"> 
 
<p class="big-font fade-right">Long wordingggggggggggggggggggggggggggggggggggg</p> 
 
<p class="big-font fade-left">Long wordingggggggggggggggggggggggggggggggggggg</p> 
 
<p class="big-font fade-up">Long wordingggggggggggggggggggggggggggggggggggg</p> 
 
<p class="big-font fade-down">Long wordingggggggggggggggggggggggggggggggggggg</p> 
 
</div>

Answer 2

Ich habe ein Textfeld ein. Height ist auf 4em eingestellt und ich brauchte es, um unten zu verschwinden, wo der Text überläuft. Meine Lösung (getestet in Chrome 63 und Firefox 57):

.fade-text .fade-text-gradient::before { 
    mix-blend-mode: screen; 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: linear-gradient(180deg,transparent 50%, #fff 100%); 
    pointer-events: none;  
} 
.fade-text .fade-text-gradient { 
    display: inline-block; 
    position: relative; 
    color: #000; 
    background: #fff; 
    mix-blend-mode: multiply; 
} 

Beispiel:

<div class="fade-text"> 
    <div class="fade-text-gradient" style="height:4em;overflow:hidden"> 
    <span>Insert text here - enough to overflow the div</span> 
    </div> 
</div> 

[EDIT] eine noch bessere Unterstützung in Browsern:

Die oben nicht funktioniert in Microsoft Edge, also habe ich etwas mehr gegraben. Dies wird in Microsoft Edge, Firefox, Chrome, Safari auf iOS und Samsung Internet auf Android getestet. Es funktioniert und ist noch einfacher:

.fade-text { 
    background-image: linear-gradient(180deg, #000 70%, transparent 100%); 
    color:transparent; 
    -webkit-background-clip: text; 
    background-clip: text; 
} 

Beispiel:

<div class="fade-text" style="width:150px;height:150px;overflow:hidden"> 
    Put enough text here to overflow the div 
</div> 

Der Text ein- und ausblenden zu transparent und daher können Sie eine beliebige Hintergrundfarbe dahinter setzen. Aber füge die Hintergrundfarbe nicht direkt hinzu, sondern lege stattdessen ein anderes div mit der Hintergrundfarbe ein.