After success on Hacker News two weeks ago, by looking at analytics numbers (11K returning users, and counting), I realized there's a real need in this tool.
Thank you all for feedback and feature requests — I put my hands on it, right after talking to you (users). A bit more than a week later, I'm happy to deploy the latest release. I've shifted focus from just tinkering to learning and sharing your experience. If you can't wait, here's a direct link to the tool.
So, what's new?
- In the first place a lot of new CSS3 properties, like blending modes and background clipping, see this example
- Every property Now has a link to MDN documentation
- Every property supported by its code-sample right above it
- Generated CSS, SASS, SCSS, and LESS code now well-prefixed to work on
>0.5
, not dead
, and IE9
to IE11
with autoprefixer
- Keyboard shortcuts as in any other editor! Undo/Redo
- New sharing experiences — after the desired result is achieved it can be shared via direct link, or saved as to your snippets list
- Fonts! Now you can toggle between different fonts, default, system, and top5 from Google Fonts. Let me know if your favorite font is missing. I'll be happy to add it :)
- Much better performance, especially on heavy filters, blurs, and 3D transitions
- Much better on mobile devices
- It's a full-featured PWA. It means you can install it via "Add to Home Screen" on iOS and Android devices and have this tool everywhere with you, even if you're offline!
- Demos, to kick your inspiration and show capabilities of this tool, I've prepared a few examples (send me yours, I'll add your "styles" and name on our list):
I hope this tool is going to find its place in your bookmarks. Do not hesitate to ask for more features and share your CSS3 artwork, — I'll be happy to add it and your name to our snippet and example lists.
Let me know wdyt 🤔
@dr_dimitru, I have been looking for something like this for a while. Thank you for sharing.
Do you have a demo video of you using the tool? I find it a bit hard to use, and seeing somebody do it on video would be helpful. I am most interested in positioning elements (e.g., centering, responsive grid).
Thank you for feedback, I'm glad you found it useful.
There are a few videos on our youtube channel, but all of them time-lapse.
The thing is our tool is focused on styling single DOM element and/or image/text in it.
I'm afraid there is no feature for responsive grid, layouts, or flow.
But if you need to quickly prototype border-radius, background, blending, filters, 3D transitions, colors, fonts, buttons, inputs — this tool will help you a lot
The videos really helpful. Thank you. Yes, this will definitely help me for prototyping single DOM elements. I just subscribed to your channel.
Can you recommend any good WYSIWYG CSS editors for layouts / positioning of multiple elements?
Not those which will let you grab the CSS code and go.
Usually I recommend editors from wix, webflow, and etc constructors, but again, they won't let you grab the code and go. Take a look on Figma, maybe they have what you're looking for.
Thank you for valuable feedback, nice to see you among users.
Thank you @dr_dimitru
Great work! CSS has been always the hardest thing in front end development for me :)
Thank you for kind words. I wish this toll will find its place in your browser bookmarks, and will help with learning and quick "styles" prototyping 🚀
I'm actually myself using it on daily basis, especially for
transform3d
and border radius, don't know exactly whyborder-radius
is that difficult to me 😅