A UI editor for single-element CSS illustrations | Hacker News Reader

A UI editor for single-element CSS illustrations

zerodivs.com

127 pointsaaadult25 comments

Nice interface. It feels like I'm using Illustrator.

I suppose the intended use case might be very stylized HTML elements? Like designing a really fancy button?

In situations where your intent is to display a stand alone image, rather than add style to an element, am I right in thinking SVG is the better choice? I see HN posts where people create whole paintings out of CSS and HTML, and I always thought the point was to marvel at the novelty of this approach. Do people really think everyday web graphics should be stored as CSS, rather than SVG? How come I don't see more sites using SVG?

Zerodivs.com actually links to one of these: https://a.singlediv.com/ Is there something I'm missing here?

In my experience, CSS is more consistently supported between rendering engines. SVG is a shitshow once you start adding filters.

Thank you. I heard SVG was not well supported cross browser a few years ago, but I presumed things have improved since then. Guess I was wrong.

They have improved, but they haven't improved consistently. The spec is just too enormous.

I had no idea that SVG even supported filters!

https://yoksel.github.io/svg-filters

The resize functionality doesn't work very well on macOS + Firefox. Once I place an element, I can't easily make changes to it, for some reason (possibly due to adblock?)

It's not adblock. Resize is very weird and janky on my un-blocked firefox.

Repro on Chrome 83 for Windows.

I admit I’m on my iPhone, but I don’t know what I’m supposed to do. I tapped around and I can’t seem to get anything to happen. Just some feedback

I wonder if this just doesn't work on Safari at all; I'm on macOS and I can't seem to get it to do anything either.

Super cool! This is a great idea and very useful for those of us who use CSS widgets as standins for graphical assets.

I will say that I also have trouble resizing the elements using Firefox, thought it all looks good in Chrome.

+1 on compliment and the Firefox bug! it's making my day!

Nice! If the author is reading this, the color picker appears to have some bug. Added a circle, then chose a color using the top color picker, and nothing happened. Then chose the same color with the right hand side color picker, and now both top and side picker display same color, and the circle color changed.

Seems very buggy. I wasn't able to figure out how to drag a box to select multi objects. Tried Alt-drag, and it resized in a weird way I wasn't able to control very well, and then the canvas was stuck to the mouse pointer with no way of letting go of it.

Cool! Wish it could treat the CTRL button (or is that CTRL + SHIFT) the way standard illustrator programs do: when held down as you specify a shape on the canvas, the shape remains proportional (rects are always squares, ellipses are always circles).

Something like this should probably be part of a browser's developer tools.

Are there any video tutorials? Can't really understand how to use it.

You have to choose a shape/subfigure CSS can render from the top toolbar. Then render that on the canvas with a standard drag. You can't freehand, obviously.

I was actually wondering how the tool would handle complexity as CSS has very little in the way of options. This is a neat way to do it.

Doesn’t work on iPad OS

It just doesn't work in Safari.

I was wondering about this. I clicked around for several minutes...

I wish people would test their sites in more than just Chromium! Checking that it works in at least one second browser dramatically improves the portability of your site in general.

Safari lacks quite some web specs, so it may just work fine in the rest of browsers.

it works fine in edge firefox and chrome. safari is terrible.

Looks like the domain is blocked by Cisco Umbrella firewall.

This is normal for Umbrella. Domains which are queried for the first time via Umbrella become part of the Newly Seen Domains security category [0], and this category is often enabled by admins.

[0] https://support.umbrella.com/hc/en-us/articles/235911828-New...

Reply on news.ycombinator.com