###
  • インターネット
  • プログラム
  • ゲーム
  • 問題点
  • ウィンドウズ
  • ソーシャルメディア
  • アンドロイド
  • iOS

    • シャドウCSSでブロックします。 CSS の内部シャドウ

    02.07.2020 ルーターとモデム

    説明

    要素に影を追加します。 パラメータをカンマで区切って複数のシャドウを使用することができます。シャドウを適用するときは、リスト内の最初のシャドウがより高く、最後のシャドウがより低くなります。 border-radius プロパティを使用して要素の丸め半径が指定されている場合、影の角も丸くなります。 影を追加すると要素の幅が増えるため、ブラウザに水平スクロールバーが表示される場合があります。

    構文

    ボックスシャドウ: なし |<тень> [,<тень>]*
    どこ<тень>:
    差し込み<сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

    価値観

    none 影の追加をキャンセルします。 inset 要素の内側に影が描画されます。 オプションのパラメータ。 x オフセット 要素に対する影の水平方向のオフセット。 このパラメータの正の値は影を右にシフトし、負の値は左にシフトします。 必須パラメータ。 y offset 要素に対する影の垂直オフセット。 正の値を指定すると影が下に移動し、負の値を指定すると影が上に移動します。 必須パラメータ。 ぼかし 影のぼかし半径を設定します。 この値が高いほど、影がより滑らかになり、より広く明るくなります。 このパラメータが指定されていない場合、デフォルトは 0 に設定され、影がぼやけるのではなくシャープになります。 ストレッチ 正の値を指定すると影が引き伸ばされ、負の値を指定すると逆に影が圧縮されます。 このパラメータが指定されていない場合、デフォルトは 0 で、影は要素と同じサイズになります。 color 利用可能な CSS 形式の影の色。デフォルトの影は黒です。 オプションのパラメータ。

    パラメーターをカンマで区切って、複数のシャドウを指定することができます。 次の順序が考慮されます。リストの最初のシャドウは一番上に配置され、リストの最後のシャドウは一番下に配置されます。

    HTML5 CSS3 IE Cr Op Sa Fx

    ボックスシャドウ

    柑橘類は南の茂みに生息するでしょうか？ はい、しかし偽物です！

    例の結果を図に示します。 1.

    米。 1. Safariブラウザでのシャドウビュー

    ブラウザ

    バージョン 5.1 より前の Safari、バージョン 10.0 より前の Chrome、バージョン 4.0 より前の Android、およびバージョン 5.0 より前の iOS Safari は、-webkit-box-shadow プロパティをサポートします。

    バージョン 4.0 より前の Firefox は、-moz-box-shadow プロパティをサポートしています。

    バージョン 9.0 より前の Internet Explorer は box-shadow プロパティをサポートしていません。代わりに、非標準のフィルター プロパティを使用できます。

    フィルター: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);

    ここで: offX - 水平方向のシャドウ オフセット。 offY — 垂直シャドウのオフセット。 カラー — 影の色。

    ドロップシャドウ フィルターを適用すると、鮮明でシャープな影が生成されるため、シャドウ フィルターを使用してぼかし効果を得ることができます。

    フィルター: progid:DXImageTransform.Microsoft.shadow(direction=120、color=#000000、Strength=10);

    ここで: 方向 - 0 ～ 360°の影の方向角度。 color — 影の色。 強度 — シャドウのオフセット (ピクセル単位)。

    タイポグラフィーは、Web デザイナーのお気に入りのおもちゃです。 CSS には非常に興味深いツールが 1 つあります。 テキストシャドウ(テキストシャドウ) は、一見非常にシンプルに見えますが、創意工夫と想像力を使えば、記憶に残る効果を生み出すことができます。

    シャドウの基本

    財産 テキストシャドウとても使いやすいです。 これは、すべての最新のブラウザーでサポートされており、接頭辞を使用しなくてもサポートされています。 ただし、IE ではサポートされていません (IE9 でも)。 Modernizr などのツールを使用すると、古いバージョンの IE でも CSS3 効果を引き出すことができます。

    構文

    テキストシャドウを作成するには、プロパティ構文を使用します。 テキストシャドウそれを以下に示します。 定義するパラメータは 4 つあります。最初の 2 つは影の位置を設定し、3 番目はぼかしレベルを設定し、4 番目は影の色を決定します。

    Text-shadow: 水平オフセット垂直オフセットぼかし色;

    以下は、下に 2 ピクセル、右に 4 ピクセルオフセットされ、3 ピクセルだけぼかされ、不透明度 30% で黒に設定されたテキスト シャドウの例です。

    テキストシャドウ: 2px 4px 3px rgba(0,0,0,0.3);

    このプロパティを使用した結果は次のようになります。

    なぜRGBAが使われるのでしょうか？

    プロパティを定義するときに、rgba を使用して影の色を指定する必要はありません。 ただし、rgba では、影を定義するときに、透明度のレベルという別の次元が追加されます。

    この方法は、色を決定する他の方法よりもはるかに簡単です。 影の色の色合いを決定することに集中する必要はありません。影の色の色合いは、背景色よりわずかに濃いか明るいだけです。 rgba を使用すると、色を混合するときに白または黒を使用して不透明度を高めるだけで、目的の背景色を実現できます。

    プロパティの使用 テキストシャドウ単純なドロップシャドウだけでなく、テキストにさまざまな効果を作成できます。 たとえば、落ち込んだテキストの錯覚を作成するコードは次のとおりです。

    まず、テキストの色を背景色より少し暗く設定する必要があります。 そして、プロパティを使用する必要があります テキストシャドウ色が白く透明感が増しました。

    背景色は #222、文字色は不透明度 60% に設定されています。 白い影は、不透明度 10% で少し右下に配置されます。

    本文 (背景: #222; ) #text h1 (色: rgba(0,0,0,0.6); テキストシャドウ: 2px 2px 3px rgba(255,255,255,0.1); )

    影をぼかす必要は全くありません。 くっきりとした影はWebサイトのデザインにもよく合います。

    テキストシャドウ: 6px 6px 0px rgba(0,0,0,0.2);

    本当の楽しみは、影が 1 つしかないという制限を捨てたときに始まります。 カンマを使用して定義を区切ることにより、必要なだけシャドウを使用できます。

    テキストシャドウ: シャドウ 1、シャドウ 2、シャドウ 3;

    ここでは 2 つの影を使用する例を示します。 最初のものは背景と同じ色です。

    テキストシャドウ: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

    長距離下シフト

    複数のシャドウを使用するコツを掴めば、結果はますます劇的なものになります。 テキストに 3D 効果を作成するのは非常に簡単です。

    この例では 4 つのシャドウを使用しており、すべて異なる距離で下にシフトされ、ぼかされています。

    テキストシャドウ: 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) );

    少しだけシフトダウンして大きくぼかします

    これは同じアイデアの別の具現化です。 3 つの影の移動距離が小さくなり、よりぼやけます。

    テキストシャドウ: 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);

    Mark Dotto による 3D テキスト

    このエフェクトは Web サイト MarkDotto.com で使用されています。 12 の異なるシャドウを使用して、優れた 3D 効果を作成します。

    テキストシャドウ: 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);

    ゴードン・ホールによるインデントされたテキスト

    上の例では、私が自分のテクニックを「クイック アンド ダーティ」活版効果と呼んでいることに注目してください。 それは、より信頼できる本格的な挿入テキストを作成するための、より複雑な方法があるからです。

    Gordon は、本格的な CSS ブードゥーを使用して、外側の影だけでなく、本物の内側の影も実現します。 このテクニックの詳しい説明については、彼のブログ投稿をご覧ください。

    背景色: #666666; -webkit-background-clip:テキスト; -moz-background-clip: テキスト; 背景クリップ: テキスト; 色: 透明; テキストシャドウ: rgba(255,255,255,0.5) 0px 3px 3px;

    グロー

    テキストシャドウ: 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);

    結論

    ほとんどの CSS 効果と同様、シャドウは非常に簡単に実装できます。 しかし、シンプルなアクションを組み合わせることで、驚くべき効果を生み出すことができます。

    ページ上のブロック要素の下の影は、通常、3 次元効果を生み出したり、要素に注目を集めたり、デザインの一部として使用されます。 要素の下の小さな影も、ページにボリュームと奥行きを与えます。

    影を追加するには、box-shadow プロパティを使用します。このプロパティには 6 つの値があり、そのうちの 2 つだけが必要です。 図では、 図 1 は、box-shadow プロパティとすべての可能な値を示し、それらを識別するために番号が付けられています。

    米。 1. ボックスシャドウのプロパティ値

    1. inset キーワードは要素内に影を設定します。
    2. 影を水平方向にシフトします (5px - 右、-5px - 左)。
    3. 垂直シフト (5px - 下、-5px - 上);
    4. 影のぼかし半径 (0 - シャープな影);
    5. シャドウストレッチ (5px - ストレッチ、-5px - 縮小);
    6. 影の色。

    水平方向と垂直方向のシフトのみを指定する必要があります。その他のパラメータはすべてデフォルトで使用されます。 この場合、影はにじみがなく、黒くならずに鮮明になります。

    さまざまなパラメータとその値を組み合わせることで、さまざまな種類の影を得ることができます。 テーブル内 1 はコードとそれがもたらす結果を示しています。

    テーブル 1. シャドウパラメータの組み合わせ
    コード 結果 説明
    ボックスシャドウ: 5px 5px; 右と下の鋭い影。
    ボックスシャドウ: -5px -5px; 左側と上に鋭い影があります。
    ボックスシャドウ: 0 0 5px; 要素の周りのぼやけた影。
    ボックスシャドウ: 0 0 5px 2px; 影を 2 ピクセル拡大します。
    ボックスシャドウ: 0 0 5px 2px 赤; 要素の周囲が赤く光ります。
    ボックスシャドウ: 0.4em 0.4em 5px rgba(122,122,122,0.5); 半透明の影。
    ボックスシャドウ: インセット 0 0 6px; 中に影が。

    表からわかるように、シャドウ シフトはピクセル単位で指定する必要はありませんが、これは便利です。 影の色は、使用可能な任意の形式で指定できます。たとえば、半透明の影を得るには、そのような影はどのような背景にも適しています。 例 1 は、これを行う方法を示しています。

    例 1: 背景画像上の影

    HTML5 CSS3 IE 9+ Cr Op Sa Fx

    影でブロックする

    敵の旗が完璧な状態にあるときは、それに逆らってはなりません。 敵の陣営が難攻不落のときは攻撃しないでください。 これが変更管理です。

    孫子、訳。 ニコライ・コンラッド

    この例の結果を図に示します。 2. ブロックの角の丸みに沿って影が付きます。

    米。 2. 背景画像に影が現れる

    「幅の広い」シャドウを追加する場合は、ブラウザ ウィンドウの表示境界を超えて拡張され、水平スクロールバーが表示される可能性があることに注意してください。

    シャドウは擬似要素に追加することもできます。これは複雑なレイアウトで必要になる場合があります。 図では、 図 3 は、シャドウが追加されたヘッダー ブロックを示しています。 ジャンクションの線を避けるには、::after 疑似要素を使用し、それにシャドウを追加する必要があります。

    米。 3.影でブロックする

    例 2 は、そのようなブロックの作成を示しています。

    例 2. 影付きブロック

    HTML5 CSS3 IE 9+ Cr Op Sa Fx

    影でブロックする

    見出し

    コンテンツをブロックする

    要素には複数のシャドウを含めることができ、そのパラメーターは box-shadow プロパティの値にカンマで区切ってリストされます。 例 3 は、すべての画像に二重影を追加する方法を示しています。

    例 2. 影付きブロック

    HTML5 CSS3 IE 9+ Cr Op Sa Fx

    画像

    この例の結果を図に示します。 4.

    米。 4.二重影画像

    最初の影は、ぼかし半径 20 ピクセルで画像の左側に表示され、そのサイズは 4 番目のパラメーター (-20 ピクセル) によって縮小されます。 2 番目のシャドウのパラメータは小数点以下に示されており、シャドウは画像の右側に表示され、対称性のために縮小されています。

    要素に影を追加します。 パラメータをカンマで区切って複数のシャドウを使用することができます。シャドウを適用するときは、リスト内の最初のシャドウがより高く、最後のシャドウがより低くなります。 border-radius プロパティを使用して要素の丸め半径が指定されている場合、影の角も丸くなります。 影を追加すると要素の幅が増えるため、ブラウザに水平スクロールバーが表示される場合があります。

    簡単な情報

    構文

    ボックスシャドウ: なし |<тень> [,<тень>]*

    どこ<тень>:

    差し込み<сдвиг по x> <сдвиг по y> <размытие> <растяжение> <цвет>

    指定

    説明例
    <тип> 値の型を示します。<размер>
    A&&B値は指定された順序で出力される必要があります。<размер> && <цвет>
    あ | B提案された値 (A または B) から 1 つの値のみを選択する必要があることを示します。通常 | 小さな帽子
    || B各値は独立して使用することも、任意の順序で他の値と一緒に使用することもできます。幅 || カウント
    値をグループ化します。[ 作物 || クロス ]
    * 0 回以上繰り返します。[,<время>]*
    + 1 回以上繰り返します。<число>+
    ? 指定するタイプ、単語、またはグループはオプションです。差し込み？
    (A、B)少なくとも A 回、B 回まで繰り返します。<радиус>{1,4}
    # カンマで区切って 1 回以上繰り返します。<время>#
    ×

    価値観

    none 影の追加をキャンセルします。 inset 要素の内側に影が描画されます。<сдвиг по x>要素に対するシャドウの水平方向のオフセット。 このパラメータの正の値は影を右にシフトし、負の値は左にシフトします。<сдвиг по y>要素に対するシャドウの垂直方向のオフセット。 正の値を指定すると影が下に移動し、負の値を指定すると影が上に移動します。<размытие>影のぼかし半径を設定します。 この値が高くなるほど、影がより滑らかになり、より広く明るくなります。 このパラメータが指定されていない場合、デフォルトは 0 になり、影はぼやけるのではなく鮮明になります。<растяжение>正の値を指定すると影が引き伸ばされ、負の値を指定すると影が圧縮されます。 このパラメータが指定されていない場合、デフォルトは 0 で、影は要素と同じサイズになります。<цвет>利用可能な CSS 形式の影の色。デフォルトの影は黒です。

    パラメーターをカンマで区切って、複数のシャドウを指定することができます。 次の順序が考慮されます。リストの最初のシャドウは一番上に配置され、リストの最後のシャドウは一番下に配置されます。

    例

    ボックスシャドウ

    柑橘類は南の茂みに生息するでしょうか？ はい、しかし偽物です！

    例の結果を図に示します。 1.

    米。 1. 影の種類

    オブジェクトモデル

    オブジェクト.style.boxShadow

    注記

    バージョン 5.1 より前の Safari、バージョン 10.0 より前の Chrome、バージョン 4.0 より前の Android は、-webkit-box-shadow プロパティをサポートします。

    バージョン 4.0 より前の Firefox は、-moz-box-shadow プロパティをサポートしています。

    バージョン 9.0 より前の Internet Explorer は box-shadow プロパティをサポートしていません。代わりに、filter プロパティを使用できます。

    フィルター: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);

    ここで: offX - 水平方向のシャドウ オフセット。 offY — 垂直シャドウのオフセット。 カラー — 影の色。

    ドロップシャドウ フィルターを使用すると、くっきりとしたシャープな影が得られるため、シャドウ フィルターを使用してぼかし効果を得ることができます。

    フィルター: progid:DXImageTransform.Microsoft.shadow(direction=120、color=#000000、Strength=10);

    ここで: 方向 — 0 から 360° までの影の方向の角度。 color — 影の色。 強度 — シャドウのオフセット (ピクセル単位)。

    仕様

    各仕様はいくつかの承認段階を経ます。

    • 推奨事項 - この仕様は W3C によって承認されており、標準として推奨されています。
    • 推薦候補 ( 可能な推奨事項) - 標準を担当するグループは、標準がその目標を満たしていることに満足していますが、標準を実装するには開発コミュニティからの支援が必要です。
    • 提案された推奨事項 推奨事項) - この段階で、文書は最終承認のために W3C 諮問委員会に提出されます。
    • Working Draft - コミュニティレビューのために議論され、修正されたドラフトのより成熟したバージョン。
    • 編集者の草案 ( 編集草案) - プロジェクト編集者によって変更が加えられた後の標準のドラフト版。
    • 下書き （ 仕様草案) - 標準の最初の草案バージョン。
    ×

    box-shadow プロパティは、要素に 1 つ以上の影を追加します。 シャドウは、指定された距離だけオフセットされた要素のコピーです。 影は外部または内部、ぼやけたものまたは平らなものにすることができ、角が丸いブロックの輪郭に従うことができます。 inset キーワードを使用すると、要素の内側に影が作成され、要素が視覚的にボリュームアップしたり凹んだりするようになります。

    box-shadow プロパティを使用してボックスの影を作成する方法

    ブラウザのサポート

    IE: 9.0
    角： 12.0
    Firefox: 4.0、3.5 -moz-
    クロム： 10.0、4.0 -ウェブキット-
    サファリ： 5.1、3.1 -ウェブキット-
    オペラ： 11.5
    iOSサファリ： 5.1、3.1 -ウェブキット-
    Androidブラウザ: 4.0、2.1 -ウェブキット-

    1. ボックスシャドウプロパティの構文

    box-shadow プロパティは、1 つ以上の影をボックスに付加します。 このプロパティは、影がないことを示す値 none 、または最初から最後まで並べられた影のコンマ区切りリストのいずれかを受け入れます。

    各シャドウは個別のシャドウであり、2 ～ 4 の長さ、オプションの色、およびオプションの inset キーワードで表されます。 許容される長さは 0 です。 省略された色のデフォルトは color プロパティの値です。

    プロパティは継承されません。

    米。 1. ボックスシャドウプロパティの構文
    値:
    X オフセット 影の水平オフセットを設定します。 正の値を指定すると、テキストの右側に影のオフセットが描画され、負の長さを指定すると、左側に影が描画されます。
    Y オフセット 影の垂直オフセットを設定します。 正の値を指定すると影が下に移動し、負の値を指定すると影が上に移動します。
    ぼかし ぼかしの半径を設定します。 負の値は許可されません。 ぼかし値が 0 の場合、影のエッジはシャープです。 それ以外の場合、値が大きいほど、影のエッジがよりぼやけます。
    ストレッチ 影が増加する距離を設定します。 正の値を指定すると、影が指定された半径だけ全方向に広がります。 負の値を指定すると、影が縮小します。 内部シャドウの場合、シャドウを拡大するということは、シャドウの周囲の形状を圧縮することを意味します。
    色 影を設定します。 色がない場合、使用される色は color プロパティから取得されます。 Safariの場合は影の色を指定する必要があります。
    差し込み ブロックのキャスト シャドウを外側のシャドウから内側のシャドウに変更します。
    なし デフォルト値は影なしを意味します。
    イニシャル プロパティ値をデフォルト値に設定します。
    継承する 親要素からプロパティ値を継承します。

    影の効果は次のように適用されます。最初の影が上にあり、残りの影が後ろにあります。 影はレイアウトに影響を与えず、他の要素またはその影と重なる場合があります。 コンテキストの積み重ねと描画順序に関しては、要素の外側の影はその要素の背景の真下に描画され、要素の内側の影はその要素の背景の真上 ( border および border-image がある場合はその下) に描画されます。

    要素に複数のボックスがある場合、それらはすべて影を受け取りますが、影は境界線も描画される場所にのみ描画されます。 「ボックス装飾ブレイク」を参照してください。

    影によってスクロールが発生したり、スクロール可能な領域のサイズが増加したりすることはありません。

    2. ブロックシャドウの例

    2.1. インナーシャドウ

    .example-shadow-1 ( 背景: #e6e3df; テキスト整列: センター; ) .example-shadow-1 スパン (マージン: 50px; 高さ: 100px; 幅: 200px; 表示: インラインブロック; ボックスシャドウ: インセット2px 2px 5px rgba(154, 147, 140, 0.5)、1px 1px 5px rgba(255, 255, 255, 1);

    2.2. 片面にフラットシャドウ

    フラット

    フラット

    .example-shadow-2 (背景: ベージュ; テキスト整列: センター; ) .example-shadow-2 a (表示: インラインブロック; ボーダー半径: 5px; パディング: 15px 35px; フォントサイズ: 22px; テキスト-装飾: なし; マージン: 20px; 背景: #55acee: 0 5px 0 #3C93D5;

    2.3. マテリアルデザインシャドウ

    .example-shadow-3 (背景: #e8e8e8; text-align: center; ) .example-shadow-3 span (背景: 白; 表示: インラインブロック; 幅: 200px; 高さ: 100px; マージン: 50px; ボックス-shadow: 0 14px 28px rgba(0,0,0,0.25)、0 10px 10px rgba(0,0,0,0.22)