cft
Become a CreatorSign inGet Started

How to make a badge component in CSS (using transform: translate())

Badges are used to highlight an item's status for quick recognition.


user

Rajat Gupta

5 months ago | 2 min read
Follow

Since you are here, probably you already know what a badge is, but anyway let me explain it first.

Badges are used to highlight an item's status for quick recognition. There are many use cases of the badge:

  1. you must have seen that when we have something unread on WhatsApp, Twitter, Quora, etc. a badge icon with a number appears on the top right of the app to let us know how many messages are unread.
  2. or to show how many items are there in our cart of an e-commerce website.

There are many ways using which we can make a badge. Here we'll see how easy it is to make the badge component using the translate function of the transform property. If you don't know what it is, read my blog here.

so, let's get to the code because as the saying goes "talk is cheap, show me the code".

COPY

<!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>

You can see ☝️ how seamlessly we moved the red circle around the icons using the transform property.

That's all folks.

I write one article every day related to web development (yes, every single f*cking day). Follow me here if you are learning the same.

my Twitter handle: @therajatg

If you are the Linkedin type, let's connectlinkedin.com/in/therajatg

Have an awesome day ahead 😀!

Originally published here!

Upvote


user
Created by

Rajat Gupta

Follow

Rajat Gupta Hi, I am rajat. I am an ex-banker and currently learning web development. I write about react, javascript and css every single day. (yes, every single day). If you are learning the same follow me here.


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles