CSS Demo Critique

Demo 1: border-image.com

Css code for the settings.

I like that they show the css code that generates the settings close to the other components. It allows me to figure out what I should write to replicate the result without needing a tool like this and is a good way of teaching. This is a plus for learnability.

Offset settings.

I wish it was more clear what the offset settings do. It doesn't look like it affects the image. This hurts learnability. Also, trying to change the offset sometimes results in a blocked cursor but after changing the value slightly, which hurts safety.

Color picker.

I wish the color selector updated the border without having to click choose every time. This would require fewer clicks to try different colors and would improve efficiency significantly.

Demo 2: Glassmorphism CSS Generator

Styled CSS code.

I like that the CSS code is colored to contrast values from the rest of the keywords. It is helpful in noticing the effects of the changes I am making more easily. This is a plus for learnability.

Slides adjustable by arrow keys.

I like that the settings are adjustable using arrow keys as I found it helps me get more precise (I drag too much using a trackpad). This is a plus in efficiency and safety.

Not editable code.

I wish the CSS code was editable, it would let me play with values and test my understanding. This is an opportunity to increase learnability.