Couvrir une zone d’un dégradé transparent en CSS

Pour un projet, j’ai eu besoin d’indiquer qu’un bloc contenait un texte tronqué. Voici comment obtenir cet effet, avec des commentaires sur les techniques utilisées.

.overflow {
	height: 150px; /* hauteur de la zone tronquée, à ajuster en fonction du besoin */
	overflow: hidden;
	position: relative;
}
.overflow:after {
	content: ""; /* pour créer un élément fantôme */
	pointer-events: none; /* pour que l'élément n'empêche pas la sélection de texte (navigateurs supportant cette propriété) */
	width: 100%; /* pour que l'élément fantôme couvre la largeur entière et 30% de la hauteur */
	height: 30%;
	position: absolute;
	left: 0;
	bottom: 0;
	/* lignes suivantes : dégradé vertical de blanc transparent vers blanc opaque (navigateurs supportant les dégradés CSS, navigateurs supportant les couleurs rgba */
	background: -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
	background: -moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
	background: -ms-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
	background: -o-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
	background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
}

A l’heure actuelle, l’effet s’affichera dans tous les navigateurs modernes, y compris IE 10 (mais pas en-dessous). Pointer-events n’est pas supporté partout mais ce n’est pas critique.