6 ms·

Pure CSS Landscape – An Evening in Southwold

219 points by tambourine_man 7y ago

WillDaSilva 7y ago
How was this made? Manually? Or somehow converted from a vector graphic? In any case, it's beautiful. I love the dots in the water.
- skrowl 7y ago
  I was wondering the same thing. I can't imagine the amount of trial and error that would go into making something like this manually.
- skrebbel 7y ago
  The code is super clean, I'm pretty sure it was done manually.
degenerate 7y ago
This is next level. If you expand the frame you can see how the reflection and water are created with simple shapes, but the houses on the right are extremely detailed. Some of this is basically pixel art... I would love knowing how long this took, or if any tools assisted in the creation.
zapstar 7y ago
This is incredible. But can you explain the “groin” tag?
- davecardwell 7y ago
  https://en.wikipedia.org/wiki/Groyne https://en.wikipedia.org/wiki/Groyne
- detritus 7y ago
  If you delete them you'll see which bits disappear respectively from the image - in this case: https://en.wikipedia.org/wiki/Groyne https://en.wikipedia.org/wiki/Groyne
- acta_non_verba 7y ago
  The groin is the sea defence you can see in the foreground. It stops long shore drift (but there is some debate about if they just shift the problem elsewhere)
danShumway 7y ago
Holy heck, this is amazing. I'll second other people that I would love to see more of the design and planning that went into this.
hooch 7y ago
The artist describes this piece as "The final part to my pointless trilogy" and links to these works in the comments: Still Life https://codepen.io/ivorjetski/pen/xMJoYO https://codepen.io/ivorjetski/pen/xMJoYO Portrait https://codepen.io/ivorjetski/pen/dBYWWZ https://codepen.io/ivorjetski/pen/dBYWWZ
dubcanada 7y ago
Whole moly, changing the sunset colour changes the whole thing. This is crazy. 100% would love to know how this is built and know more about the planning.
tambourine_man 7y ago
The artist's account on Twitter: https://twitter.com/ivorjetski/status/1238063321015889921 https://twitter.com/ivorjetski/status/1238063321015889921 I too am eager to read a blog post on the technique.
- yonderboy 7y ago
  He also posted a video of the work being created. Wondering what tools he used to make it. https://www.youtube.com/watch?v=rUCVBNNyjC4 https://www.youtube.com/watch?v=rUCVBNNyjC4
larodi 7y ago
this is really taking the Befunge way
iamroot 7y ago
Instant vaporwave aesthetic: $sun1: cyan;
- disillusion 7y ago
  $sun1: green; for an instant aurora.
dylan604 7y ago
I see CSS examples like this, and just want to cry that I can barely make a UI that works. I know CSS is powerful, yet it is absolutely mind numbing in getting consistent results. Anything I make looks like it was designed by a developer. The only good thing is that I know this to be the case, and I'm constantly on the look out for ways to improve.
- jsiepkes 7y ago
  I know what you mean but you shouldn't forget that you can also find people painting the Mona Lisa in MS Paint on YouTube with stunning results. Though it still remains a pretty impressive feat...
  - dylan604 7y ago
    I totally get the concept of spending countless hours on something that "sane" people would never attempt. I have plenty of electronic projects in my workspace at various levels of completion. They were all started from my looking at off-the-shelf options that were either too expensive for my budget or only providing ~80% of the features I needed. The most dangerous thing for me is someone else to tell me I "can't" anything. I'll run my fingers to the bone just to prove I "could" (to various degrees of success). TLDR: it's the learning along the way that matters more than the result in and of itself.
- dmitriid 7y ago
  UI is very different from position:absolute on a thousand divs. That's why these examples can serve as only art. They are not representative of CSS' applicability to building UIs (it still sucks).
- floatingatoll 7y ago
  There’s a stage of investment in some specific skill mindset that results in being able to produce things that seem to be absurd or impossible or “I could never do that”. There aren’t many real-life opportunities to productively exercise that degree of skill in obvious ways; if you cut down a tree perfectly, few will truly notice how perfect the stump is, even if they may appreciate the result unthinkingly. So crafting something maximum-insanity like this is a way to exercise all those hard-earned muscles of some random skills, in coordination, for the pure joy of being able to produce a pointless but awesome result. It isn’t so much about “a thousand hours” as it is about “learning how things work at the deepest level”, and sometimes to do that you have to learn something unrelated and cross-apply the skills. If you want to learn to paint-by-stylesheet, pick up a children’s paint by numbers coloring book and color it in however you like and then try to work out what the CSS for it would be. Whether you succeed or not, you’ll be forced to rethink CSS at a basic level, which will expand your mindset and eventually your skill set. Or study how GL shaders work, and try to comprehend what’s going on when people build cool GL demos like the fish benchmark. You may not ever end up using that GL knowledge, but you’ll be more prepared for SVG and canvas elements, which cross-applies to CSS gradients and layout skills. Or study how DOOM level maps (“wad files”) are built. There are stellar writeups of how ultra-basic technology and ridiculous hacks (“no bridges”) were used to make 3D perform brilliant things with the tiniest of CPU resources. There is zero practical value in this on the surface, but it carries some valuable lessons in how to make a great UI with careful selection of tradeoffs, and you’ll probably end up being better at time-design compromises as a result. One thousand of those later, you will be able to paint the Mona Lisa in CSS, and it’ll be enjoyable as an evening project over several weeks or months :)
muizelaar 7y ago
For a fun browser painting performance test try resizing the pane with the illustration. It's nice to see WebRender doing quite a bit better on it compared to other browsers.
jiofih 7y ago
If you thought postscript was bad, welcome the world’s most terrible vector image format.
- arethuza 7y ago
  Please don't upset the NeWS fans on HN or we'll come and tweak your transformation matrix ;-)
076ae80a-3c97-4 7y ago
Always strange to see things close to home on HN. I spent New Years in Southwold, a lovely place to visit on the Suffolk coast with the fantastic Adnams Brewery right in the heart of the town.
- Lio 7y ago
  Also don't forget the wonderful Under The Pier Show[1] It's a set of weird and wonderful custom arcade machines such as the "Rent-a-dog" game and, my favourite, the "Small Hadron Collider". [1] http://underthepier.com/ http://underthepier.com/
  - frosted-flakes 7y ago
    For those who don't know, these custom arcade machines were made by Tim Hunkin, a mechanical genius who co-created the show "A Secret Life of Machines" in the 80s and 90s. Most of them up are on Youtube, go check them out: [0]. Also, I absolutely love that website, as well as Tim Hunkin's personal website[1]. It has a charm about it that few websites have these days. [0] https://www.youtube.com/playlist?list=PLByTa5duIolYRtq45Cz_GmtzfWJyA4bik https://www.youtube.com/playlist?list=PLByTa5duIolYRtq45Cz_G... [1] http://timhunkin.com/control/o_about_the_site.htm http://timhunkin.com/control/o_about_the_site.htm. Take a look at the "about the site" page!
Hitton 7y ago
This is absolutely crazy in a good way. And if you let me paraphrase a bit: Your developers were so preoccupied with whether or not they could, they didn’t stop to think if they should.
epidemian 7y ago
Fascinating. And very impressive the way the sun color is parameterized so you can do, e.g., `$sun1: aquamarine;` in the CSS and still get something that makes sense and looks quite psychedelic.
- carapace 7y ago
  Grey sun makes it B/W!
palerdot 7y ago
This reminded me of a recent article where an old lady breathtakingly creates beautilful drawings[0] using 'MS Word'. Edit: Scroll down the article to see one of her wonderful illustrations using MS Word [0] - https://economictimes.indiatimes.com/magazines/panache/womens-day-arundhati-bhattacharya-on-why-she-celebrates-her-aunt-parbati-dutt/articleshow/74531753.cms?from=mdr https://economictimes.indiatimes.com/magazines/panache/women...
mrweasel 7y ago
Zooming in on the image crashed my phone.
- vijaybritto 7y ago
  Rightfully so
sireat 7y ago
Where do the custom HTML tags (sea,beach etc) come from? I do not see any preprocessor in codepen.io settings. I thought that in order to use something like https://html.spec.whatwg.org/multipage/custom-elements.html https://html.spec.whatwg.org/multipage/custom-elements.html you'd need Javascript.
- jazzyjackson 7y ago
  They are rendered as HTMLUnknownElement and just don’t have any behavior or style as default, you can still refer to the tags in your css https://developer.mozilla.org/en-US/docs/Web/API/HTMLUnknownElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLUnknown...
zohairshaikh72 7y ago
This is amazing

How was this made? Manually? Or somehow converted from a vector graphic? In any case, it's beautiful. I love the dots in the water.

skrowl 7y ago
I was wondering the same thing. I can't imagine the amount of trial and error that would go into making something like this manually.
skrebbel 7y ago
The code is super clean, I'm pretty sure it was done manually.

degenerate 7y ago

This is next level. If you expand the frame you can see how the reflection and water are created with simple shapes, but the houses on the right are extremely detailed. Some of this is basically pixel art... I would love knowing how long this took, or if any tools assisted in the creation.

zapstar 7y ago

This is incredible. But can you explain the “groin” tag?

davecardwell 7y ago
https://en.wikipedia.org/wiki/Groyne https://en.wikipedia.org/wiki/Groyne
detritus 7y ago
If you delete them you'll see which bits disappear respectively from the image - in this case: https://en.wikipedia.org/wiki/Groyne https://en.wikipedia.org/wiki/Groyne
acta_non_verba 7y ago
The groin is the sea defence you can see in the foreground. It stops long shore drift (but there is some debate about if they just shift the problem elsewhere)

danShumway 7y ago

Holy heck, this is amazing. I'll second other people that I would love to see more of the design and planning that went into this.

hooch 7y ago

The artist describes this piece as "The final part to my pointless trilogy" and links to these works in the comments: Still Life https://codepen.io/ivorjetski/pen/xMJoYO https://codepen.io/ivorjetski/pen/xMJoYO Portrait https://codepen.io/ivorjetski/pen/dBYWWZ https://codepen.io/ivorjetski/pen/dBYWWZ

dubcanada 7y ago

Whole moly, changing the sunset colour changes the whole thing. This is crazy. 100% would love to know how this is built and know more about the planning.

tambourine_man 7y ago

The artist's account on Twitter: https://twitter.com/ivorjetski/status/1238063321015889921 https://twitter.com/ivorjetski/status/1238063321015889921 I too am eager to read a blog post on the technique.

yonderboy 7y ago
He also posted a video of the work being created. Wondering what tools he used to make it. https://www.youtube.com/watch?v=rUCVBNNyjC4 https://www.youtube.com/watch?v=rUCVBNNyjC4

larodi 7y ago

this is really taking the Befunge way

iamroot 7y ago

Instant vaporwave aesthetic: $sun1: cyan;

disillusion 7y ago
$sun1: green; for an instant aurora.

dylan604 7y ago

I see CSS examples like this, and just want to cry that I can barely make a UI that works. I know CSS is powerful, yet it is absolutely mind numbing in getting consistent results. Anything I make looks like it was designed by a developer. The only good thing is that I know this to be the case, and I'm constantly on the look out for ways to improve.

jsiepkes 7y ago
I know what you mean but you shouldn't forget that you can also find people painting the Mona Lisa in MS Paint on YouTube with stunning results. Though it still remains a pretty impressive feat...
- dylan604 7y ago
  I totally get the concept of spending countless hours on something that "sane" people would never attempt. I have plenty of electronic projects in my workspace at various levels of completion. They were all started from my looking at off-the-shelf options that were either too expensive for my budget or only providing ~80% of the features I needed. The most dangerous thing for me is someone else to tell me I "can't" anything. I'll run my fingers to the bone just to prove I "could" (to various degrees of success). TLDR: it's the learning along the way that matters more than the result in and of itself.
dmitriid 7y ago
UI is very different from position:absolute on a thousand divs. That's why these examples can serve as only art. They are not representative of CSS' applicability to building UIs (it still sucks).
floatingatoll 7y ago
There’s a stage of investment in some specific skill mindset that results in being able to produce things that seem to be absurd or impossible or “I could never do that”. There aren’t many real-life opportunities to productively exercise that degree of skill in obvious ways; if you cut down a tree perfectly, few will truly notice how perfect the stump is, even if they may appreciate the result unthinkingly. So crafting something maximum-insanity like this is a way to exercise all those hard-earned muscles of some random skills, in coordination, for the pure joy of being able to produce a pointless but awesome result. It isn’t so much about “a thousand hours” as it is about “learning how things work at the deepest level”, and sometimes to do that you have to learn something unrelated and cross-apply the skills. If you want to learn to paint-by-stylesheet, pick up a children’s paint by numbers coloring book and color it in however you like and then try to work out what the CSS for it would be. Whether you succeed or not, you’ll be forced to rethink CSS at a basic level, which will expand your mindset and eventually your skill set. Or study how GL shaders work, and try to comprehend what’s going on when people build cool GL demos like the fish benchmark. You may not ever end up using that GL knowledge, but you’ll be more prepared for SVG and canvas elements, which cross-applies to CSS gradients and layout skills. Or study how DOOM level maps (“wad files”) are built. There are stellar writeups of how ultra-basic technology and ridiculous hacks (“no bridges”) were used to make 3D perform brilliant things with the tiniest of CPU resources. There is zero practical value in this on the surface, but it carries some valuable lessons in how to make a great UI with careful selection of tradeoffs, and you’ll probably end up being better at time-design compromises as a result. One thousand of those later, you will be able to paint the Mona Lisa in CSS, and it’ll be enjoyable as an evening project over several weeks or months :)

muizelaar 7y ago

For a fun browser painting performance test try resizing the pane with the illustration. It's nice to see WebRender doing quite a bit better on it compared to other browsers.

jiofih 7y ago

If you thought postscript was bad, welcome the world’s most terrible vector image format.

arethuza 7y ago
Please don't upset the NeWS fans on HN or we'll come and tweak your transformation matrix ;-)

076ae80a-3c97-4 7y ago

Always strange to see things close to home on HN. I spent New Years in Southwold, a lovely place to visit on the Suffolk coast with the fantastic Adnams Brewery right in the heart of the town.

Lio 7y ago
Also don't forget the wonderful Under The Pier Show[1] It's a set of weird and wonderful custom arcade machines such as the "Rent-a-dog" game and, my favourite, the "Small Hadron Collider". [1] http://underthepier.com/ http://underthepier.com/
- frosted-flakes 7y ago
  For those who don't know, these custom arcade machines were made by Tim Hunkin, a mechanical genius who co-created the show "A Secret Life of Machines" in the 80s and 90s. Most of them up are on Youtube, go check them out: [0]. Also, I absolutely love that website, as well as Tim Hunkin's personal website[1]. It has a charm about it that few websites have these days. [0] https://www.youtube.com/playlist?list=PLByTa5duIolYRtq45Cz_GmtzfWJyA4bik https://www.youtube.com/playlist?list=PLByTa5duIolYRtq45Cz_G... [1] http://timhunkin.com/control/o_about_the_site.htm http://timhunkin.com/control/o_about_the_site.htm. Take a look at the "about the site" page!

Hitton 7y ago

This is absolutely crazy in a good way. And if you let me paraphrase a bit: Your developers were so preoccupied with whether or not they could, they didn’t stop to think if they should.

epidemian 7y ago

Fascinating. And very impressive the way the sun color is parameterized so you can do, e.g., `$sun1: aquamarine;` in the CSS and still get something that makes sense and looks quite psychedelic.

carapace 7y ago
Grey sun makes it B/W!

palerdot 7y ago

This reminded me of a recent article where an old lady breathtakingly creates beautilful drawings[0] using 'MS Word'. Edit: Scroll down the article to see one of her wonderful illustrations using MS Word [0] - https://economictimes.indiatimes.com/magazines/panache/womens-day-arundhati-bhattacharya-on-why-she-celebrates-her-aunt-parbati-dutt/articleshow/74531753.cms?from=mdr https://economictimes.indiatimes.com/magazines/panache/women...

mrweasel 7y ago

Zooming in on the image crashed my phone.

vijaybritto 7y ago
Rightfully so

sireat 7y ago

Where do the custom HTML tags (sea,beach etc) come from? I do not see any preprocessor in codepen.io settings. I thought that in order to use something like https://html.spec.whatwg.org/multipage/custom-elements.html https://html.spec.whatwg.org/multipage/custom-elements.html you'd need Javascript.

jazzyjackson 7y ago
They are rendered as HTMLUnknownElement and just don’t have any behavior or style as default, you can still refer to the tags in your css https://developer.mozilla.org/en-US/docs/Web/API/HTMLUnknownElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLUnknown...

zohairshaikh72 7y ago

This is amazing