Suits of the Dharma Deck.
Dharma Deck
Photoshop’s great, but why not paint with CSS?
2023-04-28T13:54-07:00
There were times when I used Photoshop for the smallest image adjustments instead of simply using CSS. Did you know you can invert an image's color or change it entirely with the filter property? Need to flip an image vertically? Use transform: scaleY(-1). Is an image not the right proportion? Create a correctly sized div, set the background-image property and position or scale it. I've learned so many CSS hacks that I now feel silly for all those new image files I created.
Just how powerful is this markup language? I wanted to test it out, especially after seeing the work of Diana Smith. Her realistic art is painted not with a brush, but with CSS code! It's an amazing collection that inspired me to create my own original browser art, but what would I draw?
I consider myself a person with eclectic interests. I've dabbled in tarot and Kabbalah, studied different religions and have always enjoyed learning new languages. My esoteric side has raised the eyebrows of my more science-minded colleagues, but I draw inspiration from the visceral imagery of the arcane. It's what inspired me to design this card deck built using the web's frontend languages.
It combines elements of tarot, Kabbalah, Buddhism and Taoism. I wanted to take spiritual concepts largely unfamiliar to Western culture and present them in a more relatable format: a deck of playing cards. In all honesty, I think the idea of the deck could use a little more work yet I'm happy with its design. My goal was to use as few image files as possible, but I'm no Diana Smith. Some of the more complex backgrounds I cropped from Tibetan religious art.
I created the cards using JavaScript to combine information about each suit and rank, then I mapped through each set of data and wrote it into a template-literal HTML string. innerHTML injects this code and external stylesheets modify it. There were no real challenges with this project, except maybe mathematically solving where to place each suit symbol on the numbered cards. It brought up memories of my trigonometry class, proving to all my incredulous peers back then that yes, one day I would be using this.
I used many of my frontend skills while designing this deck as a creative exercise. If it inspires you with any ideas about its use, please reach out! I would love to hear from you at al@fern.haus.