CodePen runs weekly coding challenges, and this week's theme is Winter, focusing on Ice and Snow. I decided to participate by drawing an iceberg floating in the ocean.
I found an iceberg image online that I liked and thought it would be fun to recreate it in CSS. At first, I considered using multiple elements, then switched to a single element, and eventually settled on drawing the entire piece with pure CSS and zero HTML elements.
Whenever I share a zero-element drawing on CodePen, I add a small disclaimer: while the HTML panel may look empty, there is still some HTML. Specifically, I rely on the <body> element, along with its ::before and ::after pseudo-elements, to create the artwork.
There are also ways to achieve a true zero-HTML setup by applying the styles directly to :root and forcing the browser to render the CSS (this only works with Apache and Firefox, though.) So technically, this drawing could be achieved with pure CSS and absolutely no HTML elements.
The drawing itself is fairly straightforward:
-
body: the sky (a linear gradient) and twoconic-gradientshadows -
body::before: the iceberg, shaped with aclip-pathand shaded with conic gradients -
body::after: the water and waves, created using a repeating horizontal radial gradient plus a linear gradient for depth
You can find the live demo and the source code on CodePen:
Top comments (2)
Nice! Pure CSS art 💖
I initially had it with a more political content... but decided to remove it for this demo :$