最初のブログ記事を発表してみましたが、開発学習への情熱が足りないと思い、始めました.毎回ブログの技術に関する記事をたくさん読んで、いろいろ助けてもらって、いつか私も頑張ります.
こんにちは!今日から、ネットで箱のデザインを積み重ねたいと思います.
なお、「COOL BOX」は個人的には1日10～30分程度の時間しかかかりませんが、それ自体の制約により不足点が多い場合がありますのでご注意ください.

カードケースを作ろう!

上記のように、掲示板グリッドリストなどの要素に使用できるカードボックスを作成しました.

HTML構造

html構造は、まず簡単に表示して表示するだけです.
箱を作った後、典型的なトレイを作って、写真をサムネイルのように見せたいです.下にタイトルと短い情報があります.

<div id="box">

</div>

ダンボールの本体です.すべてのオブジェクトはこの内部にあります.

<div id="box">
	<img class="img" src="./img.jpg" alt="">
</div>

上の画像はカードのサムネイルを担当し、最大のカードの先端に置いて優先的に表示させ、情報を上から下に流す.

<div id="box">
    <img class="img" src="./img.jpg" alt="">
    <h1 class="heading">HELLO WORLD!</h1>
    <div class="data">
      <span class="date">2021-10-21</span>
      <span class="user-id">user ID</span>
    </div>
    <p class="texts">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </p>
  </div>

以下にタイトルを付け、投稿にタイトルを付けます.
内部に投稿の作成日とIDが追加されました.
*本コンテンツをサブタイトルなどに有機的に変換する.
pラベルを使用すると、投稿の簡単な情報を提供できます.
掲示板の性質によって、他の内容を簡単に含めることができます.

正式CSSによる設計

カードのデザインから始まるデザインで、内部の色は性格によって異なるので、基本的には残っています.
重要な点は、マウスのサスペンション動作をどのように実施するかであり、サムネイルのサスペンションビデオを再生する必要がある可能性があり、簡単な画像である可能性があり、多くの変数が存在する可能性があります.まず画像のみを使用することを考慮し,作成時に画像サイズと協調性に注意した.

#box {
  width: 300px;
  border-radius: 8px;
  overflow: hidden;
  margin: 100px auto;
  transition: all 0.3s cubic-bezier(0.42, 0.0, 0.58, 1.0);
}

#box:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  transform: translateY(-10px);
}

縦方向の長さ設計を考慮したので,マウスのサスペンションが鍵となる横方向に幅を固定した.
箱の枠をあげないで、基本的に箱の影をあげないで、箱の形をはっきり見分けられるようにしたいのですが、最も重要なのは、マウスが箱全体の上に止まって、少し上に持ち上げられるようにすることです.cubic-bezierも使用し、ease-in-outに自然に流れ、overshでのみボックスシャドウを使用してアップグレードする感覚を強調した.

#box * {
  padding: 10px;
}

#box .img {
  display: block;
  width: 100%;
  padding: 0;
}

私たちは箱に10 pxのpaddingを入れて、あなたが画像に集中できるようにしました.

#box .heading {
  font-size: 28px;
}

#box .data {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #666;
}

#box .data span {
  padding: 0;
}

#box .data .date {
  margin-bottom: 2px;
}

#box .data .user-id {
  font-size: 16px;
  color: #000;
  font-weight: 600;
}

#box .texts {
  font-size: 14px;
  line-height: 18px;
}

このタイトルのフォントを指定して情報を整理するcssで、デザインが完成します.

完成本

直面した問題と悩み

箱の型番に対する理解が欠けている。

Web上では、Boxデザインがよく使われています.箱の模型についての理解が重要な文章もたくさん見ました.Googleはすぐにデザインもコードも良い資料を見つけることができますが、自分で作りたいと思っていますが、思ったほど簡単ではありません.
最初の問題は簡単な設計問題ではなく、自分が箱モデルについて基礎知識に欠けていることです.これは最初の小さな目標で、簡単に書くためですが、最初のコードに戻る必要があるかもしれないと思います.

ちゃんと構造を整えましょう…!

Web上では、HTML構造が常に最も重要です.自慢するほどのものではありませんが、今回の箱のデザインを通して、もっと心に刻まれたと思います.

機能を追加する前に実装する方法

最新のCSSでは、JSを書くことなくJSを実装できます.従来の資料よりも簡単です.
しかし、私の価値は、今、このコードがどのような理由で書かれたのか、標準に合致するために書かれたのかなど、機能と設計と目的を一致させる前に、どのような技術を使って実施するかが重要だと思います.

削減とコンポーネント化の方法

cssを書くときに思いついたことはコード量を減らすかもしれませんが、一度にこれらのコードを書くことができるかどうかを考えています.

もっと機能を追加したいのですが..。

JSでカードを通して新しいリンクにアクセスし、Likeボタンなどの他の機能をボタンで追加したいのですが、設計上はもっと考慮する必要があるようです.
初めて書いた文章なので、不足点が多いように見えます.🥲
私たちは努力を続けます...!