zondag 4 maart 2018

fading text

When there is a lot of text to be read, you can fade it to white and give a option to read the rest of the text. This is how it is done in css. You put a gradient absolute positioned block over it.

https://jsfiddle.net/pz1nsrLw/14/

html

<div id="fading">
Dit is een tekst geschreven<br/>
Dit is een tekst geschreven<br/>
Dit is een tekst geschreven<br/>
Dit is een tekst geschreven<br/>
Dit is een tekst geschreven<br/>
Dit is een tekst geschreven<br/>
</div>

css

#fading {
  height: 100px;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}

#fading:after { 
  content:'';
  width:100%;
  height:5rem;    
  position:absolute;
  left:0;
  bottom:0;
  background-color: black;
  background:linear-gradient(rgba(255,255,255,0), #fff);
}

Geen opmerkingen:

Een reactie posten