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

著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

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

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

前提条件

カスケードと特異性を使用してCSSスタイルをHTMLに適用する方法を読むことで得られるCSSのカスケードと特異性の機能の理解。
タイプセレクター、コンビネーターセレクター、セレクターグループに関する知識。これらはCSSでスタイル設定するHTML要素を選択する方法にあります。
colorのプロパティの理解。 CSSでの色の操作の詳細については、CSSで色の値を使用する方法を参照してください。
backgroundプロパティを使用したCSSグラデーションの知識。 CSS を使用してHTML要素に背景スタイルを適用する方法を確認して、グラデーションの背景を作成する経験を積んでください。
box-shadowプロパティの経験。これについては、 CSS で境界線、影、およびアウトラインを使用してHTML要素のエッジのスタイルを設定する方法を参照してください。
ローカルマシンにindex.htmlとして保存された空の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>

HTMLの<head>要素内にいくつかのページ設定が定義されています。 <meta>要素は、テキストに使用する文字セットを定義します。これは、HTML文字コードを使用せずにコード内の特殊文字を解釈する方法をブラウザーに指示します。 <title>要素は、ブラウザにページのタイトルを提供します。 <link>要素はページスタイルで読み込まれます。フォントの最初の3つはGoogleFonts からのMuseoModernoをロードし、最後の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という名前の新しいファイルを作成し、テキストエディタで開きます。これは、index.htmlの<head>要素で参照されるファイルです。 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要素に適用されたスタイルで、ページの全体的な美学とレイアウトを設定します。 .site-header、.site-name、.nav-list、および.nav-linkセレクターはすべて、ページヘッダーのスタイルを定義します。 .buttonおよび.button:hoverルールは、<a>要素を大きなクリック可能なボタンのように表示するように変更します。

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

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

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

`:target`状態を`opacity`で作成して、要素を表示および非表示にします

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

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

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;
}

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

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

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

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

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に保存します。

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

テキストエディタでindex.htmlに戻ります。 <div class="modal-container">要素で、値disclaimerに設定されたid属性を追加します。次に、<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値への変更は、現在のページのdisclaimerのid値を持つ要素に移動するようにブラウザーに指示します。 #disclaimerがURLに追加されると、CSSの:targetがアクティブになります。

これらの変更をindex.htmlに保存してから、styles.cssに戻ります。

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

styles.css

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

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

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

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

次のコードブロックで強調表示されているように、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;
}
...

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

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

変更内容を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);
  ...
}
...

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

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

オーバーレイが透明になったら、モーダルに切り替えて、背景を白いテキストのある紫色のグラデーションに変更することで、より視覚的なスタイルを設定します。テキストエディタで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()カラー値を使用して、モーダルヘッダーの色を明るくします。また、モーダルに一致する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;
}
...

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

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

透明な色の値を作成する別の方法は、16進値を使用することです。 16進数の色の値は、0から9またはaからfの組み合わせの3つのペアで構成され、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;
}
...

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

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

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

アルファチャネルを使用した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;
}
...

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

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

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

`transparent`カラー値を`linear-gradient`に追加する

アルファチャネルをサポートするさまざまな色の値は、色を識別できる必要がある場合に役立ちます。ただし、色が不要な場合は、transparentという名前の色が役立ちます。このセクションでは、モーダルの閉じるボタンを非表示にし、linear-gradient()を使用してX形状を作成します。すべて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つのlinear-gradient()値で構成される複数の背景インスタンスを使用してX形状を作成することです。これを設定するには、次のコードブロックから強調表示されたコードを追加します。

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に保存し、Webブラウザでindex.htmlを開きます。 免責事項を読む！ボタンを選択すると、次の画像に示すように、モーダルはクローズリンクではなく、大きくて薄い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プロパティを紹介し、それを使用してコンテンツを非表示にし、linear-gradient()値を使用してXアイコンを作成しました。前のセクションでは、グラデーションのtransparent値を使用して、ボタンスタイルの要素にアニメーション効果を提供します。

`:hover`状態を使用して透過的な`color`値の間を遷移する

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

アニメーショングラデーションを作成するには、テキストエディタでstyles.cssを開きます。次に、.buttonクラスセレクターに移動します。 .buttonクラスでは、セレクターと.button:hoverの間でbackground-colorにすでに変更が加えられています。強調表示された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に保存し、Webブラウザでindex.htmlを開きます。ボタンにカーソルを合わせると、background-colorが水色と濃い青の間でアニメーション化されます。次のアニメーションは、これがブラウザでどのようにレンダリングされるかを示しています。

ここで、グラデーションを追加するには、テキストエディタでstyles.cssに戻ります。 .buttonセレクターに戻り、linear-gradient()を使用してbackground-imageプロパティを追加します。グラデーションの方向は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と透明色をウェブデザインに採用する多くの有用な理由があります。 opacityプロパティを使用して、必要なときに表示されるようになっている要素のフェードインおよびフェードアウト効果をアニメーション化できます。透明度の制御を可能にするさまざまな色の値は、色とコンテンツをブレンドする多くの方法を提供します。全体として、透明性を作成するこれらの方法は、多くのユニークな効果とスタイルを作成することができます。

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

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

序章

前提条件

ベースHTMLとCSSの設定

:target状態をopacityで作成して、要素を表示および非表示にします

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

transparentカラー値をlinear-gradientに追加する

:hover状態を使用して透過的なcolor値の間を遷移する

結論

`:target`状態を`opacity`で作成して、要素を表示および非表示にします

`transparent`カラー値を`linear-gradient`に追加する

`:hover`状態を使用して透過的な`color`値の間を遷移する