5 ms·

Draw a horizontal tree using CSS pseudo elements

thinkMOAR 9y ago
By the title I thought it was a tree 'tree', with leaves and branches :) those you can find in a forest. Though nice howto nonetheless :)
- tobijkl 9y ago
  There is also this kind of forest: http://mathworld.wolfram.com/Forest.html http://mathworld.wolfram.com/Forest.html
- coldcode 9y ago
  I also thought the same thing, along the lines of drawing Simpsons characters in CSS.
gurgus 9y ago
Very cool writeup. I love posts like this that cover random things like this. I'm definitely going to take this away and mess around with it!
ChrisSD 9y ago
It's amusing that both this and "SVG can do that?"[1] are on the front page right now. Is it better to draw using HTML/CSS or SVG? I guess the answer is complicated. [1] https://news.ycombinator.com/item?id=15023766 https://news.ycombinator.com/item?id=15023766
- vincentriemer 9y ago
  In my personal/anecdotal experience, I've noticed a higher performance ceiling using HTML/CSS over SVG. Doing similar operations between the two usually shows SVG with better performance but if you are willing to put in the effort HTML/CSS can be made to outperform SVG.
- have_faith 9y ago
  From a practical perspective, I've had lots of bad experience with devs insisting on being clever and drawing complex graphics with layers of pseudo elements and complex gradients when dropping in an svg is quicker and more maintainable.
- hacker_9 9y ago
  SVG can work very well, an example project is Google Blockly [1]. [1] https://developers.google.com/blockly/ https://developers.google.com/blockly/
  - Kagerjay 9y ago
    is this the same thing MIT scratch uses?
    - hacker_9 9y ago
      From the docs [1]: "Scratch Blocks [2]: Designed by the people behind MIT's Scratch and built on the Blockly code base, Scratch Blocks offers a simplified programming model ideal for young learners." [1] https://developers.google.com/blockly/guides/overview https://developers.google.com/blockly/guides/overview [2] https://scratch.mit.edu/developers https://scratch.mit.edu/developers
twooster 9y ago
This is really cool. Yet, somehow, as cool as it is, I find it terribly depressing. In comparison to other "look what I can do" projects -- such code golf, or demo programming, or quines -- which achieve impressive results in a constrained environment because it's challenging, thousands of programmers have HAD to do silly things in CSS because there's no other choice. These amazing-yet-hacky solutions get copy-pasted down through the generations and what should be simple becomes enshrined in the arcane. I look at this and become exhausted in empathy. So in contrast to the opening line of the article, CSS is not amazing: people's talent for threading camels through the eyes of needles is amazing. Props to this guy for this. May I never have to recreate it.
- hacker_9 9y ago
  Not sure what point you are making here, but one of the nice things about modern browsers is you can write CSS and see the page update in real time. This is likely where a lot of OPs code came from, that might look confusing if you take it at face value only. Whenever I'm faced with a CSS problem, it's usually just a case of toggling on/off CSS in the DevTools to find the offender.
  - LoSboccacc 9y ago
    lucky you, whenever I face a css problem, it's usually the Safari/iOS engine doing something stupid with the browser chroma and requiring dozen hops to work around.
- brudgers 9y ago
  There's viz.js, http://viz-js.com/ http://viz-js.com/

By the title I thought it was a tree 'tree', with leaves and branches :) those you can find in a forest. Though nice howto nonetheless :)

tobijkl 9y ago
There is also this kind of forest: http://mathworld.wolfram.com/Forest.html http://mathworld.wolfram.com/Forest.html
coldcode 9y ago
I also thought the same thing, along the lines of drawing Simpsons characters in CSS.

gurgus 9y ago

Very cool writeup. I love posts like this that cover random things like this. I'm definitely going to take this away and mess around with it!

ChrisSD 9y ago

It's amusing that both this and "SVG can do that?"[1] are on the front page right now. Is it better to draw using HTML/CSS or SVG? I guess the answer is complicated. [1] https://news.ycombinator.com/item?id=15023766 https://news.ycombinator.com/item?id=15023766

vincentriemer 9y ago
In my personal/anecdotal experience, I've noticed a higher performance ceiling using HTML/CSS over SVG. Doing similar operations between the two usually shows SVG with better performance but if you are willing to put in the effort HTML/CSS can be made to outperform SVG.
have_faith 9y ago
From a practical perspective, I've had lots of bad experience with devs insisting on being clever and drawing complex graphics with layers of pseudo elements and complex gradients when dropping in an svg is quicker and more maintainable.
hacker_9 9y ago
SVG can work very well, an example project is Google Blockly [1]. [1] https://developers.google.com/blockly/ https://developers.google.com/blockly/
- Kagerjay 9y ago
  is this the same thing MIT scratch uses?
  - hacker_9 9y ago
    From the docs [1]: "Scratch Blocks [2]: Designed by the people behind MIT's Scratch and built on the Blockly code base, Scratch Blocks offers a simplified programming model ideal for young learners." [1] https://developers.google.com/blockly/guides/overview https://developers.google.com/blockly/guides/overview [2] https://scratch.mit.edu/developers https://scratch.mit.edu/developers

twooster 9y ago

This is really cool. Yet, somehow, as cool as it is, I find it terribly depressing. In comparison to other "look what I can do" projects -- such code golf, or demo programming, or quines -- which achieve impressive results in a constrained environment because it's challenging, thousands of programmers have HAD to do silly things in CSS because there's no other choice. These amazing-yet-hacky solutions get copy-pasted down through the generations and what should be simple becomes enshrined in the arcane. I look at this and become exhausted in empathy. So in contrast to the opening line of the article, CSS is not amazing: people's talent for threading camels through the eyes of needles is amazing. Props to this guy for this. May I never have to recreate it.

hacker_9 9y ago
Not sure what point you are making here, but one of the nice things about modern browsers is you can write CSS and see the page update in real time. This is likely where a lot of OPs code came from, that might look confusing if you take it at face value only. Whenever I'm faced with a CSS problem, it's usually just a case of toggling on/off CSS in the DevTools to find the offender.
- LoSboccacc 9y ago
  lucky you, whenever I face a css problem, it's usually the Safari/iOS engine doing something stupid with the browser chroma and requiring dozen hops to work around.
brudgers 9y ago
There's viz.js, http://viz-js.com/ http://viz-js.com/