モダンなカード スタイルを作成する: CSS プロパティの最新の使用法

最新のカード スタイルを作成する: CSS プロパティの流行の使用法

最新の Web デザインでは、カード スタイルは一般的で人気のあるデザイン パターンです。カードを使用すると、画像、テキスト、リンクなどのさまざまなコンテンツを表示でき、Web ページをより階層化して整然としたものにすることができます。カードのスタイルをよりモダンにするために、いくつかのトレンディな CSS プロパティを使用して、カードに独自の効果やアニメーションを追加できます。この記事では、いくつかの流行の CSS プロパティの使用法を紹介し、具体的なコード例を示します。

1. シャドウ効果

シャドウ効果は、カードに立体感と奥行き感を与えるもので、box-shadow 属性を使用して実現できます。 box-shadow属性は影の色、位置、ぼかしなどを設定できます。以下はサンプル コードです。

.card {
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}

上記のコードでは、box-shadow の最初のパラメータ 0px は水平位置のオフセットを表し、2 番目のパラメータは水平位置のオフセットを表します。パラメータ 2px は垂直位置のオフセットを表し、3 番目のパラメータ 6px は影のぼかしを表し、4 番目のパラメータ rgba(0, 0, 0, 0.2) は影の色と透明度を表します。

2. アニメーション効果

アニメーション効果を追加すると、カードをより鮮やかで魅力的なものにすることができます。 CSS は、カード遷移アニメーションを実装するための transition 属性を提供します。以下はサンプル コードです。

.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.1);
}

上記のコードでは、transition 属性は transform 属性を 0.3 秒の遷移時間に設定し、## を使用します。 #easeトランジションの速度を制御する関数。マウスがカード上にあるとき、transform:scale(1.1) を使用してカードが 1.1 倍に拡大され、単純なトランジション アニメーション効果が実現されます。

background-image 属性と linear-gradient() 関数を提供します。以下はサンプル コードです。

.card {
  background-image: linear-gradient(to right, #f44336, #2196f3);
}

linear-gradient() 関数は、カンマで区切られた 2 つ以上のパラメーターを受け入れます。関数 to right の最初のパラメーターは、グラデーションの方向を表します。ここでは、左から右を意味します。 2 番目のパラメータ #f44336 はグラデーションの開始色を表し、3 番目のパラメータ #2196f3 はグラデーションの終了色を表します。

filter 属性を提供します。以下はサンプル コードです:

.card {
  filter: brightness(0.8) blur(2px);
}

filter 属性は 2 つのフィルター効果、つまり brightness(0.8) と blur ( 2px)。 brightness(0.8) はカードの明るさを 80% に下げ、blur(2px) はカードを 2 ピクセルぼかします。

transform 属性を提供します。以下はサンプル コードです:

.card {
  transform: perspective(1000px) rotateY(20deg);
}

transform 属性は 2 つの変換効果、つまり perspective(1000px) と rotateY( 20度)。 perspective(1000px) は遠近効果を設定し、rotateY(20deg) はカードを Y 軸を中心に時計回りに 20 度回転します。

以上がモダンなカード スタイルを作成する: CSS プロパティの最新の使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。