[{"slug":"phineas-in-css","frontmatter":{"content":"\nRecently I stumbled upon [this](https://twitter.com/prathkum/status/1345285253632569344) guy on Twitter and started following him. He explains CSS so well and keeps sharing his CSS Art. I have always been fascinated by how people are able to build beautiful things just using CSS. But I have been solely involved with working in JavaScript writing libraries in the past few years which involved negligible CSS.\n\nWith a lot of time in my hands now, I thought of working on one such art just to understand what is behind that magic :)\n\nI picked [this](https://twitter.com/prathkum/status/1345285253632569344) piece from Pratham's twitter and started working on it. This was a an entirely different experience. You have to visualize how you can make use of Box Model in a creative way to make various shapes. This is like applying a lot of HACKS but you get beautiful results with that :)\n\n![Phineas%20in%20CSS%20e43438c5beb649db977e2cd71b14adfd/Screenshot_2021-06-14_at_5.44.27_PM.png](/notion/Phineas%20in%20CSS%20e43438c5beb649db977e2cd71b14adfd/Screenshot_2021-06-14_at_5.44.27_PM.png)\n\n### [Here](https://codepen.io/hariom_balhara/pen/oNZQQpB) is the ***codepen*** for Phineas.","data":{"category":"css-art, show-and-tell","creationTs":1623672540000,"date":"June 14, 2021 2:09 PM","lastModified":"September 9, 2021 3:10 PM","lastModifiedTs":1631193000000,"published":"Yes","socialImage":"https://hariombalhara.in/notion/7f9780460ee1ac10f3f5ec8cf8c8401600dc4b59.png","title":"Phineas in CSS"},"isEmpty":false,"excerpt":"","category":["css-art","show-and-tell"],"creationTs":1623672540000,"date":"June 14, 2021","lastModified":"September 9, 2021 3:10 PM","lastModifiedTs":1631193000000,"published":"Yes","socialImage":"https://hariombalhara.in/notion/7f9780460ee1ac10f3f5ec8cf8c8401600dc4b59.png","title":"Phineas in CSS","updated":"September 9, 2021"},"content":"

Recently I stumbled upon this guy on Twitter and started following him. He explains CSS so well and keeps sharing his CSS Art. I have always been fascinated by how people are able to build beautiful things just using CSS. But I have been solely involved with working in JavaScript writing libraries in the past few years which involved negligible CSS.

With a lot of time in my hands now, I thought of working on one such art just to understand what is behind that magic :)

I picked this piece from Pratham's twitter and started working on it. This was a an entirely different experience. You have to visualize how you can make use of Box Model in a creative way to make various shapes. This is like applying a lot of HACKS but you get beautiful results with that :)

$\"Phineas%20in%20CSS%20e43438c5beb649db977e2cd71b14adfd/Screenshot_2021-06-14_at_5.44.27_PM.png\"$

Here is the codepen for Phineas.

\n"}]

Category: css-art