Draw a horizontal tree using CSS pseudo elements
igauravsehrawat.github.io
Draw a horizontal tree using CSS pseudo elements
1–10 of 15 posts
Re: Draw a horizontal tree using CSS pseudo elements
#2By the title I thought it was a tree 'tree', with leaves and branches :) those you can find in a forest.
Though nice howto nonetheless :)
Re: Draw a horizontal tree using CSS pseudo elements
#3Very 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!
Re: Draw a horizontal tree using CSS pseudo elements
#4It'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.
Re: Draw a horizontal tree using CSS pseudo elements
#5It'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
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.
Re: Draw a horizontal tree using CSS pseudo elements
#6It'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
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.
Re: Draw a horizontal tree using CSS pseudo elements
#7By the title I thought it was a tree 'tree', with leaves and branches :) those you can find in a forest. Though nice howto nonetheless :)
There is also this kind of forest:
http://mathworld.wolfram.com/Forest.html
Re: Draw a horizontal tree using CSS pseudo elements
#8This 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.
Re: Draw a horizontal tree using CSS pseudo elements
#9By the title I thought it was a tree 'tree', with leaves and branches :) those you can find in a forest. Though nice howto nonetheless :)
I also thought the same thing, along the lines of drawing Simpsons characters in CSS.
Re: Draw a horizontal tree using CSS pseudo elements
#10This 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…
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.