不透明度と透明度を使用してCSSでモーダルを作成する方法

getdocs

2年前

序章

CSSを使用してHTMLをスタイリングする場合、要素の不透明度を調整する方法は複数あり、この効果をデザインに使用する理由は複数あります。不透明度は、影を和らげたり、特定のタスク中に重要でないコンテンツを強調しなかったり、コンテンツをフェードインまたはフェードアウトしたりするのに役立ちます。これらの効果は、 opacity プロパティ、 transparent 色名、またはアルファチャネル。これは、不透明度を制御するための追加のセグメントを持つ色値の拡張です。

このチュートリアル全体を通して、さまざまな方法を使用して不透明度と追加のプロパティを適用し、特定の効果を効果的に実現します。 JavaScriptを使用しないアプローチで表示されるモーダルを作成します。 :target 疑似クラスと opacity, pointer-events、と transition プロパティ。次に、各アルファチャネルの色の値を使用して、影、境界線、およびコンテンツのオーバーレイを作成します。また、 transparent グラデーションで色をアニメーション化するのに役立つ色の値 :hover イベント。

前提条件

カスケードと特異性を使用してCSSスタイルをHTMLに適用する方法を読むことで得られるCSSのカスケードと特異性の機能の理解。
タイプセレクター、コンビネーターセレクター、セレクターグループに関する知識。これらはCSSでスタイル設定するHTML要素を選択する方法にあります。
の理解 color プロパティ。 CSSでの色の操作の詳細については、CSSで色の値を使用する方法を参照してください。
CSSグラデーションの知識 background プロパティ。 CSS を使用してHTML要素に背景スタイルを適用する方法を確認して、グラデーションの背景を作成する経験を積んでください。
の経験 box-shadow プロパティ。詳細については、 CSS で境界線、影、およびアウトラインを使用してHTML要素のエッジのスタイルを設定する方法を参照してください。
ローカルマシンに次のように保存された空のHTMLファイル index.html 選択したテキストエディタとWebブラウザからアクセスできます。開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズでWebサイトを構築する方法全体を試してください。

ベースHTMLとCSSの設定

この最初のセクションでは、チュートリアル全体で作成するビジュアルスタイルのHTMLを設定します。また、 styles.css ファイルを作成し、コンテンツのレイアウトを設定するスタイルを追加します。

開始するには、 index.html テキストエディタでファイルします。次に、次のHTMLをファイルに追加します。

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Destination: Moon</title>
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
    <link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;700&display=swap" rel="stylesheet">
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
  </body>
</html>

いくつかのページ設定が内部で定義されています <head> HTMLの要素。 The <meta> elementは、テキストに使用する文字セットを定義します。これは、HTML文字コードを使用せずにコード内の特殊文字を解釈する方法をブラウザーに指示します。 The <title> elementは、ブラウザにページのタイトルを提供します。 The <link> 要素はページスタイルで読み込まれます。 Google Fonts からフォントの最初の3つは、Museo Modernoをロードし、最後の3つは、追加するスタイルをロードします。 styles.css.

次に、ページのスタイルを設定するコンテンツが必要になります。 Sagan Ipsum のサンプルコンテンツを、スタイルで使用するフィラーコピーとして使用します。また、サイト名と小さなナビゲーションバーを含むHTMLをサイトヘッダーに適用します。戻る index.html テキストエディタで、次のコードブロックから強調表示されたHTMLを追加します。

index.html

<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    <header class="site-header">
      <h1 class="site-name">Destination: <strong>Moon</strong></h1>
      <nav>
        <ul class="nav-list">
          <li><a href="#" class="nav-link">Base Station</a></li>
          <li><a href="#" class="nav-link">Travel Packages</a></li>
          <li><a href="#" class="nav-link">Accommodations</a></li>
          <li><a href="#" class="nav-link">Plan Your Trip</a></li>
      </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>Schedule Your Trip</h2>
        <p>Sea of Tranquility great turbulent clouds with pretty stories for which there's little good evidence extraordinary claims require extraordinary evidence. Citizens of distant epochs rings of Uranus intelligent beings birth take root and flourish across the centuries. Corpus callosum invent the universe as a patch of light the only home we've ever known a mote of dust suspended in a sunbeam made in the interiors of collapsing stars. Kindling the energy hidden in matter Orion's sword.</p>
        <p>Vastness is bearable only through love emerged into consciousness not a sunrise but a galaxyrise emerged into consciousness courage of our questions across the centuries and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
          <a href="#" class="button">Read the Disclaimer!</a>
      </section>
    </main>
  </body>
</html>

必ず保存してください index.html ファイルを作成し、テキストエディタで開いたままにします。次に、という新しいファイルを作成します styles.css テキストエディタで開きます。これは、で参照されているファイルです。 <head> の要素 index.html. の中に styles.css ファイルに、次のコードを追加します。

styles.css

body {
  margin: 0;
  font: 100%/1.5 sans-serif;
}

main {
  margin: 6rem auto;
  width: 75ch;
  font-size: 1.125rem;
}

h2 {
  font: 400 1.875rem/1.25 MuseoModerno, sans-serif;
  color: #6b2d6b;
}

.site-header {
  font: 1.125rem / 1.25 MuseoModerno, sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  color: white;
  background: linear-gradient(135deg, #8e3d8e, #230f23);
}

.site-name {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 400;
}

.nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: stretch;
}

.nav-link {
  color: inherit;
  display: block;
  text-decoration: none;
  padding: 1.25rem 1.5rem;
}

.nav-link:hover,
.nav-link:focus {
  color: #230f23;
  background-color: white;
}

.button {
  text-decoration: none;
  display: inline-block;
  padding: 0.5rem 1.25rem;
  color: white;
  background: #4c90b2;
  border: 1px solid #2d566b;
  border-radius: 0.5rem;
}

.button:hover,
.button:focus {
  background-color: #2d566b;
}

これらのスタイルは、ページの一般的な美学とレイアウトを設定し、スタイルは body と main 要素。 The .site-header, .site-name, .nav-list、と .nav-link セレクターはすべて、ページヘッダーのスタイルを定義します。 The .button と .button:hover ルールを変更します <a> 大きなクリック可能なボタンのように表示される要素。

変更をに保存します styles.css、次にWebブラウザを開きます。 ファイルメニュー項目を選択し、開くオプションを選択します。次に、プロジェクトフォルダに移動して、 index.html ブラウザのファイル。次の画像は、ページがブラウザでどのようにレンダリングされるかを示しています。

これまでに作成したCSSは、ページの上部に紫色のヘッダーを作成し、サイトのタイトルとナビゲーションを白いテキストで表示します。以下のコンテンツは、紫色の見出しと2段落のテキストで構成されています。コンテンツの幅は75文字に制限されています。 max-width: 76ch のプロパティ値 main 要素セレクター。最後に、免責事項を読んでください！というテキストが付いた青いボタンは、コンテンツの下にある大きくてインタラクティブな要素です。

このセクション全体を通して、HTMLを設定します。 index.html ファイルを作成し、基本スタイルを作成しました styles.css ファイル。次のセクションでは、 opacity 新しい要素を非表示にして再表示するプロパティ :target 疑似クラス。

作成 `:target` との状態 `opacity` 要素を表示および非表示にする

の便利なアプリケーション opacity プロパティは、コンテンツを画面上でフェードインおよびフェードアウトさせることです。このような効果の1つの例は、ページの残りのコンテンツの前に表示されるUI要素（ライトボックスとも呼ばれます）であるモーダルがビューに遷移する場合です。。この効果は、 opacity と pointer-events プロパティと :target 疑似クラス。

開くことから始めます index.html モーダルのコンテンツを作成します。次のコードブロックから強調表示されたHTMLを </section> と </main> 終了タグ：

index.html

<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <main>
      <section>
        ...
      </section>
      <div class="modal-container">
        <section class="modal">
          <header class="modal-header">
            <h2 class="modal-title">Destination: Moon Disclaimer</h2>
            <a href="#" class="modal-close">Close</a>
          </header>
          <div class="modal-content">
            <p><strong>Disclaimer:</strong> Vastness is bearable only through love emerged into consciousness not a sunrise but a galaxyrise emerged into consciousness courage of our questions across the centuries and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
          </div>
        </section>
      </div>
    </main>
  </body>
</html>

変更をに保存します index.html、次に戻る styles.css テキストエディタで、次のコードブロックで強調表示されたCSSをファイルに追加します。

styles.css

...

.button:hover {
  background-color: #2d566b;
}

.modal-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: black;
  display: flex;
}

.modal {
  margin: auto;
  width: 90%;
  max-width: 40rem;
  background-color: white;
  border-radius: 1.5rem;
}

.modal-header,
.modal-content {
  padding: 1.5rem;
}

The .modal-container クラスは、可視スペース全体をカバーする領域を定義します。 fixed エレメント。そうして display: flex に .modal-container と組み合わせる margin: auto に .modal セレクターは、コンテンツを垂直方向と水平方向の両方でページの中央に配置します。

変更をに保存します styles.css ブラウザに戻って更新します index.html. 次の画像に示すように、黒いオーバーレイが白いコンテナでページを引き継いだため、ページのコンテンツは表示されなくなりました。

モーダルが配置され、ページのコンテンツをカバーするようになったので、インスタンス化されるまで非表示にする必要があります。 The opacity プロパティは、要素とそのコンテンツに半透明を配置できるようにする古いプロパティです。の値 opacity プロパティの範囲は 0 に 1、間に小数点を入れます。

使用を開始するには opacity プロパティ、に戻る styles.css テキストエディタで。に .modal クラスセレクター、追加 opacity の値を持つプロパティ 0、次のコードブロックで強調表示されているように：

styles.css

...
.modal-container {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1000;
   background-color: black;
   display: flex;
  opacity: 0;
}
...

これにより、モーダルビュー全体が画面上で視覚的に非表示になります。モーダルは、必要な場合にのみ表示されます。この条件付きの外観を実現するには、 :target 疑似クラス。

後に .modal-container セレクター、の新しいセレクターを追加します .modal-container:target. セレクターブロック内に、別の opacity の値へのプロパティ 1. 次のコードブロックで強調表示されているCSSは、これがどのようにフォーマットされているかを示しています。

styles.css

...
.modal-container {
  ...
  opacity: 0;
}

.modal-container:target {
  opacity: 1;
}
...

これらの変更をに保存します styles.css.

The :target 要素にURLフォーカスがある場合にインスタンス化されます。 Webブラウザでは、 id HTML要素の属性は、ポンド記号またはハッシュ記号（#). のために .modal-container:target 有効にするには、同じ要素に id 要素であり、ページにはそのURLをトリガーする方法が必要です。

戻る index.html テキストエディタで。に <div class="modal-container"> 要素、追加 id 値に設定された属性 disclaimer. 次に、 <a href="#" class="button"> 要素、変更 href からの値 # に #disclaimer. これがどのように記述されるかについては、次のコードブロックで強調表示されたHTMLを参照してください。

index.html

<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <main>
      <section>
         ...
         <a href="#disclaimer" class="button">Read the Disclaimer!</a>
       </section>
       <div id="disclaimer" class="modal-container">
         ...
       </div>
    </main>
  </body>
</html>

への変更 href valueは、ブラウザに次の要素に移動するように指示します。 id の値 disclaimer 現在のページの。一度 #disclaimer URLに追加され、次に :target CSSでアクティブになります。

これらの変更をに保存します index.html、次に戻る styles.css.

現在のページの構造では、モーダルはマウスまたはタッチスクリーンの操作から発生するすべてのクリックおよびタッチイベントをキャプチャします。これは、完全に透過的ですが、モーダル要素がページ全体をカバーしているためです。要素から双方向性を削除するために、 pointer-events の値を持つプロパティ none に .modal-container セレクタ。次に、モーダルが表示されたら、インタラクションイベントを再度受信できるようにする必要があります。に :target 疑似クラス追加 pointer-events に設定 all、次のコードブロックで強調表示されているように：

styles.css

...
.modal-container {
  ...
  opacity: 0;
  pointer-events: none;
}

.modal-container:target {
  opacity: 1;
  pointer-events: all;
}
...

The pointer-events プロパティは、要素がマウスまたはタッチベースの入力デバイスと対話する方法を変更します。値をに設定することにより none、要素は、目の見えるユーザーだけでなく、ポインタベースの入力デバイスにも表示されなくなります。そうして all 値は相互作用を復元しますが、 .modal-container アクティブで表示されるようにURLで指定されます。

最後に、モーダルをフェードインおよびフェードアウトさせるために、 transition 間でアニメートするプロパティ 0 と 1 の値 opacity.

戻る styles.css を追加します transition プロパティに .modal-container 次のコードブロックで強調表示されているセレクター：

styles.css

...
.modal-container {
  ...
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}

.modal-container:target {
  opacity: 1;
  pointer-events: all;
}
...

The transition プロパティは、一連のプロパティの省略形です。 The opacity これが遷移するプロパティであることをブラウザに通知します。 The 250ms は、移行が完了するまでにかかる時間であり、単位はミリ秒単位です。最後に、 ease 移行がどのように発生するかを説明します。この場合、 ease ゆっくりと開始し、速度を上げてから、遷移の終わり近くで再び速度を落とすことを意味します。

トランジションは、モーダル内の Close リンクを押して、モーダルが表示および非表示になったときに機能します。このCloseリンクには href に設定された値 #、URLをから変更します #disclaimer に #、削除 :target 州。

変更をに保存します styles.css 更新します index.html ブラウザで。次のアニメーションは、モーダルがどのように表示および非表示になるかを示しています。

このセクションでは、 opacity モーダルコンテナを視覚的に非表示にするために使用したプロパティ。あなたも使用しました :target 疑似クラス、 pointer-events プロパティ、および transition フェードインおよびフェードアウト効果を作成するプロパティ。次のセクションでは、モーダルをより半透明にするために、アルファチャネルの色を使用します。

アルファチャネルを使用して透明な色の値を作成する

アルファチャネルは opacity プロパティですが、代わりに、を介して定義されたカラー値の追加セグメントです。 rgb(), hsl()、または16進数。どこ opacity プロパティは要素全体とその子を調整し、アルファチャネルは特定のプロパティの色の不透明度のみを調整します。このセクション全体を通して、各アルファチャネルカラー値を使用して実践します。

アルファチャネルの色の値の操作を開始するには、 stlyes.css テキストエディタで。次に、 .modal-container クラスセレクター。変更 background-color からのプロパティの値 #000 に rgba(0, 0, 0, 0.75)、次のコードブロックで強調表示されているように：

styles.css

...
.modal-container {
  ...
  background-color: rgba(0,0,0,0.75);
  ...
}
...

The rgba() 色の値は次のように機能します rgb()、赤、緑、青の光のレベルを示す3つのコンマ区切りの数字が含まれています。カラー値の1つがに設定されている場合 0、完全にオフ（黒）、および 255 完全な明るさ（白）であることを意味します。これらの3つのカラーチャネル間で、何百万もの色を生成できます。 4番目の番号はアルファチャネルで、次のように機能します。 opacity プロパティであり、からの小数点値です 0 に 1. アルファチャネルを調整すると、色が透明になり、その背後にあるコンテンツが色を通して見えるようになります。

変更をに保存します styles.css 開いて index.html Webブラウザで。 免責事項を読む！ボタンを押して、モーダルをアクティブにします。黒のオーバーレイの背景はまだ黒ですが、透明になり、背後のページが表示されます。

オーバーレイが透明になったら、モーダルに切り替えて、背景を白いテキストのある紫色のグラデーションに変更することで、より視覚的なスタイルを設定します。戻る styles.css テキストエディタで、次のコードブロックから次の強調表示されたCSSを追加します。

styles.css

...
.modal {
  margin: auto;
  width: 90%;
  max-width: 40rem;
  background: linear-gradient(135deg, hsl(300, 40%, 20%),hsl(300, 40%, 5%));
  border-radius: 1.5rem;
}

.modal-header,
.modal-content {
  padding: 1.5rem;
}

.modal-header {
  display: flex;
  justify-content: space-between;
}

.modal-title {
  margin: 0;
  color: white;
}

.modal-close {
  color: white;
}

.modal-content {
  color: white;
}

この更新をに保存します styles.css、次に更新 index.html ブラウザで。次の画像に示すように、モーダルのスタイルが更新およびレンダリングされます。

さて、に戻ります styles.css テキストエディタで。これで、 hsla() モーダルヘッダーの色を明るくするためのcolor値。また、上部の角を設定して、 border-radius モーダルに一致する値。したがって、ヘッダーはモーダル領域の外側に表示されません。次のコードブロックで強調表示されているCSSは、これを設定する方法を示しています。

styles.css

...
.modal-header {
  display: flex;
  justify-content: space-between;
  background-color: hsla(300, 80%, 90%, 0.2);
  border-radius: 1.5rem 1.5rem 0 0;
}
...

The background-color 値は hsla() フォーマット、そしてのように rgba() 値、それは hsl() フォーマットしますが、アルファチャネルを使用します。 The hsl() カラーホイールからの次数値、彩度パーセント値、および最終的な色を生成する明度パーセント値の3つの部分で構成されます。 The 300 カラーホイールに青と赤の間のカラー値を配置します。 80% 彩度が高く、色が多く、灰色が少ないことを意味します。 90% 最終的な色を明るくします。最後に、アルファチャネルは opacity プロパティ、および 0.2 値を完全に透明に近づけます。これにより、グラデーションの上に明るいオーバーレイが作成され、ヘッダーに定義が提供されます。

これらの変更をに保存します styles.css ブラウザに戻って更新します index.html. モーダルのヘッダーは、モーダルのコンテンツと区別するために、領域にピンク色のハイライトが表示されるようになりました。次の画像は、モーダルヘッダーがブラウザでどのようにレンダリングされるかを示しています。

透明な色の値を作成する別の方法は、16進値を使用することです。 16進数の色の値は、次の組み合わせの3つのペアで構成されます。 0 に 9 また a に f 0から255の範囲の数値に相当します。最初の3桁は赤、緑、青の値で、次のようにフォーマットされます。 #RRGGBB. アルファチャンネルを作成するには、4番目のセットを追加してパターンを作成します #RRGGBBAA.

16進アルファチャネルの操作を開始するには、に戻ります。 styles.css テキストエディタで。次に、モーダルのヘッダーとコンテンツ領域に境界線を追加して、より明確にします。これらの境界線は同じ16進値を使用しますが、アルファチャネルには異なる値が与えられます。次のコードブロックで強調表示されているCSSは、これらのスタイルの記述方法を示しています。

styles.css

...
.modal-header {
  display: flex;
  justify-content: space-between;
  background-color: hsla(300, 80%, 90%, 0.2);
  border-radius: 1.5rem 1.5rem 0 0;
  border: 4px solid #f7baf72f;
  border-bottom: none;
}
...
.modal-content {
  color: white;
  border-radius: 0 0 1.5rem 1.5rem;
  border: 4px solid #f7baf744;
  border-top: none;
}
...

ヘッダーとコンテンツはそれぞれ同じ16進色で #f7baf7、ただし、アルファチャネル値は異なります。 The modal-header セレクターの border-color アルファチャネルがに設定されています 2f、より透明です。 00 完全に透過的なアルファチャネル値です。 The .modal-content アルファチャネルがに設定されている 44、これにより不透明になります。

変更をに保存します styles.css 更新します index.html Webブラウザで。次の画像は、これらの境界線がブラウザでどのようにレンダリングされるかを示しています。

最後に、6桁の16進数の色は、3桁の省略形として記述できます。 #33ccee と同じです #3ce. 同様に、アルファチャネルを使用した16進値は、4桁の省略形として記述できます。 #33ccee99 に短縮することができます #3ce9 同じ色になります。

アルファチャネルを使用した16進数の省略形での作業を開始するには、に戻ります。 stlyes.css テキストエディタで。次に、に移動します .modal クラスセレクターと追加 box-shadow 財産。ここでは、モーダルに大きなドロップシャドウを作成します。これは黒ですが、アルファチャネルによって柔らかくなります。次のコードブロックで強調表示されたCSSを .modal セレクターブロック：

styles.css

...
.modal {
  margin: auto;
  width: 90%;
  max-width: 40rem;
  background: linear-gradient(135deg, hsl(300, 40%, 20%),hsl(300, 40%, 5%));
  border-radius: 1.5rem;
  box-shadow: 0 1rem 2rem #000a;
}
...

この影はx軸を次のように落とします 1rem ぼかしを広げます 2rem. 次に、 #000a valueは、3つの色の値をすべてオフにすることにより、完全な黒色を定義します。 The a、これは aa の数値は 170は、アルファチャネルに約66％の透明度を提供します。これにより、シャドウがわずかに暗くなりますが、モーダルの下に奥行きを与えるのに十分な大きさを保ちます。

この追加を必ず保存してください styles.css、次に更新 index.html ブラウザで。モーダルには、より多くの定義と深さがあります。次の画像は、さまざまなカラー値を使用したモーダルのレンダリングを示しています。

このセクションでは、アルファチャネルで3つの異なる色の値を使用して、特定のプロパティの色に不透明度を適用しました。これらの色をに追加しました background-color プロパティ、 border プロパティ、および box-shadow 財産。次のセクションでは、の名前付きカラー値を使用します transparent 独自のグラデーションを作成し、コンテンツを非表示にします。

追加する `transparent` 色の値を `linear-gradient`

アルファチャネルをサポートするさまざまな色の値は、色を識別できる必要がある場合に役立ちます。ただし、色が不要な場合は、 transparent 名前付きの色が便利になります。このセクションでは、モーダルの閉じるボタンを非表示にし、X形状を作成します。 linear-gradient()、すべてを使用して transparent 価値。

使用を開始するには transparent 値、開く styles.css テキストエディタで。次に、に移動します .modal-close 以前に追加したクラスセレクター。セレクター内で、 color からのプロパティ値 white に transparent、次のコードブロックで強調表示されているように：

styles.css

...
.modal-close {
  color: transparent;
}
...

この変更により、スペースからテキストが削除されることはありません。ページ上の視覚的なレンダリングからのみ削除されます。

次に、 X シェイプを作成する場所があるように、クローズリンクから正方形を作成します。を追加することから始めます display プロパティをに設定 block、これにより <a> より視覚的に構成可能になります。次に、 height と width プロパティを設定し、それぞれをに設定します 1.5rem、正方形を作成します。最後に、 overflow プロパティをに設定 hidden、テキストがコンテナの外に出てインタラクティブスペースを追加するのを防ぎます。次のコードブロックで強調表示されているCSSは、正方形を設定する方法を示しています。

styles.css

...
.modal-close {
  color: transparent;
  display: block;
  height: 1.5rem;
  width: 1.5rem;
  overflow: hidden;
}
...

最後の部分は、2つで構成される複数の背景のインスタンスを使用してXシェイプを作成することです。 linear-gradient() 値。これを設定するには、次のコードブロックから強調表示されたコードを追加します。

styles.css

...
.modal-close {
  color: transparent;
  display: block;
  height: 1.5rem;
  width: 1.5rem;
  overflow: hidden;
  background-image:
    linear-gradient(
      to top right,
      transparent 48%,
      white 48%,
      white 52%,
      transparent 52%
    ),
    linear-gradient(
      to top left,
      transparent 48%,
      white 48%,
      white 52%,
      transparent 52%
    );
}
...

このコードについて最初に注意することは、 linear-gradient() は別々の行にあります。これは、複雑な背景をよりわかりやすく読みやすくするために行われます。このCSSは引き続き有効であり、値がプロパティと同じ行にある必要はありません。次に、重複したパーセント値 transparent と white グラデーションがないことを意味します。代わりに、色はからすぐに反転します transparent に white. 最後に、 to the right と to the top オーバーラップする45度の角度で2つのグラデーションを作成します。

この変更をに保存します styles.css 開いて index.html Webブラウザで。 免責事項を読む！ボタンを選択すると、次の画像に示すように、モーダルはクローズリンクではなく、大きくて薄いX形状になります。

最後に、 :hover と :focus X の形状が相互作用の中心である場合に、それをより目立たせるには、状態が必要です。このために、前のグラデーションを複製し、位置を調整してソリッドを成長させます white 範囲。

X のインタラクティブな状態を作成するには、に戻ります。 styles.css テキストエディタで。次の .modal-close クラスセレクター、で構成される新しいグループセレクターを作成します .modal-close:hover と .modal-close:focus. 次に、 background-image プロパティと値から .modal-close 新しいセレクターに。最後に、 48% セグメント 46% と増加します 52% に 54%.

style.css

...
.modal-close {
  ...
}

.modal-close:hover,
.modal-close:focus {
  background-image:
    linear-gradient(
      to top right,
      transparent 46%,
      white 46%,
      white 54%,
      transparent 54%
    ),
    linear-gradient(
      to top left,
      transparent 46%,
      white 46%,
      white 54%,
      transparent 54%
    );
}
...

これらの変更をに保存します styles.css ブラウザでページを更新します。これで、 X にカーソルを合わせるか、キーボードフォーカスを指定すると、形状を作成するグラデーションのサイズが大きくなり、Xが太字になっているような効果が得られます。次のアニメーションは、ホバーイベント中にこの効果がブラウザでどのようにレンダリングされるかを示しています。

このセクションでは、 transparent プロパティ、およびコンテンツを非表示にし、を使用してXアイコンを作成するために使用しました linear-gradient() 値。最後のセクションでは、 transparent ボタンスタイルの要素にアニメーション効果を提供するのに役立つグラデーションの値。

を使用して `:hover` 状態から透明への移行 `color` 値

の1つの側面 transition クリエイティブなソリューションが必要になることがあるプロパティは、すべてのプロパティをアニメーション化できるわけではないということです。これらのプロパティの1つは background-image、の値を意味します linear-gradient このプロパティではアニメートできません。しかし background-color 値は、たとえ background-image が存在します。このセクションでは、を使用してグラデーションアニメーションのように見えるトランジションアニメーションを作成します。 transparent およびアルファチャネルの色の値。

アニメーショングラデーションを作成するには、 styles.css テキストエディタで。次に、 .button クラスセレクター。 The .button クラスにはすでに変更があります background-color そのセレクターと .button:hover. 強調表示されたものを追加します transition 次のコードブロックからのプロパティと値 styles.css ファイル：

styles.css

...
.button { 
  text-decoration: none;
  display: inline-block;
  padding: 0.5rem 1.25rem;
  color: white;
  background: #4c90b2;
  border: 1px solid #2d566b;
  border-radius: 0.5rem;
  transition: background-color 250ms ease;
}

.button:hover,
.button:focus {
  background-color: #2d566b;
}
...

変更をに保存します styles.css 開いて index.html あなたのウェブブラウザで。ボタンにカーソルを合わせると、 background-color ライトブルーとダークブルーの間でアニメートします。次のアニメーションは、これがブラウザでどのようにレンダリングされるかを示しています。

ここで、グラデーションを追加するには、に戻ります。 styles.css テキストエディタで。に戻る .button セレクターと追加 background-image とプロパティ linear-gradient(). グラデーションの方向は次のようになります to bottom アルファチャンネルの水色で始まり、次に transparent. アニメーションは、アルファチャンネルのダークブルーで終了します。次のコードブロックで強調表示されているCSSは、このグラデーションの記述方法を示しています。

styles.css

...
.button { 
  text-decoration: none;
  display: inline-block;
  padding: 0.5rem 1.25rem;
  color: white;
  background: #4c90b2;
  border: 1px solid #2d566b;
  border-radius: 0.5rem;
  background-image:
    linear-gradient(
      to bottom,
      hsla(200, 40%, 80%, 0.4),
      transparent,
      hsla(200, 40%, 20%, 0.6)
    );
  transition: background-color 250ms ease;
}
...

このグラデーションは、 background-color、グラデーションが水色から真ん中の青、そして濃い青に変化しているように見えます。ボタンがインタラクティブなイベントに遭遇すると、 background-color 濃い青に変わり、全体的なグラデーションが暗くなったような錯覚を引き起こします。

これらの更新をに保存します styles.css その後、あなたに戻ります index.html ブラウザでファイルを作成し、ページを更新します。次のアニメーションに示すように、カーソルをボタンに合わせると、グラデーションが水色のグラデーションから濃い青色のグラデーションにアニメーション化されているように見えます。

この最後のセクションでは、色の値を使用しました。 transparent 名前付きの値、および transition グラデーションアニメーションの錯覚を作成するプロパティ。これにより、どのような種類のプロパティをアニメーション化できるかも学びました。

結論

このチュートリアル全体を通して、 opacity プロパティとアルファチャネルを使用した多くのカラー値。使いました opacity と pointer-events と transition モーダルをオンデマンドで表示するフェードイン効果を作成します。また、コンテンツの色の透明度とオーバーレイを制御するために使用可能なさまざまな色の値を使用しました。あなたは transparent モーダルを閉じるためのXアイコンを作成するための名前付き値。最後に、色の組み合わせを使用しました。 transparent 値、グラデーション、および transition ボタンにアニメーションのグラデーションのような錯覚を作成します。

採用する多くの有用な理由があります opacity ウェブデザインに透明な色。 The opacity プロパティを使用して、必要なときに表示されるようになっている要素のフェードインおよびフェードアウト効果をアニメーション化できます。透明度の制御を可能にするさまざまな色の値は、色とコンテンツをブレンドする多くの方法を提供します。全体として、透明性を作成するこれらの方法は、多くのユニークな効果とスタイルを作成することができます。

CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。