menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/07/12
  • CSS
  • html5

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

blur
テキストをCSSだけで映画のタイトルのようにな3Dっぽいエフェクトを演出する方法をご紹介します。

使用方法

DEMO

See the Pen KrXmdE by brightonline (@brightonline) on CodePen.0

HTML

ぼかしたいテキストをタグで囲みます。

CSS

テキストの要素に「animation」と「keyframes」を使ってエフェクトと動きをつけていきます。
今回はpタグで設定します。
「color: hsla(0, 0%, 0%, 0);」でテキストを隠します。2個目のテキストには「animation-delay」で表示を遅らせる設定をします。今回は10.2sに設定しました。keyframesの方では「text-shadow」でぼかしを演出します。「opacity」で透過度、「letter-spacing」で文字間、「transform」で大きさを指定します。この数値を徐々に変更させることで映画のタイトルのような3Dっぽいエフェクトを演出することができます。

CSSのみで設定しているので簡単に、ちょっとインパクトのある演出ができます。これもとても魅力的なテクニックですね。

コメントを残す




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11