Creating art with CSS

A presentation at CONNECT Asia 2019 in August 2019 in Singapore by Chen Hui Jing

CSS is the language for describing the presentation of web pages, including colours, layouts and fonts. But we can use CSS to create works of art in your browser. Let’s take a look at the CSS properties which can help us do that.

Video

Buzz and feedback

Here’s what was said about this presentation on social media.

Creating Art with CSS @hj_chen, dont know got Malaysia flag anot? @henrylim96 #wwcode #connectasia pic.twitter.com/Vu6nsJV29h
— Jecelyn Yeen (@JecelynYeen) August 31, 2019
Creating an Art with CSS by Chen Hui Jing#CONNECTAsia #WWCode pic.twitter.com/zZVKghZK0f
— Anj D. Cerbolles (@anjCerbolles) August 31, 2019
ATM: Creating art with CSS#WWCode #CONNECTAsia pic.twitter.com/vofsKtDzyu
— Freilla Mae Espinola (@freillamae13) August 31, 2019
.@hj_chen "The web is full of boxes. Their properties, like border-radius, can be modified to create art!". #CONNECTAsia #wwcode pic.twitter.com/QOYKUnAi3Y
— WWCode Singapore (@Wwcodesingapore) August 31, 2019
Say “Equilateral Quadrilateral” multiple times and faster! 🤣 by @hj_chen #CONNECTAsia #WWCode pic.twitter.com/qWdzOLgko0
— Anj D. Cerbolles (@anjCerbolles) August 31, 2019
Did you know that borders of a box meet diagonally?
And 'transparent' is a color in CSS? 🤯@hj_chen #CONNECTAsia #WWCode pic.twitter.com/Ngl9nGP4cg
— WWCode Singapore (@Wwcodesingapore) August 31, 2019
Want to create art with complex shapes? Clip-path ftw!
Hand writing clip paths is difficult (or therapeutic?), we can use the inspector to drag points to modify shapes! #CONNECTAsia #WWCode pic.twitter.com/qnfS5bG2b6
— WWCode Singapore (@Wwcodesingapore) August 31, 2019
Live at #WWCode #ConnectAsia: @hj_chen giving her classic "anyhowly" talk on creating art with CSS - to the amusement of the audience. 🤣

Loads of timely hand gestures. Entertainment level: 1000000000

Now, where's the Malaysia flag? 🇲🇾 https://t.co/fFxK55GGzI pic.twitter.com/6F0fqeLEPw
— Ong Chin Hwee (@ongchinhwee) August 31, 2019
Got to see @hj_chen give a talk again! Very fun and informative talk about CSS art!

Makes me wanna do Geometry and Trigonometry again. 😁#CONNECTAsia pic.twitter.com/I7lHN5UTyQ
— Joy Paas (@kjcpaas) August 31, 2019
Transforms like translate, scale, rotate are another great way to modify shapes.
Gradients (linear and radial) with the right start and stops create amazing transitions in color! @hj_chen #CONNECTAsia #wwcode pic.twitter.com/SRvkIANxdF
— WWCode Singapore (@Wwcodesingapore) August 31, 2019
There's loads to learn behind creating a CSS heart. ❤ #WWCode #ConnectAsia @WomenWhoCode pic.twitter.com/LZJp7TmnVh
— Ong Chin Hwee (@ongchinhwee) August 31, 2019
The best part: Malaysia flag lai liaoooo. @hj_chen #WWCode #ConnectAsia @WomenWhoCode pic.twitter.com/FqpoYma7tP
— Ong Chin Hwee (@ongchinhwee) August 31, 2019
Such a neat preso! @hj_chen talks about making art with css and should also consider stand up comedy ! 🤣 #WWCode #CONNECTAsia pic.twitter.com/I5ZMjwRnsX
— Millie (@milhauschan) August 31, 2019
We are building the Malaysian flag with @hj_chen through various stages. 🤯#CONNECTAsia #WWCode pic.twitter.com/6dLq0zl3M9
— WWCode Singapore (@Wwcodesingapore) August 31, 2019
...And our very own Singapore flag ❤🇸🇬#CONNECTAsia #WWCode pic.twitter.com/hSkmaK3bjR
— WWCode Singapore (@Wwcodesingapore) August 31, 2019
Malaysia flag using CSS by @hj_chen - very apt occasion. Happy birthday Malaysia! 🇲🇾 #WWCode #ConnectAsia @WomenWhoCode @WomenwhocodeKL pic.twitter.com/FGHSOHiNqw
— Ong Chin Hwee (@ongchinhwee) August 31, 2019
Finally I get how triangles are made in CSS! Thanks @hj_chen for your entertaining and educational talk! 😄 #WWCode #CONNECTAsia pic.twitter.com/qAnuvhKFxB
— Rabea (@aebaR) August 31, 2019
Building Malaysian Flag from scratch with CSS - esp today - Malaysian Day! ❤️🇲🇾 #malaysianday #WWCode #connectasia pic.twitter.com/CABxAju55v
— Apurva Jain (@appi2393) August 31, 2019
Not forgetting that there's something for Singapore too - Singapore flag using CSS 🇸🇬 by @hj_chen #WWCode #CONNECTAsia @WomenWhoCode @Wwcodesingapore pic.twitter.com/a2HZa4Zh0d
— Ong Chin Hwee (@ongchinhwee) August 31, 2019