段落シャドウ スタイルの右下の色はグレーです。 CSS: さまざまなストローク効果のためのいくつかのテクニック
Web デザインに関しては、タイポグラフィーが私のお気に入りのおもちゃです。 もちろん、フォントのスタイルやサイズを少し変更するだけで、人の注意を引くことができます。 非常にシンプルで非常に効果的です。このテーマに関して多くの本が書かれており、多くの本が論争で壊れています。 今日は、タイポグラフィー全般に関するアドバイスはしません。私には十分な資格がありませんが、Web サイトのテキストをデザインする方法についてはいつでも歓迎します。 そこで今日は、CSS3 プロパティの使用方法をいくつか紹介します。 テキストシャドウ、非常にシンプルですが、正しく使えば驚異的な効果を発揮します。
基本的なテキストシャドウ構文
この物件 CSS3-moz や -webkit などのベンダー プレフィックスなしで、すべての最新のブラウザーで動作します。 IE でもこのプロパティを理解するように教えることができます。Modernizr または類似のものを使用する必要があります。
Text-shadow: x オフセット y オフセットのぼかし色。
基本的な構文はこれですべてです。 最初の値は水平オフセット、2 番目の値は垂直オフセット、影のブラー、および影の色です。 例を見てみましょう:
テキストシャドウ: 2px 4px 3px rgba(0,0,0,0.3);
影を移動し、3 ピクセルだけぼかし、透明度 30% の黒を割り当てました。 アルファ チャネルまたは透明度を使用するのはなぜですか? これにより、色の選択を気にせずに、透明度の値を変更するだけで、アクションをより自由に行うことができます。 かなり早く終わるのでオススメです。
凹んだ文字
body (背景: #222; ) #text h1 ( color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); )
ここでの操作原理は次のとおりです。背景は文字よりわずかに明るく、わずかに透明度のある明るい影です。 結果は写真の通りです、試してみてください。
ハードシャドウ
テキストシャドウ: 6px 6px 0px rgba(0,0,0,0.2);
今はレトロなスタイルが流行していますが、そこではぼかさず影を使っています。 さて、準備は完了です
二重影
テキストシャドウ: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
ここで、プロパティの別のトリッキーな機能が使用されます テキストシャドウでは、セレクターをカンマで区切ってリストすることができるため、必要なだけシャドウを作成できます。 最初の影に背景に似た色を割り当てると、図のような効果が得られます。
ダウンアンドアウェイ
テキストシャドウ：0px 3px 0px #b2a98f、0px 14px 10px rgba(0,0,0,0.15)、0px 24px 2px rgba(0,0,0,0.1)、0px 34px 30px rgba(0,0,0,0.1) );
文字が大きくて、背景からはみ出しているように見えますね。 ここでは、ぼかしのレベルと位置が異なる 4 つのシャドウを使用します。 一般に、より多くの影を使用すると、より現実的な効果が得られます。プロジェクトではこれを考慮してください。
小さな3Dテキスト
テキストシャドウ: 0px 4px 3px rgba(0,0,0,0.4)、0px 8px 13px rgba(0,0,0,0.1)、0px 18px 23px rgba(0,0,0,0.1);
前の例と同様に、3 つの影がより近くに配置されているため、テキストの立体感と重みの効果が得られます。
Mark Dotto による 3D テキスト
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1)、0 1px 3px rgba(0,0,0,.3)、0 3px 5px rgba(0,0,0,.2)、0 5px 10px rgba(0) ,0,0,.25)、0 10px 10px rgba(0,0,0,.2)、0 20px 20px rgba(0,0,0,.15);
このデザイナーの作品をオンラインで見つけて、見逃すわけにはいきませんでした。 印象的なリアリズム。
ゴードン・ホールによるインデントされたテキスト
背景色: #666666; -webkit-background-clip: テキスト; -moz-background-clip: テキスト; 背景クリップ: テキスト; 色: 透明; テキストシャドウ: rgba(255,255,255,0.5) 0px 3px 3px;
この施設での印象的な仕事のもう 1 つの例 テキストシャドウ。 しかし、原理は上で述べたものと同じです。 背景は少し明るく、文字の下の影は明るく、上は暗くなります。 シンプルな作りですが、とてもカッコいいです。
シャインテキスト
テキストシャドウ: 0px 0px 6px rgba(255,255,255,0.7);
ここでもすべてがシンプルです。影を移動せず、より強くぼかして白にします。 それだけが輝きなのです。
レトロなスタイル
テキストシャドウ: -10px 10px 0px #00e6e6、-20px 20px 0px #01cccc、-30px 30px 0px #00bdbd;
上でレトロなスタイルについて話しましたが、これは同じオペラからのものです。 今とても流行っている、複数のクリアシャドウ。 ご自身の判断でご使用ください
複数の光源
テキストシャドウ: 0px 15px 5px rgba(0,0,0,0.1)、10px 20px 5px rgba(0,0,0,0.05)、-10px 20px 5px rgba(0,0,0,0.05);
これは、全方向に影を与える複数の光源の効果です。
浮き出たテキスト
色: rgba(0,0,0,0.6); テキストシャドウ: 2px 8px 6px rgba(0,0,0,0.2)、0px -5px 35px rgba(255,255,255,0.3);
凹んだテキストはすでにそこにありましたが、今は盛り上がっています。 非常にシンプルな効果ですが、たとえば見出しなどで非常に見栄えがします。 使ってみて、試してみてください
結論として私が言いたいのは、 CSS3 の text-shadow プロパティすでにご覧のとおり、非常にシンプルです。 しかし、少しの想像力を駆使して適切に使用すると、驚くべき効果が得られます。
実験してください、良い一日を
キャプションがボタンやパネルの色と一致しなかったり、単にテキストがページの背景とコントラストが悪かったりしたときに、不快な思いをしたことはありますか? を使用することで CSSシャドウこの問題は、text-shadow プロパティを使用してテキストの読みやすさとコントラストを向上させることで簡単に解決できます。
示されている例では、さまざまな状況でテキスト シャドウを使用しています。これは、この問題を自分でさらに研究できるように、必要な基礎を提供します。
1. 基本的な設定
新しいものを作成する HTMLファイル次のコードをそれに追加します HTMLそして CSS:
HTMLセクションにタグを追加します
テキストクラスの場合:
ウェブコードマニア
この要素には、CSS テキスト シャドウを追加します。 画面上で見栄えが良くなるように、この要素の初期プロパティを設定します。
次に、text-shadow 属性をテキストに設定しましょう。 まず、この属性がどのような値を取るかを調べてみましょう。
テキストシャドウ: 4px 4px 4px #ccc;
- 4px - X オフセット ( 水平);
- 3px - Y 軸オフセット ( 垂直);
- 2px - ぼかし値。
- #ccc - 色。
これは次のように設定されます。
Text-shadow: 水平オフセット垂直オフセットぼかし色。
カラーは 16 進コード #ccc または RGBA (0,0,0,0.3) で表すことができます。 。 CSS では、次のように CSS インナーシャドウをテキストに適用できます。
。文章（
フォントサイズ: 5em; /* 文字を大きくします */
テキストシャドウ: 4px 3px 2px #ccc;
}
この影付きテキストのブラウザ表現は次のようになります。
ウェブサイトの例
次に、さまざまな方法で body 要素の背景色を変更します。 一部の CSS シャドウには特定の背景が必要であり、そうでないと目立たないため、これを行います。 文字をより美しく見せるために、大文字に設定します。
2. インプリント効果
文字の色を背景より少し濃いめの色に設定します。 次に、不透明度を下げて小さな白いテキストの影を適用します。
体 （
背景: #222;
}
。文章（
フォントサイズ: 5em;
色: rgba(0,0,0,0.6); /* テキストの色 */
テキストシャドウ: 2px 2px 3px rgba(255,255,255,0.1); /* 影を追加します */
}
RGBA コードを使用して、色の不透明度を設定できます。 テキストの色の不透明度が 60% (0.6) で、div CSS シャドウの不透明度が 10% (0.1) であることに注意してください。
ウェブサイトの例
3.レトロな影効果
レトロな影は必ずしもぼかす必要はありません。 たとえば、このレトロな影を見てみましょう。
体 （
}
。文章（
フォントサイズ: 5em;
色: 白; /* 文字の色を白に変更します */
テキストシャドウ: 6px 6px 0px rgba(0,0,0,0.2); /* レトロな影を追加 */
}
ウェブサイトの例
4.二重影効果
興味深いことに、複数の CSS フォント シャドウを追加できます。 これは次のように実行できます。 text-shadow:shadow1,shadow2,shadow3; 2 つの影を追加しましょう。1 つは背景色で、もう 1 つは少し暗いです。
文章（
フォントサイズ: 5em;
テキストシャドウ: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15); /* 影が 2 つ表示されます */
}
背景は白なので、別の色は必要ありません。 ブラウザでは、効果は次のようになります。
ウェブサイトの例
5. リモートシャドウ効果
この効果は、いくつかの美しい CSS シャドウを定義する機能に基づいています。 以下は、さまざまな強度で下向きに投影される 4 つの影の効果を示しています。
体 （
背景: #fff3cd; /* 背景色を変更します */
}
。文章（
フォントサイズ: 5em;
色: 白;
テキストシャドウ: 0px 3px 0px #b2a98f,
0px 14px 10px rgba(0,0,0,0.15)、
0px 24px 2px rgba(0,0,0,0.1)、
0px 34px 30px rgba(0,0,0,0.1);
}
ウェブサイトの例
6. Mark Dottoによる3D効果
体 （
背景: #3495c0; /* 背景色を変更します */
}
。文章（
フォントサイズ: 5em;
色: 白;
テキストシャドウ: 0 1px 0 #ccc,
0 2px 0 #c9c9c9、
0 3px 0 #bbb,
0 4px 0 #b9b9b9、
0 5px 0 #aaa、
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1)、
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25)、
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
次に、これらの CSS 内部テキストのシャドウがブラウザーでどのように見えるかを見てみましょう。
ウェブサイトの例
7. リアルなゴードンホールカットテキストエフェクト
Gordon は高度な CSS マジックを使用して、外側の影だけでなく、リアルな内側の影も与えます。
体 （
背景: #cbcbcb; /* 背景色を変更します */
}
。文章（
フォントサイズ: 5em;
色: 透明;
背景色: #666666;
-webkit-background-clip: テキスト;
-moz-background-clip: テキスト;
背景クリップ: テキスト;
テキストシャドウ: rgba(255,255,255,0.5) 0px 3px 3px;
}
これにより、テキストがカットされた効果が生まれます。
ウェブサイトの例
8. テキストグロー効果
体 （背景: #992d23; /* 背景色を変更します */
}
。文章（
フォントサイズ: 5em;
色: 白;
テキストシャドウ: 0px 0px 6px rgba(255,255,255,0.7);
}
この影は、テキストに光る効果を作成します。
ウェブサイトの例
9. 浮き上がったテキスト効果
体 （背景: #629552; /* 背景色を変更します */
}
。文章（
フォントサイズ: 5em;
色: rgba(0,0,0,0.6);
テキストシャドウ: 2px 8px 6px rgba(0,0,0,0.2)、
0px -5px 35px rgba(255,255,255,0.3);
}
ウェブサイトの例
10. 長い影の効果
この効果は次を使用して実行できます。
背景色: rgb(147, 201, 67);
text-shadow: 1px 1px rgb(131, 179, 60)、2px 2px rgb(131, 179, 60)、3px 3px rgb(131, 179, 60)、4px 4px rgb(131, 179, 60)、5px 5px rgb(131, 179, 60)、6px 6px rgb(131, 179, 60)、7px 7px rgb(131, 179, 60)、8px 8px rgb(131, 179, 60)、9px 9px rgb(131, 179, 60)、10px 10px rgb(131, 179, 60)、11px 11px rgb(131, 179, 60)、12px 12px rgb(131, 179, 60)、13px 13px rgb(131, 179, 60)、14px 14px rgb (131, 179, 60)、15px 15px rgb(131, 179, 60)、16px 16px rgb(131, 179, 60)、17px 17px rgb(131, 179, 60)、18px 18px rgb(131, 179, 60) )、19px 19px rgb(131, 179, 60)、20px 20px rgb(131, 179, 60)、21px 21px rgb(131, 179, 60)、22px 22px rgb(131, 179, 60)、23px 23px rgb( 131, 179, 60)、24ピクセル 24ピクセル rgb(131, 179, 60)、25ピクセル 25ピクセル rgb(131, 179, 60)、26ピクセル 26ピクセル rgb(131, 179, 60)、27ピクセル 27ピクセル rgb(131, 179, 60) ;
色: #eaeaea;
ウェブサイトの例
結論
ご覧のとおり、text-shadow プロパティは非常に使いやすく、これを使用して独自のクリエイティブな CSS シャドウを作成できます。
説明
テキストに影を追加し、影の色、碑文に対する相対的なオフセット、ぼかし半径などのパラメータも設定します。 text-shadow プロパティは、:first-letter および :first-line 擬似要素と連携して機能します。
構文
テキストシャドウ: なし | 影[,影]*
影はどこにありますか:
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>
価値観
なし 影の追加を中止します。 color 利用可能な CSS 形式の影の色。 デフォルトでは、影の色はテキストの色と一致します。 オプションのパラメータ。 x-shift テキストに対する影の水平方向のオフセット。 このパラメータの正の値は影を右にシフトし、負の値は左にシフトします。 必須パラメータ。 y offset テキストに対する影の垂直オフセット。 負の値を使用して、影をテキストよりも高くすることもできます。 必須パラメータ。 radius シャドウブラーの半径を設定します。 この値が高いほど、影がより滑らかになり、より広く明るくなります。 このオプションが指定されていない場合、デフォルトは 0 に設定されます。通常、アンチエイリアス アルゴリズムはブラウザごとに異なるため、指定したアンチエイリアス設定に応じて影の外観が若干異なる場合があることに注意してください。
複数のシャドウ パラメータをカンマで区切って指定できます。 CSS3 は次の順序を考慮します。リストの最初のシャドウは一番上に配置され、リストの最後のシャドウは一番下に配置されます。 CSS2 では、順序が逆になります。最初のシャドウが一番下に配置され、最後のシャドウが一番上に配置されます。
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
柑橘類は南の茂みに生息するでしょうか？ はい、しかし偽物です！
例の結果を図に示します。 1.
米。 1. Safariブラウザでのシャドウビュー
ブラウザ
Opera は最大 6 ～ 9 のシャドウ オプションをサポートします。 この値を増やすと、ぼかし半径を 100 ピクセルを超えて増やすだけでなく、ブラウザのパフォーマンスに影響します。 Opera バージョン 9.5 ～ 10 では、CSS2 と同様のマルチシャドウ表示が使用されます。
バージョン 4.0 より前の Safari は 1 つのシャドウ オプションのみをサポートし、残りは無視されます。 バージョン 4.0 以降、多くのシャドウがすでに機能しています。
Internet Explorer は、バージョン 10.0 以降、text-shadow プロパティのみを理解します。 代わりに、フィルター プロパティ Shadow(parameters) が使用されます。 たとえば、次の構成では、影の色 (#666666)、その方向 (垂直から 45 度)、およびオフセット量 (4 ピクセル) を指定します。
フィルター: 影(色=#666666、方向=45、強さ=4);
CSS の text-shadow プロパティは、テキストの影を設定します。 box-shadow プロパティとよく似ています。
CSS テキストシャドウ構文
text-shadow : X Y R カラー ;
- X - X 軸に沿ったテキストに対するシャドウのシフト (ほとんどの場合、px ピクセルで設定されます)。
- Y - Y 軸に沿ったテキストに対する影のシフト (ほとんどの場合、px ピクセルで設定されます)。
- R - 影の半径 (ほとんどの場合、px ピクセルで指定されます)。
- color - 色 (任意の形式で指定できます。HTML の色名を参照してください)
text-shadow 構文では、カンマで区切って複数のシャドウを指定できます。 例えば
text-shadow : X1 Y1 R1 カラー 1 、 X2 Y2 R2 カラー 2 、 ...;
シャドウの優先度 (どちらが高く、どちらが低いか) は、特定の CSS バージョンによって異なります。 CSS3 では、リストの最初のシャドウが一番上に配置され、リストの最後のシャドウが一番下に配置されます。 CSS2 ではその逆になります。
例: HTML のテキストに影を付ける方法
例その1。 HTML内のテキストの単純な影
以下は、テキストシャドウを使用した最も単純な例です。 ここでは両方のオフセット (X と Y) を適用し、ぼかし半径も作成しました。
影付きのテキスト
影付きのテキスト
例その2。 HTML 内のテキストの固定シャドウまたはハードシャドウ
以下に 2 つの例を示します。 どちらの場合も影は同じ（固定）です。 ブレがありません。 テキストが黒い背景にある場合に作成される効果に注目してください。
固定シャドウまたはハードシャドウ背景付きの固定シャドウまたはハードシャドウ
ページは次のように変換されます
固定シャドウまたはハードシャドウ
背景付きの固定シャドウまたはハードシャドウ
例その3。 HTMLのテキストの二重影
二重影
ページは次のように変換されます
二重影
例その4。 HTMLのテキスト内の凹んだ文字
凹んだ文字 - オプション 1凹んだ文字 - オプション 2
ページは次のように変換されます
凹んだ文字 - オプション 1
凹んだ文字 - オプション 2
例その5。 HTMLのテキスト内の凹んだ文字
小さな 3D テキスト
ページは次のように変換されます
小さな3Dテキスト
JavaScript から margin にアクセスするには、次の構造を記述する必要があります。
document.getElementById("要素ID").style.margin="VALUE"
このチュートリアルでは、要素のアウトラインにさまざまな効果を作成するためのいくつかの CSS テクニックを紹介します。
ストロークにグレーを使用すると、単純な明るい影の効果を実現できます。 CSS3 には、プロパティを使用して実際の影を作成する機能があります。 ボックスシャドウただし、この簡単な方法はすべてのブラウザで機能します。
シャドウ (パディング: 20px; ボーダー: 1px ソリッド #f0f0f0; ボーダーボトム: 2px ソリッド #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; )
凹んだブロック効果も非常に簡単に実現できます。 CSS3 の丸い角を追加すると、効果が高まります。
押されました ( カラー: #fff; パディング: 20px; 背景: #111; border: 1px ソリッド #000; border-right: 1px ソリッド #353535; border-bottom: 1px ソリッド #353535; -webkit-border-radius: 5px; -moz-ボーダー半径: 5ピクセル; ボーダー半径: 5ピクセル)
この効果は、画像によく使用されるダブル ストロークに非常に似ています。 インデントとストロークの設定が使用され、二重境界線の効果が得られます。この設定とアウトライン プロパティを使用すると、ベベル エッジの効果を得ることができます。
Img.light ( アウトライン: 1px ソリッド #ddd; ボーダートップ: 1px ソリッド #fff; パディング: 10px; 背景: #f0f0f0; ) img.dark ( アウトライン: 1px ソリッド #111; ボーダートップ: 1px ソリッド #555;パディング: 10px; 背景: #333;
この効果はメニューまたはリストで使用できます。 背景色の異なる色合いを持つ上下のストロークのシンプルな組み合わせです。 覚えておくべき点の 1 つは、CSS の first-child セレクターと last-child セレクターは古いブラウザーではサポートされていないことです。 この不快な状況を回避するには、jQuery を使用します。
#indented ul(マージン: 20px 0; パディング: 0; リストスタイル: none; ) #indented ul li ( border-top: 1px ソリッド #333; border-bottom: 1px ソリッド #111; ) #indented ul li:first -child (border-top: none;) #indented ul li:last-child (border-bottom: none;) #indented ul li a ( パディング: 10px; 表示: ブロック; カラー: #fff; テキスト装飾: なし; ) #インデント ul li a:hover (背景: #111;)