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

4120 ワード

ここまで来てくださったので、バッジのことはもうご存知かと思いますが、まずは説明をさせてください.

バッジは、アイテムのステータスを強調してすばやく認識できるようにするために使用されます.バッジには多くの使用例があります.

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タイプなら、接続しましょう:

素晴らしい一日をお過ごしください😀!

Reference

この問題について(CSS でバッジコンポーネントを作成する方法 (transform: translate() を使用)), 我々は、より多くの情報をここで見つけました https://dev.to/therajatg/how-to-make-a-badge-component-in-css-using-transform-translate-fli

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Padrão State em Python

Jetbrains スペースオートメーション

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

Reference

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