Na het vorige voorbeeld kunnen we het principe van effecten op tekst nog een beetje uitbreiden.
Deze keer groter door een heel deel tekst achter een semi-transparente PNG te steken welke de indruk geeft dat tekst gedeeltelijk verdwijnt.

download afbeelding (png 1×200 pixel 163 bytes) (44)

HTML

<h2>tekst onder png steken</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Ut congue suscipit urna. Ut adipiscing mi vitae sem. Nam vehicula. Aliquam leo enim, mollis nec, sagittis quis, cursus ut, lectus. Maecenas porttitor, nulla id convallis sodales, ligula diam ultrices sapien, ac condimentum ligula risus a purus. Curabitur id purus. Aliquam tortor tortor, fermentum sit amet, condimentum venenatis, dignissim eget, magna. Suspendisse fermentum tincidunt leo. Nulla facilisi. Phasellus a nibh quis neque blandit rhoncus. Suspendisse ultrices est ac massa. Etiam porttitor leo. Integer blandit. Aliquam diam mi, laoreet in, elementum id, fringilla sit amet, libero. Aenean commodo. Curabitur blandit mollis nisi. Nullam vitae nunc. Cras molestie. Maecenas elit.</p>
<p>Donec purus sapien, sagittis eu, fringilla at, lobortis vel, enim. Aliquam erat volutpat. Nulla feugiat. Aliquam erat volutpat. Aliquam nisl lacus, faucibus sed, eleifend consequat, pharetra ut, justo. Etiam et nibh eu tellus ultrices commodo. Nam molestie, metus a molestie ultricies, ligula sem egestas lectus, ac volutpat nisi eros vel risus. Etiam rutrum. Nunc suscipit mi in lectus. Integer in lectus. Donec ut magna ac erat varius ornare. Phasellus elementum turpis ac velit. Ut elementum pulvinar nisl. Sed pretium. Nulla risus. </p>
<p>Curabitur posuere dapibus velit. In adipiscing. Donec risus. Sed venenatis condimentum purus. Phasellus mi sem, accumsan et, ultrices et, commodo id, metus. Integer a diam. Etiam tincidunt, ante eu ultrices fermentum, magna felis mollis lorem, in lobortis nibh orci at lorem. Nunc adipiscing diam in tortor. Fusce aliquet nibh nec orci. Proin sodales. Quisque eros ligula, egestas eu, adipiscing eu, posuere a, sem. Suspendisse sollicitudin. Vivamus quis nibh a quam congue aliquet. Nulla nulla risus, interdum interdum, ultricies sed, sodales a, nisl. Ut nunc pede, tempus in, pellentesque sit amet, viverra at, odio. Donec eget urna id dui luctus pellentesque. Vestibulum tempus justo nec libero sodales feugiat. Vivamus rhoncus ligula at eros. </p>
<p>Sed commodo aliquet pede. Aenean vel leo vitae erat sagittis elementum. Duis bibendum. Vestibulum euismod pede vitae nisi. Nunc hendrerit sagittis turpis. Nulla facilisi. Integer tincidunt, tellus quis dictum auctor, massa augue volutpat leo, a eleifend erat purus vel nulla. Pellentesque ac mauris sit amet odio scelerisque consequat. Donec justo. Aliquam sapien lectus, luctus sit amet, posuere et, scelerisque vitae, metus. Etiam a mauris. Etiam rhoncus pellentesque massa. Praesent consectetuer eros in sapien sagittis rhoncus. Donec aliquam ligula a risus. Phasellus sagittis mattis lectus.</p>
<div class="fade"><!-- --></div>

CSS

body {
font-family:"Lucida Grande",Arial;
font-size:13px;
}
p {
line-height: 18px;
color: #333;
}
.fade{
background: url(fade.png) repeat-x 0 bottom;
display: block;
height: 200px;
position: relative;
z-index: 10;
margin-top: -200px;
}