最新の CSS カード

現在、Webサイト上でさまざまなデータを表示するために、Webサイト上にカードを作成することが非常に重要です。たとえば、TutorialsPoint Web サイトのホームページでは、さまざまなコースがカード形式で表示されており、カードをクリックすると、そのコースの特定のページにリダイレクトされます。

また、Amazon や Flipkart などの電子商取引ストアにアクセスすると、商品がカード形式で表示されます。カードを作成する主な利点は、製品に関する短い情報を画像に表示し、完全な情報を製品ページに提供できることです。

このチュートリアルでは、HTML と CSS のみを使用してさまざまなカードを作成する方法を学びます。

例 1 (基本的な CSS カード)

以下の例では、単一の画像を含む「card」 div 要素と「card-content」 div 要素を作成しました。「card-content」 div 要素にはテキスト情報が含まれます。

CSS では、カード要素の固定寸法を設定します。また、背景色、境界線の半径、境界線などのスタイルを指定します。また、ユーザーがホバーしたときにカードにボックス シャドウ効果を適用します。カードの上に。

さらに、画像の寸法を固定し、上隅の境界線の半径を設定しました。また、テキスト コンテンツのフォント サイズを設定しました。出力では、ユーザーは結果のカードを確認できます。

リーリー

例 2

の中国語訳は次のとおりです:

例 2

以下の例では、最初の例と同様のカードを作成します。ここでは、div要素「card-image」に背景画像を設定します。同時に、「Picsum」の Web サイトからランダムな写真を取得して画像を設定します。このカードでは、最初の例のように「今すぐ参加」アンカー タグを追加していません。

リーリー

例 3

以下の例では、追加情報を表示するためにカードにホバー効果を追加しています。

ここでは、最初にカード コンテナを作成して通常のカードを作成し、CSS を使用して「position:relative」でスタイルを設定しました。カード コンテナ内に「card-first」と「card-first」の div 要素を追加しました。 「card-first」 div 要素にはカードに関する情報が含まれ、「card-first」 div 要素にはユーザーがカードの上にカーソルを置くたびに表示される情報が含まれます。

さらに、CSS の 'card-first' div 要素の寸法を設定します。また、CSS の 'card-first' div 要素の寸法を設定し、CSS の 'transform:translate(100%)' プロパティを使用しました。 2 番目の部分を非表示にします。ユーザーがカード要素の上にマウスを移動すると、「transform: translationX(-100%)」CSS プロパティを使用してカードの 2 番目の部分を表示します。

リーリー

例 4

以下の例では、「parent」という名前の div 要素を作成します。その後、画像とカードの説明を含む複数のカード要素を追加しました。

CSS では、clamp() 関数を使用してカードの幅を設定します。 Clamp() 関数は 3 つのパラメータを受け入れます。最初の値は最小値、2 番目はパーセンテージ値、3 番目は最大値です。この例では、画面サイズの 20% が 300 ～ 500 ピクセルの場合、カード幅は 20% になります。それ以外の場合は、300 ピクセルまたは 500 ピクセルになります。

さらに、すべてのカードを正しく表示するために、「親」コンテナをフレックスボックスに設定します。

リーリー

ユーザーは、HTML と CSS を使用して最新のカードを作成する方法を学びました。最初の 2 つの例では、基本的なカードを作成しました。3 番目の例では、ホバー効果のあるカードを作成しました。また、clamp() の使用方法も学びました。デバイスの画面サイズに応じてカード サイズを処理する関数。

以上が最新の CSS カードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。