├── .gitignore
└── badge-1
├── avatar.jpeg
├── avatar.webp
├── index.html
└── styles.css
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_STORE
--------------------------------------------------------------------------------
/badge-1/avatar.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-joe/css-badge/HEAD/badge-1/avatar.jpeg
--------------------------------------------------------------------------------
/badge-1/avatar.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-joe/css-badge/HEAD/badge-1/avatar.webp
--------------------------------------------------------------------------------
/badge-1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Badge 1
8 |
12 |
13 |
14 |
15 |
16 | 8
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/badge-1/styles.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | height: 100%;
4 | font-family: "Euclid Circular A";
5 | }
6 |
7 | * {
8 | box-sizing: border-box;
9 | }
10 |
11 | body {
12 | margin: 0;
13 | display: grid;
14 | place-items: center;
15 | background: #d9d4f4;
16 | color: #f9f9f9;
17 | }
18 |
19 | .avatar {
20 | position: relative;
21 | z-index: -1;
22 | width: 100px;
23 | aspect-ratio: 1 / 1;
24 | background-image: url(avatar.webp);
25 | background-size: 160%;
26 | background-repeat: no-repeat;
27 | background-position: 50% 50%;
28 | border-radius: 50%;
29 | }
30 |
31 | @keyframes pulse {
32 | 45% {
33 | opacity: 0.6;
34 | }
35 | 80%,
36 | 100% {
37 | opacity: 0;
38 | scale: 1.6;
39 | }
40 | }
41 |
42 | .badge {
43 | display: grid;
44 | place-items: center;
45 | position: absolute;
46 | top: -8px;
47 | right: -4px;
48 | width: 32px;
49 | aspect-ratio: 1 / 1;
50 | border-radius: 50%;
51 | background: #ec3bcf;
52 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
53 | font-size: 16px;
54 | }
55 |
56 | .badge::after {
57 | content: "";
58 | position: absolute;
59 | z-index: -1;
60 | top: -10px;
61 | left: 50%;
62 | translate: -50% 0;
63 | width: 40px;
64 | height: 40px;
65 | border-radius: inherit;
66 | border: 8px solid transparent;
67 | border-top-color: #ec3bcf;
68 | border-top-style: double;
69 | opacity: 0;
70 | animation: pulse 1.5s infinite linear both;
71 | }
72 |
--------------------------------------------------------------------------------