DEV Community

Cover image for Re-creating a Japanese Fireworks Catalog from 1883 in CSS
Mads Stoumann
Mads Stoumann

Posted on • Updated on

Re-creating a Japanese Fireworks Catalog from 1883 in CSS

The other day I received a newsletter from the author Robin Sloan, containing samples of some beautiful old pages from a Japanese fireworks catalog from 1883:

Fireworks Catalog

This coincided with Codepen's weekly challenge being "Fireworks" — so I just had to try to re-create these beauties.

This is what I ended up with — my own interpretation of a mix between item № 66 and item № 67:

Fireworks

It involves a lot of small, interesting stuff, that I'd like to share!


Grainy Overlay

To get that rough, grainy look, I added an overlay covering the whole page — it's on ::after on the <body>-tag, and was made using Grainy Gradients Playground.


Small Stars/Explosions

The smaller stars/explosions are using clip-path, made with my own tool, "Polygon to clip-path and SVG" — you can find it on Codepen:

This tool has a lot of sentimental value to me, as the original algorithm was coded by a dear friend of mine, who sadly passed away in 2020.


Large Star/Explosion

The main explosion consists of a grid with all items being placed center, using grid-column: 1/-1 and grid-row: 1/-1. It's the new position: absolute for me, but with added flexibility. Each <b>-sub-node has it's own --deg(degree)-property, a total of 36 with a 10 degree between them.

On top of these, I've placed a mask with a repeating-conic-gradient to "cut out" the inner stacks of <b>s:

--mask: repeating-conic-gradient(
  from 45deg at 50% 50%,
  var(--red) 0deg 7.5deg,
  transparent 7.5deg 10deg);
Enter fullscreen mode Exit fullscreen mode

Google Fonts API

I'm using two fonts, one for the numbers and one for the ampersand. It would be a complete waste of bandwidth to load the entire character-sets, so luckily Google Fonts support specifying only the characters you need, using the text-parameter in the URL:

/* Numero Sign and Numbers */
@import url('fonts.googleapis.com ... &text=№67');
/* Other font, Ampersand */
@import url('fonts.googleapis.com ... &text=%26');
Enter fullscreen mode Exit fullscreen mode

Masks and other stuff

  • On the black background and on the box with numbers, I use a mask, I found on Open Props.

  • I'm using cqi-units (container-queries), so it's fully responsive.

  • I'm using native CSS nesting, so don't preview in Firefox ;-)


You can see the final result here:


Animated version

Top comments (26)

Collapse
 
idosius profile image
Ido Schacham

Beautiful work and fantastic inspiration

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!

Collapse
 
virtualpujadev profile image
VirtualPuja

Wow! This is AMAZING!

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!

Collapse
 
ycmjason profile image
YCM Jason

Absolutely beautiful!

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!

Collapse
 
1link profile image
1Link.Fun

cool~ I love this pen

Collapse
 
madsstoumann profile image
Mads Stoumann

Thanks!

Collapse
 
markomeic profile image
Marko Meic

Wow, very cool!

Collapse
 
madsstoumann profile image
Mads Stoumann

👍🏻

Collapse
 
tiagob28 profile image
TiagoB28

Very nice man. It's already included in my material for study.

Collapse
 
madsstoumann profile image
Mads Stoumann

Cool, thanks!

Collapse
 
felixrunquist profile image
Felix

Love how whimsical this looks! Definitely a nice nod to the design principles of the past.

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!

Collapse
 
jarvisscript profile image
Chris Jarvis

Very Cool.

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!

Collapse
 
xmohammedawad profile image
Mohammed Awad

wwow

Collapse
 
madsstoumann profile image
Mads Stoumann

👍🏻

Collapse
 
cmgustin profile image
Chris Gustin

I thought my CSS skills were solid but holy cow, these are some serious ninja moves. Really cool stuff, thanks for sharing!

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you! 🥷