🎨 HTMLとCSSを使用してTwitterのプロフィールホバーカードを作成する方法

15669 ワード
html design twitter css テキストリンク

バック開発者を歓迎！👋


このポストでは、HTMLとCSSを使ってTwitterでホバーカードをどのように再現できるかを見てみましょう.
このホバーカードを任意のプロファイルにホバーが表示されます.しかし、我々のケースでは、我々はただカードを作る.
私はまた、あなたがあまりにもチェックアウトする可能性がありますこれにYouTubeでビデオを持っている.
これが最後にどのように見えるかです.

🧱 HTML


HTMLは非常に自己説明と非常に簡単です.ラッパを作成し、3つを作成します<div> コンテンツを含むタグ.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Twitter Hovercard</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="card">
        <div class="profile">
          <div class="main-profile"></div>
          <div class="user-bio"></div>
          <div class="user-follows"></div>
        </div>
      </div>
    </div>
  </body>
</html>

メインプロファイル


The main-profile DIVは基本的にプロフィール画像、名前、ハンドル、およびフォローボタンを含んでいます.これは1行目になります.次に、flexboxをスタイルに使用します.
<div class="main-profile">
  <div class="user-info">
    <img src="./profile.jpg" alt="Profile Pic" />
    <h3>Max Programming</h3>
    <p>@MaxProgramming1</p>
  </div>
  <div class="follow-btn">
    <button>Follow</button>
  </div>
</div>

2 .ユーザバイオdiv


このdivはユーザのバイオを含んでいます.を使用して別の行に分けることができます<br /> タグ.
<div class="user-bio">
  <p>
    👨‍💻 Programmer, Learner, YTuber, Blogger, and Cricket lover!
    <br />
    😊 15 years old
    <br />
    My name is Usman
    <br />
    ☪ Muslim
    <br />
    Blog: <a href="http://blog.usman-s.me">blog.usman-s.me</a>
    <br />
    YT:
    <a href="http://youtube.com/MaxProgramming">youtube.com/MaxProgramming</a>
  </p>
</div>

ユーザはdivに続く


これはすべての中で最も簡単なものです.あなたは2つだけを作成<div> タグは、次のフォロワーとその数とその中に.
我々は<b> タグを数値をboldenする.
<div class="user-follows">
  <div><b>613</b> Following</div>
  <div><b>471</b> Followers</div>
</div>
これは、このテーブルを実行した後に取得するものです.今CSSのマジックでスタイルを作ろう.

🎨 CSS


リセット


最初にマージンとパディングを0に設定し、box-sizing to border-box .
そして、すべての要素のフォントを設定するsans-serif システム別.
我々のスタイルcontainer ページのすべてを中心にする
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

カード


今スタイルにcard div、私たちと影を追加し、境界線の半径とパディング.
.card {
  box-shadow: 1px 1px 10px 1px #a1a1a1;
  border-radius: 10px;
  padding: 20px;
}

主要なプロファイル


現在、main-profile 主な詳細が含まれて、我々はそれをより良いFlexboxを使用して位置します.
.main-profile {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
次に、プロファイル画像を小さくし、名前のサイズを大きくし、ハンドルの色を変更するためのスタイルを追加します.
.user-info img {
  width: 100px;
  border-radius: 50%;
}

.user-info h3 {
  font-size: 1.3rem;
}

.user-info p {
  color: #5b7083;
}
これが今までの進歩だ

すぐにフォローボタンを作りましょう.
ここでは、我々はborder そして、Twitterの青の色にテキストbackground が同じ色に設定されますが、透明です.テキストを作るbold , とホバー効果を追加するtransition .
.follow-btn button {
  font-size: 1.5rem;
  border: 3px solid #1da1f2;
  border-radius: 25px;
  background-color: rgba(29, 161, 242, 0);
  padding: 8px 20px;
  margin: 5px;
  font-weight: bold;
  color: #1da1f2;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease-in-out;
}

.follow-btn button:hover {
  background-color: rgba(29, 161, 242, 0.2);
}
今、我々は同様にホバー効果で完璧なボタンを得た.これは背景色の不透明度を変更します.

利用者バイオ


バイオはかなり簡単です.私たちはちょうどテキストの色を変更し、いくつかのマージンを追加し、<a> Twitterのスタイルのようなタグ.
.user-bio {
  color: #0f1419;
  margin-bottom: 10px;
}

.user-bio a {
  color: #1da1f2;
  text-decoration: none;
}

.user-bio a:hover {
  text-decoration: underline;
}

5 .ユーザ


これは最も簡単な部分です.私たちはflexboxを使用して、私たちは<div> . そして、我々はテキストの色を変えます.
.user-follows {
  display: flex;
  color: #5b7083;
}

.user-follows div {
  margin-right: 10px;
}

.user-follows b {
  color: black;
}
そして、それはHTMLとCSSを使用してTwitterのホバーカードを再現する方法です.閉じるこの動画はお気に入りから削除されています.あなたがするならば、あなたの経験について下記のようにコメントを残してください.
ソースコードです.

マックスプログラミング /



HTMLとCSSを使用したTwitterのホバーカカード


コードをYouTube video
読書ありがとう!
ブラウザのロードプロセスと仮想ドーム
BMI計算：JavaScript学習