6 ms·

A UI editor for single-element CSS illustrations

127 points by aaadult 6y ago

BossingAround 6y ago
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?)
- recursive 6y ago
  It's not adblock. Resize is very weird and janky on my un-blocked firefox.
  - teh_klev 6y ago
    Repro on Chrome 83 for Windows.
mundo 6y ago
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.
- 627467 6y ago
  +1 on compliment and the Firefox bug! it's making my day!
fewaw2322 6y ago
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/ https://a.singlediv.com/ Is there something I'm missing here?
- qppo 6y ago
  In my experience, CSS is more consistently supported between rendering engines. SVG is a shitshow once you start adding filters.
  - fewaw2322 6y ago
    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.
    - qppo 6y ago
      They have improved, but they haven't improved consistently. The spec is just too enormous.
  - Apofis 6y ago
    I had no idea that SVG even supported filters! https://yoksel.github.io/svg-filters https://yoksel.github.io/svg-filters
monkeymonkey 6y ago
Doesn’t work on iPad OS
- caitlinface 6y ago
  It just doesn't work in Safari.
  - aluminum96 6y ago
    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.
    - jfkebwjsbx 6y ago
      Safari lacks quite some web specs, so it may just work fine in the rest of browsers.
    - deleted 6y ago
      [deleted]
    - 4rt 6y ago
      it works fine in edge firefox and chrome. safari is terrible.
amelius 6y ago
Something like this should probably be part of a browser's developer tools.
danellis 6y ago
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.
kinow 6y ago
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.
culopatin 6y ago
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
- gpmcadam 6y ago
  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.
bhhaskin 6y ago
Looks like the domain is blocked by Cisco Umbrella firewall.
- eddyg 6y ago
  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-Newly-Seen-Domains-Security-Category https://support.umbrella.com/hc/en-us/articles/235911828-New...
deleted 6y ago
[deleted]
johnx123-up 6y ago
Are there any video tutorials? Can't really understand how to use it.
- skytreader 6y ago
  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.
skytreader 6y ago
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).

127 points by aaadult 6y ago

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?)

recursive 6y ago
It's not adblock. Resize is very weird and janky on my un-blocked firefox.
- teh_klev 6y ago
  Repro on Chrome 83 for Windows.

mundo 6y ago

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.

627467 6y ago
+1 on compliment and the Firefox bug! it's making my day!

fewaw2322 6y ago

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/ https://a.singlediv.com/ Is there something I'm missing here?

qppo 6y ago
In my experience, CSS is more consistently supported between rendering engines. SVG is a shitshow once you start adding filters.
- fewaw2322 6y ago
  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.
  - qppo 6y ago
    They have improved, but they haven't improved consistently. The spec is just too enormous.
- Apofis 6y ago
  I had no idea that SVG even supported filters! https://yoksel.github.io/svg-filters https://yoksel.github.io/svg-filters

monkeymonkey 6y ago

Doesn’t work on iPad OS

caitlinface 6y ago
It just doesn't work in Safari.
- aluminum96 6y ago
  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.
  - jfkebwjsbx 6y ago
    Safari lacks quite some web specs, so it may just work fine in the rest of browsers.
  - deleted 6y ago
    [deleted]
  - 4rt 6y ago
    it works fine in edge firefox and chrome. safari is terrible.

amelius 6y ago

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

danellis 6y ago

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.

kinow 6y ago

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.

culopatin 6y ago

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

gpmcadam 6y ago
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.

bhhaskin 6y ago

Looks like the domain is blocked by Cisco Umbrella firewall.

eddyg 6y ago
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-Newly-Seen-Domains-Security-Category https://support.umbrella.com/hc/en-us/articles/235911828-New...

deleted 6y ago

[deleted]

johnx123-up 6y ago

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

skytreader 6y ago
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.

skytreader 6y ago

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).