CSS でバッジ コンポーネントを作成する方法 (transform: translate() を使用)

4120 ワード
css テキストリンク
ここまで来てくださったので、バッジのことはもうご存知かと思いますが、まずは説明をさせてください.

バッジは、アイテムのステータスを強調してすばやく認識できるようにするために使用されます.バッジには多くの使用例があります.
  • WhatsApp、Twitter、Quora などで未読のメッセージがあると、アプリの右上に番号付きのバッジ アイコンが表示され、未読メッセージの数がわかります.
  • または、e コマース Web サイトのカートにある商品の数を表示します.

    • バッジを作成する方法はたくさんあります.ここでは、transform プロパティの translate 関数を使用してバッジ コンポーネントを簡単に作成できることを確認します.よくわからない方はこちらのブログを読んでください.

    それでは、「話は安い、コードを見せて」ということわざにあるように、コードに取り掛かりましょう.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            background-color: red;
            height: 22px;
            width: 22px;
            display: flex;    /* to center the content inside red circle */
            border-radius: 99rem;
            justify-content: center;
            align-content: center;
            transform: translate(-100%, -90%);    /* only thing we need */
        }
    </style>
</head>

<body>
    <img src="notification.svg">
    <p>2</p>
</body>
</html>






    ☝️ transform プロパティを使用して、アイコンの周りの赤い円をシームレスに移動したことがわかります.

    それはすべての人々です.

    私はウェブ開発に関連する記事を毎日 1 つ書いています (そうです、毎日です).あなたが同じことを学んでいるなら、ここで私に従ってください.

    私のTwitterハンドル:

    あなたがLinkedinタイプなら、接続しましょう:

    素晴らしい一日をお過ごしください😀!
    Padrão State em Python
    Jetbrains スペース オートメーション