白グラデーションでマスク

白グラーデーションでマスクする

参照：http://brightonline.jp/web/css/s42/

商品一覧に付随して表示する商品説明などで、文字量がバラバラだが、カラムの高さを一定にしたい。
カラムの高さを固定化すると、文字がスパッと切れてしまい、見た目が悪い。

そこで、その要素に白グラデーションをかぶせて、文字量の影響をなくす？

結果

See the Pen 白グラデーションでマスク by annnews (@annnews) on CodePen.

ソース

html

<div>
<p class="white-grade-mask">この文章はダミーです。文字の大きさ、量、
字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、
量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
</div>

less

body {
  background-color: white;
}

div{
  border:1px solid gray;
  width:400px;
  padding:10px;
}
p{
  padding:0px;
  margin:0px;
}

.white-grade-mask {
	position: relative;
	&:after {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 2;
		content: '';
		width: 100%;
		height: 40%;
		background: linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .7) 20%, rgba(255, 255, 255, 1) 80%);
	}
}

• afterのheightを変更すれば、グラデーションの高さを変えられる
• 背景が白じゃない場合は、適当にグラデーション設定を変更すればOK