はみ出した文字をぼかして消していく方法のメモ #CSS はみ出した文字をぼかして消していく方法のメモ #CSS

はみ出した文字をぼかして消していく方法のメモ #CSS

もしかしたら、気づいた人がいるかもしれませんが、indexページのタイトルの表示の仕方を変えました。

タイトル表示変更

タイトルの部分の文字の改行をやめて、ボックスの外にはみ出した文字を表示させず、さらにそれをグラデーションでぼかして消していくという・・・Playストアでよく見るアレです。それを実装してみました。
今回はそんな備忘録です。

以下、ソース

そんな大したことはやってないので、ソースコードをば。

HTML自体はめっちゃシンプルに。

CSSのほうの:afterっていう擬似属性で、白のグラデーションをかけるのがポイントですかね。背景色に合わせればどこでも使えるので、ぼかしの色はRGBで調整してください。

サンプルを表示させてみる

まずは、.blurのclassを適用していないもの

むかーしむかし、あるところにおじいさんとおばあさんが住んでいました。おじいさんは山へ芝刈りに、おばあさんは川へ選択に行きました。おばあさんが川で選択をしていると、どんぶらコッコどんぶらコッコと桃が流れてきました。

.blurのclassを適用させてみると…?

むかーしむかし、あるところにおじいさんとおばあさんが住んでいました。おじいさんは山へ芝刈りに、おばあさんは川へ選択に行きました。おばあさんが川で選択をしていると、どんぶらコッコどんぶらコッコと桃が流れてきました。

という感じで作ってみたのです。

ソースの説明

そんなに大したことをしていないので、説明という説明にもなりませんが…(泣)

まずは、文章が改行されないように、white-space: nowrapをつけます。これで文章は改行されなくなります。次に、widthで指定したボックスサイズに対して、ボックスの外にはみ出したら表示を消すoverflow:hiddenをかけます。で、ボックス位置を決めるposition:relativeをつけて、.blurのボックスを子ボックス位置決定の基準にします。

それから、.blurに擬似属性の:afterをつけて準備開始。
:afterやら:beforeやらは、contentを入れないと発動しないので、content: “”;をつけておきます。position:absoluteをつけて、さっき決めた基準に対してボックスの位置を決めるようにします。top:0やleft:0は上から数えてと左から数えての位置決定。
:afterの擬似属性をdisplay:blockを使って、ブロック化してwidth:100%やheight:100%で親ボックスと同じ大きさにします。

最後に、background-image: linear-gradientをかけて終わりです。グラデーションの開始位置とかは適当に変えてみると面白いかもしれません。

518 views/total