文章をグラデーションで徐々にフェードアウトさせる方法

最近、文書の途中からグラデーションをかけて、徐々にフェードアウトをさせていき、最後に「続きを読む」的なリンクを貼る・・・というデザインを見かけるようになりました。

このデザイン手法、どのように実装しているのか調べてみました。

例えばイベント管理サービス・Peatix。イベント情報の後半からフェードアウトが始まり「続きを読む」ボタンが登場します。CSSを見てみると、

:after {
	content: '';
	display: block;
	height: 40px;
	width: 100%;
	position: absolute;
	bottom: 0;
	background-color: #fff;
	background-image: linear-gradient(rgba(255,255,255,0),#ffffff);
	background-color: transparent;
}

イベント情報全体を指定するsection要素のafter疑似要素で、幅100%, 高さ40ピクセルのboxにlinear-gradientでグラデーションを指定しています。位置の指定はposition: absolute;で。

ブログマガジンB.L.G.では、著者のプロフィール部分にグラデーションがかけられ「ブロガーページをみる」というリンクが設置してあります。

.txt-hide{
	width: 280px;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 60px;
	display: block;
	background-size: 100%;
	background-image: linear-gradient(top, rgba(255,255,255,0) 0%,
		rgba(255,255,255,0.03) 3%,#ffffff 100%);
}

文章のp要素の直前に、空のdiv要素を記述しており、そのdiv要素をposition: absolute;で重ねている感じです。グラデーションはPeatix同様にlinear-gradientを使用しています。

この文章が徐々にグラデーションしていくデザイン手法。実装も簡単なので、今後も増えていきそうな気がしますね。

ちなみに勝手に「Sentences fade-out gradually = SFG」と命名してみましたが、どうでしょう?ビミョーかな(笑)

P.S. 転載させていただいたソースコードから、一部ベンダープリフィックスによる指定の部分は省略させていただきました。

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働いています。ごくたまに個人でもWebサイト作ってます。趣味ではジャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー