Dot style Numbers

HTML & CSS
1

How can we generate these dot styles number? These are not generated through the images, but CSS.

Please guide me where to start from. Thanks.

2

Where did you see these? Did you take a look at the code the site is using?

2 Likes
3

https://www.bloomberg.com/canada

4

Take a look at the code, it uses an image with roughly 1px white and 1px transparent to overlay over the number.

edit: However, here’s a pen that shows how to do it with pure CSS:

5 Likes
5

Hi there codeispoetry,

check out the attachment for a dotty example. :winky:

dotty.zip (1.5 KB)

coothead

3 Likes
6

Hi there sir,

As always nice.

7

Hi there codeispoetry,

if you are interested, the image that I used was just a conversion of the sites’s data:image…

background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQIW2NkYGBg+P///38QDQKMyBwUAUZGRrAkhgoAvKwT9VYXn50AAAAASUVORK5CYII= );

coothead

1 Like
8

Hi there sir,

As always nice. You are using image for this right?

Which one is better w/ image or w/o image or it is just a matter of convenience or a pesonal call?

9

Hi there codeispoetry,

in my example the png image’s size is 89 bytes
and the data image’s size is 142 bytes but does
not require an extra call to the server.

In this example, I prefered to use the named png. :winky:

coothead

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.