CSS3によるタイポグラフィ

テキストをぼかす

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
テキストと同じカラーで影を加え、テキストのアルファを0にすることで、ぼかしたテキストが表現できます。
講師:
04:26

字幕

このレッスンではテキストを 動かしてみます ブラウザで開いているHTMLドキュメントの 文字なんですけど この文字自体はゴシップ型の 書体になっているのですが ふちが滲んだようにぼけています このような設定の仕方についてご説明します DreamweaverCCで開いたのはテキストに ぼかしを加える前のHTMLドキュメントです まずテキストは

要素の中にいれた

要素 クラスはfocusになってますけど その中に”Stay focused!”という テキストが入っています そしてこのテキストなんですけど 一文字単位で扱えるように jQuiryのプラグイン lettering.jsを使って jQuiryのjavascriptコードで focusというクラスの文字を一文字ずつ span要素に分けています では現在の状態を確認しましょう ファイルメニューからブラウザでプレビュー Safariで見てみます ゴシック型の太い文字でくっきりと白く Stay focused!というテキストが現れています これを動かすにはテキストシャドウ 影を使ってぼかすような表現を加えます

要素に入れた二単語のテキストなんですが これはlettering.jsで一文字ずつ span要素に分けられています ですからここにspanの セレクターがあるのですが spanはbodyの中に見当たりませんが lettering.jsで設定が行われて その一文字単位に対してカラー ホワイトの設定になっています ここに影を加えましょう テキストシャドウプロパティです そして影の加え方なんですが X方向Y方向のずれを2つの数字で指定します 今回は影を付けるということよりも ぼかすことが目的ですのでずれ幅はなしです 0pxとします 水平方向も垂直方向もずらしません そしてボケ幅なんですが 最初は大目にとっておきましょう 0.5em 3つ目の数字はどれくらいぼかすか というボカシ幅です そして影の色ですが白にしましょう ホワイトということで まずこの段階で確認します ファイルを保存してブラウザでプレビューです そうするとはっきりくっきりした 文字の後ろにうっすらと広い影というより 光ってる雰囲気ですね それがでています これをうまく利用してぼけた文字に しようというわけです ではDreamweaverCCに戻りましょう テキストがあまりボケボケになっても何なので このボケ幅をもうちょっと小さくするんですが それにしても手前にある実際の文字が くっきりしているので ボケて見えません そこでこのカラーを工夫するわけです カラーをrgbaで設定します そして白ですから 255, 255, 255 これでいいんですけど アルファを0に設定してしまいます これで確認しましょう 保存してブラウザでプレビューします 手前にあるはずのテキストがアルファ0で 消えてしまいました そうすると後ろに0.1emで 割とシャープに作った影が残って テキストがあたかもボケたように 見えるわけです このレッスンではテキストをぼかす 表現の仕方についてご説明しました テキストの影をテキストと同じ色で ボケ幅を小さめに作ったうえで 実際のテキストをアルファ0で消してしまう というテクニックでした

CSS3によるタイポグラフィ

このコースではCSSの基礎を理解された方を対象に、CSSを用いたさまざまな文字の魅力的な見せ方を紹介していきます。ひと文字単位で細かく文字をデザインしてゆく方法や、影やグラデーション、変形などを文字に設定する方法、またテキストを使ったアニメーションや便利なJavaScriptツール、Webフォントの使い方などについても解説します。

4時間01分 (38 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年08月12日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。