あなたのウェブサイトのためのシンプルで美しいUIカードをデザインする方法

HTMLとCSSを使用してWebサイト用のシンプルで美しいUIカードコンポーネントを設計する方法を学びます。また、カードを暗くしすぎずにテキストを少し余分にポップさせる線形グラデーションの「トリック」についても学びます。

UIカードは、Webサイトで前菜の一種として機能するUIコンポーネントです。一般的なUIカードには、テキスト、写真、アイコン、および1つまたは複数のインタラクティブ要素（ボタンやリンクなど）が含まれています。

UIカードは、必要に応じて単純または複雑にすることができます。

今日、私たちは非常にシンプルなUIカードを設計しています。これは次のとおりです。

このUIカードには、風景の背景画像、2つのテキスト要素（タイトルと説明）、および1つの大きなクリック可能なインターフェイスがあります。カード全体がリンクです。

たくさんの無料を見つけることができます Unsplash.comの美しい風景写真。

ステップ1：HTML

このHTMLをドキュメントに追加します（<body>内）要素）：

<a class="card-link" href="#">
  <div class="card">
    <div class="card-overlay"></div>
    <img class="card-thumbnail" src="/images/the-north-sea-denmark.png" alt="Landscape photography of the Northern Sea of Denmark" />
    <div class="card-text-container">
      <div class="card-text-wrapper">
        <h3 class="card-title">The North Sea of Denmark</h3>
        <p class="card-description">
          Explore the beautiful & dynamic North Sea of Denmark — where every day
          is a new experience.
        </p>
      </div>
    </div>
  </div>
</a>

上記のHTMLマークアップの重要な部分は、カード全体をアンカー要素でラップしていることです。この特定のカードに対してこれを行うのは、ユーザーインターフェイス全体を1つの大きなクリック可能なリンクにするためです。

正しいブログ投稿へのアンカーリンクを作成するには、記事（リンクするコンテンツ）をプレースホルダー属性（href="#"）に置き換えるだけです。）実際のナメクジ、たとえばhref="/northern-sea-of-denmark" 。

ステップ2：CSS

まず、UIカードの例で使用されるCSSを提供し、次にコードの最も重要な部分を以下に説明します。

.card {
  position: relative;
  height: 350px;
  max-width: 400px;
}

.card-thumbnail {
  height: 100%;
  max-width: 100%;
  display: block;
  object-fit: cover;
}

.card-text-container {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 10%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-text-wrapper {
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 300px;
  color: white;
}
.card-title {
  font-size: 1.45rem;
  margin-bottom: 0;
}
.card-description {
  font-size: 1.15rem;
  line-height: 1.4;
  margin-top: 0.5rem;
}

.card-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  z-index: 1;
}

CSSの仕組み：

.card ：UIカードをレスポンシブにするために、最大幅は400pxになります。これにより、カードの幅が動的になります。 400pxを超えて拡大縮小することはありませんが、画面の幅が400px未満の場合は、自動的に縮小（縮小）されます。カードの高さ固定されています（height: 350px ）、画面サイズに関係なく変更されません。
.card-thumbnail ：カードのアスペクト比が変更されたときに背景画像のアスペクト比が失われないようにするために、object-fit: coverを使用します。。それを削除して、何が起こるかを確認してください（良くありません）。
.card-text-container ：UIカードが表示されているデバイスに関係なく、テキスト要素の位置と間隔（空白）が一貫していることを確認するために、bottom: 10%を使用します。。カードの高さは固定の350ピクセルに設定されているため、カードの下部からのテキスト要素の距離を100％近くに保つことが容易になります。 z-index: 1; オーバーレイの上にテキスト要素を保持します。
.card-text-wrapper ：このクラスは、両方のテキスト要素（タイトルと説明）の最大幅を制御します。カードの幅を超えたくないので、300pxの値に設定します。、これはカードの最大幅（400px）より25％小さい）。また、左右に少しパディングを加えます（1rem ）、したがって、テキスト要素と画面の境界線の間には常に少しの間隔があります（小さなデバイスでは重要です）。
.card-overlay ：明るい背景の白いテキストは機能しないため、暗いコントラストが必要です。ただし、画像全体を暗くしすぎないようにします（その場合のポイントは何ですか？）。したがって、linear-gradientを使用します明暗のオーバーレイを作成する機能。画像の上半分（テキストがない場合）にはほとんど暗さがありませんが、下半分にはテキストをポップさせるのに十分な暗さがあります。

ヒントとアイデア

写真がストーリーの大部分を占めるこのようなUIカードでは、カードを過度に混雑させないことが重要です（たとえば、テキストのサイズを考慮してください）。これは、CSSでスタイルを設定したときに頭に浮かびました。設計しているカードの特定のコンテキストを常に考慮する必要があります。

このチュートリアルのスタイルをガイドラインとして使用しますが、UIカードの設計に関する厳密なルールとしては使用しないでください。以下は、UIカードの設計に関するいくつかの普遍的/客観的なガイドラインです。

間隔は非常に重要です： 空白が不足していると、デザインが混雑して閉所恐怖症になります。 UIは呼吸する必要がありますあなたと同じように。（もちろん、近接の法則に違反することなく）できるだけ多くの間隔（パディング、マージン、行の高さ）を使用してください。
タイポグラフィ： テキスト要素のフォーマット方法（フォントの選択、フォントサイズ、行の高さなど）に関係なく、どの画面サイズでもテキストが読みやすいことを確認してください。 .card-overlayで行ったように、フォントサイズを大きくする（そしてより多くのスペースを占める）代わりに、テキストと背景の間の色のコントラストを大きくしてみてください。クラス。
クリックしやすいインターフェース： カード上の要素がクリックされることになっている場合は、誰もがマウスや親指で簡単にクリックまたは押すことができるように、要素を十分に大きくします。

それ以外に、UIカードのデザインのルールはなく、コンテキストのみがあります。

CSSパディングプロパティの使用方法

CSSでのRGBとRGBaの色（何、なぜ、どのように）

グラフィックカードが死にかけているかどうかを確認する方法
グラフィックスカードは、今日のコンピューターの不可欠な部分になっています。正常なグラフィックスカードをお持ちの場合は、高解像度のディスプレイと共に、より優れたゲームとワークステーションのパフォーマンスをお楽しみいただけます。たとえば、グラフィックカードは画面上のすべてのピクセルをプッシュし、ゲームで必要なときにフレームをスローします。ただし、システムでブルースクリーン、フリーズスクリーンなどのグラフィックカードの悪い症状が発生する場合があります。この記事では、グラフィックカードが故障しているかどうかを確認します。その場合は、このガイドで提供されている解決策に従って同じ問題を修正し
PHP バックドアはどのようにして Web サイトに感染するのか?
毎日 100 万以上の Web サイトがハッキングされています。 Web サイトが侵害されると、40% の確率で再びハッキングされる可能性があると考えられています。ハッカーは、Web サイトへの再アクセスを可能にする悪意のあるコード (PHP バックドア) を残すことがよくあります。このマルウェアを削除するのは非常に難しいため、管理パネル全体をリセットしても、これらのコードは Web サイトの奥深くに隠されています。これらのコードは、Web サイトへのバイパスアクセスを可能にするため、「バックドア」と呼ばれます。現在、WordPress、Magneto などの人気のある CMS の多くは P