12 ms·

CSS Shapes Editor for Chrome

401 points by jonphillips06 12y ago

deleted 12y ago
[deleted]
timothya 12y ago
CSS Shapes are still pretty new; looks like support is only there in the newest version of Chrome: http://caniuse.com/#feat=css-shapes http://caniuse.com/#feat=css-shapes
- deleted 12y ago
  [deleted]
- gooserock 12y ago
  I love that people are developing early tools for these things, but it looks like this won't be usable for mainstream websites for years.
  - azakai 12y ago
    Not sure why you're getting downvoted, that's probably true, sad as it is. Hopefully it won't be years, but it won't be months, either. Even chrome and firefox, which auto-update their browsers in order to keep everyone on the latest version - which should let websites use new features earlier - seem to have around 1/4 to 1/3 of their users on old versions, http://cdn.arstechnica.net/wp-content/uploads/2014/09/chrome-2014-08-640x480.png http://cdn.arstechnica.net/wp-content/uploads/2014/09/chrome... http://cdn.arstechnica.net/wp-content/uploads/2014/09/firefox-2014-08-640x480.png http://cdn.arstechnica.net/wp-content/uploads/2014/09/firefo... which is worrying.
grizzles 12y ago
Why would one use CSS over SVG for this?
- pkulak 12y ago
  Because it's for laying out text, not creating images.
  - pimlottc 12y ago
    It seems though that many (most?) use cases would be solved if image formats supported non-rectangular bounding, er, "boxes". Seems like something that could potentially be added to SVG.
    - sambeau 12y ago
      If you look at the Alice demo, linked, it shows that it can also be used to creatively shape text layouts and animate them over time. https://www.youtube.com/watch?v=VON2shFlsKU https://www.youtube.com/watch?v=VON2shFlsKU
- fenomas 12y ago
  The shape is being used to style an HTML element; naturally you use CSS for that. But if you're asking why the shape is being defined with text, inline in the CSS, that's because defining shapes with SVG was postponed to level 2 of the CSS Shapes spec. http://dev.w3.org/csswg/css-shapes-2/#referencing-svg-shapes http://dev.w3.org/csswg/css-shapes-2/#referencing-svg-shapes
- untog 12y ago
  The only way to use SVG for this would be to include the text in the SVG. SVG's text handling is awful, and doesn't have concept of reflowing according to size, so it would ultimately be a terrible solution.
mattdesl 12y ago
Nice! I've also been working on some vector tools in the browser: http://mattdesl.github.io/path-illustrator/demo/advanced.html http://mattdesl.github.io/path-illustrator/demo/advanced.htm... I think dev-centric vector tools present a really good opportunity to improve the workflow between devs and designers and change the way many of us design web UI/animations. My main goals and interests: - modular tools that are not encased within a monolithic editor - animation/key frames - renderer agnostic (for use with canvas/WebGL/CSS/etc) - publishing path/animation state as a npm module, so that others could just "npm install spinny-preloader" - ultimately building a suite of tools for more fluid motion graphics that render in real-time in the browser, but look just as good as something from After Effects I wonder if some aspects of your tool could be reused for some of these goals.
- halflings 12y ago
  You should really see what the devtools team at Mozilla is working on. I think they already have many of those things either implemented or in progress.
  - mattdesl 12y ago
    How could I find out more?
- artursapek 12y ago
  Your tool is nice. The idea of doing vector graphics like this in the browser is very alluring. I worked on something similar for a long time, maybe you would find it useful: https://github.com/artursapek/mondrian https://github.com/artursapek/mondrian http://mondrian.io http://mondrian.io The original idea was also to create an animation tool which could export to canvas code and/or SVG files with embedded JS. Ended up just being a generic SVG editor. I eventually couldn't keep committing the time to develop it, but it was a fun project for a long while. Really got interesting when I started thinking about algorithms for something like Pathfinder (unfinished work: http://artur.co/pathfinder.html http://artur.co/pathfinder.html) and a freehand drawing tool which outputs cubic beziers (the crayon tool in my example). Also fun was coming up with data structures for undo/redo (mine still kind of suck). Anyway, have fun with your project.
fenomas 12y ago
CSS Shapes are still on the horizon, but not far off. Blink added the intent to ship them in May [0], and Apple called them out as one of the new web standards that will be in Safari 8 [1]. There's also a polyfill, incidentally: http://blogs.adobe.com/webplatform/2014/05/12/css-shapes-polyfill/ http://blogs.adobe.com/webplatform/2014/05/12/css-shapes-pol... [0]: http://bit.ly/blinkintents http://bit.ly/blinkintents [1]: http://9to5mac.files.wordpress.com/2014/06/screenshot-2014-06-02-13-29-57.jpg http://9to5mac.files.wordpress.com/2014/06/screenshot-2014-0...
bramgg 12y ago
This looks awesome! Not really usable yet due to the lack of browser support[0] (Chrome 37+ and Safari 8 with -webkit-), but it's this kind of thing that rallies support for web standards. [0] http://caniuse.com/#feat=css-shapes http://caniuse.com/#feat=css-shapes
ivanca 12y ago
In 2011 I created a JavaScript to do exactly what CSS Shapes do: https://github.com/Ivanca/Creative-Text-Boxes https://github.com/Ivanca/Creative-Text-Boxes, it even works in IE6+. It had a domain but due to lack of interest is now gone but there is still a copy here: http://nyudvik.com/ctb/ http://nyudvik.com/ctb/ , it has a GUI tool to generate the code for any shape: https://www.youtube.com/watch?v=iZ0_wxz5WQM https://www.youtube.com/watch?v=iZ0_wxz5WQM Off-topic: I'm looking for a remote part-time job as JavaScript Developer, if anyone is interested write me an email (ivanca@gmail)
mxfh 12y ago
Since this is deep into type setting/layout territory what's the state of hyphens: auto https://developer.mozilla.org/en/docs/Web/CSS/hyphens https://developer.mozilla.org/en/docs/Web/CSS/hyphens or is it still better to rely on adding soft hypens via script? Like hyphenator.js https://code.google.com/p/hyphenator/ https://code.google.com/p/hyphenator/
- Semaphor 12y ago
  http://caniuse.com/#search=hyphens http://caniuse.com/#search=hyphens With no version of chrome supporting it it seems like a bad idea to rely on it.
bambax 12y ago
Wow, fantastic tool, and great examples. Thanks for sharing.
LukeB_UK 12y ago
I didn't know that CSS shapes was a thing. That's really cool.
- TophWells 12y ago
  Me neither. Are they new?
- deleted 12y ago
  [deleted]
scoot 12y ago
Just curious, why can't the shape be generated from the outline of the image alpha with an offset, rather than having to be generated by hand?
- fenomas 12y ago
  They can: http://dev.w3.org/csswg/css-shapes/#shapes-from-image http://dev.w3.org/csswg/css-shapes/#shapes-from-image But note that this is a general spec for adding shapes to HTML elements. Wrapping text around images is just one of many possible use cases.
zeroonetwothree 12y ago
This is cool, but reading text with oddly-shaped images inside of it is pretty annoying. I hope CSS shapes aren't going to be used excessively.
- thathonkey 12y ago
  Yeah, I agree it would be annoying for long-form content (which is why magazines/newspapers never really adopted layouts like that in earnest) even if only because we've learned to read and therefore favor rectangular blocks of text. It's still a neat effect for creating little asides, blurbs, etc. though
- jdjb 12y ago
  Not to mention this is exactly the sort of "pixel perfect" design that we should be discouraging, not encouraging. It doesn't seem like this technique translates well to a flexible design philosophy by letting the browser choose the best way to reflow text around elements (based on the amount of available screen real estate).
  - untog 12y ago
    I don't think that's true. Looking at the video it seems like an ideal mix of both worlds - non-standard shaped images will be floated with CSS, and text will reflow and rewrap according to available size. Sounds pretty flexible to me.
  - lowboy 12y ago
    But that's exactly what this is doing: defining a better bounding area for an element so that the browser can flow text around it according to the available screen real estate. Defining the length of each line of text is a backward-facing solution and should be discouraged.
- drunken_thor 12y ago
  That form of content has been used for ages in magazines. There is no reason why it can't work for the same type of content on the web.
juanplusjuan 12y ago
Cool! Can't wait for it to appear in a standard CMS (e.g. WordPress, SquareSpace, Weebly). Seems like it's the perfect addition for professional editors a la Scoop (http://open.blogs.nytimes.com/2014/06/17/scoop-a-glimpse-into-the-nytimes-cms/ http://open.blogs.nytimes.com/2014/06/17/scoop-a-glimpse-int...)?
psteinweber 12y ago
Side note: The use of the GIFs on the page really cuts to the chase and shows immediately what everything is about. I only watch explanatory videos if I'm really interested in a product, therefore appreciate this presentation.

401 points by jonphillips06 12y ago

deleted 12y ago

[deleted]

CSS Shapes are still pretty new; looks like support is only there in the newest version of Chrome: http://caniuse.com/#feat=css-shapes http://caniuse.com/#feat=css-shapes

deleted 12y ago
[deleted]
gooserock 12y ago
I love that people are developing early tools for these things, but it looks like this won't be usable for mainstream websites for years.
- azakai 12y ago
  Not sure why you're getting downvoted, that's probably true, sad as it is. Hopefully it won't be years, but it won't be months, either. Even chrome and firefox, which auto-update their browsers in order to keep everyone on the latest version - which should let websites use new features earlier - seem to have around 1/4 to 1/3 of their users on old versions, http://cdn.arstechnica.net/wp-content/uploads/2014/09/chrome-2014-08-640x480.png http://cdn.arstechnica.net/wp-content/uploads/2014/09/chrome... http://cdn.arstechnica.net/wp-content/uploads/2014/09/firefox-2014-08-640x480.png http://cdn.arstechnica.net/wp-content/uploads/2014/09/firefo... which is worrying.

grizzles 12y ago

Why would one use CSS over SVG for this?

pkulak 12y ago
Because it's for laying out text, not creating images.
- pimlottc 12y ago
  It seems though that many (most?) use cases would be solved if image formats supported non-rectangular bounding, er, "boxes". Seems like something that could potentially be added to SVG.
  - sambeau 12y ago
    If you look at the Alice demo, linked, it shows that it can also be used to creatively shape text layouts and animate them over time. https://www.youtube.com/watch?v=VON2shFlsKU https://www.youtube.com/watch?v=VON2shFlsKU
fenomas 12y ago
The shape is being used to style an HTML element; naturally you use CSS for that. But if you're asking why the shape is being defined with text, inline in the CSS, that's because defining shapes with SVG was postponed to level 2 of the CSS Shapes spec. http://dev.w3.org/csswg/css-shapes-2/#referencing-svg-shapes http://dev.w3.org/csswg/css-shapes-2/#referencing-svg-shapes
untog 12y ago
The only way to use SVG for this would be to include the text in the SVG. SVG's text handling is awful, and doesn't have concept of reflowing according to size, so it would ultimately be a terrible solution.

mattdesl 12y ago

Nice! I've also been working on some vector tools in the browser: http://mattdesl.github.io/path-illustrator/demo/advanced.html http://mattdesl.github.io/path-illustrator/demo/advanced.htm... I think dev-centric vector tools present a really good opportunity to improve the workflow between devs and designers and change the way many of us design web UI/animations. My main goals and interests: - modular tools that are not encased within a monolithic editor - animation/key frames - renderer agnostic (for use with canvas/WebGL/CSS/etc) - publishing path/animation state as a npm module, so that others could just "npm install spinny-preloader" - ultimately building a suite of tools for more fluid motion graphics that render in real-time in the browser, but look just as good as something from After Effects I wonder if some aspects of your tool could be reused for some of these goals.

halflings 12y ago
You should really see what the devtools team at Mozilla is working on. I think they already have many of those things either implemented or in progress.
- mattdesl 12y ago
  How could I find out more?
artursapek 12y ago
Your tool is nice. The idea of doing vector graphics like this in the browser is very alluring. I worked on something similar for a long time, maybe you would find it useful: https://github.com/artursapek/mondrian https://github.com/artursapek/mondrian http://mondrian.io http://mondrian.io The original idea was also to create an animation tool which could export to canvas code and/or SVG files with embedded JS. Ended up just being a generic SVG editor. I eventually couldn't keep committing the time to develop it, but it was a fun project for a long while. Really got interesting when I started thinking about algorithms for something like Pathfinder (unfinished work: http://artur.co/pathfinder.html http://artur.co/pathfinder.html) and a freehand drawing tool which outputs cubic beziers (the crayon tool in my example). Also fun was coming up with data structures for undo/redo (mine still kind of suck). Anyway, have fun with your project.

fenomas 12y ago

CSS Shapes are still on the horizon, but not far off. Blink added the intent to ship them in May [0], and Apple called them out as one of the new web standards that will be in Safari 8 [1]. There's also a polyfill, incidentally: http://blogs.adobe.com/webplatform/2014/05/12/css-shapes-polyfill/ http://blogs.adobe.com/webplatform/2014/05/12/css-shapes-pol... [0]: http://bit.ly/blinkintents http://bit.ly/blinkintents [1]: http://9to5mac.files.wordpress.com/2014/06/screenshot-2014-06-02-13-29-57.jpg http://9to5mac.files.wordpress.com/2014/06/screenshot-2014-0...

bramgg 12y ago

This looks awesome! Not really usable yet due to the lack of browser support[0] (Chrome 37+ and Safari 8 with -webkit-), but it's this kind of thing that rallies support for web standards. [0] http://caniuse.com/#feat=css-shapes http://caniuse.com/#feat=css-shapes

ivanca 12y ago

In 2011 I created a JavaScript to do exactly what CSS Shapes do: https://github.com/Ivanca/Creative-Text-Boxes https://github.com/Ivanca/Creative-Text-Boxes, it even works in IE6+. It had a domain but due to lack of interest is now gone but there is still a copy here: http://nyudvik.com/ctb/ http://nyudvik.com/ctb/ , it has a GUI tool to generate the code for any shape: https://www.youtube.com/watch?v=iZ0_wxz5WQM https://www.youtube.com/watch?v=iZ0_wxz5WQM Off-topic: I'm looking for a remote part-time job as JavaScript Developer, if anyone is interested write me an email (ivanca@gmail)

mxfh 12y ago

Since this is deep into type setting/layout territory what's the state of hyphens: auto https://developer.mozilla.org/en/docs/Web/CSS/hyphens https://developer.mozilla.org/en/docs/Web/CSS/hyphens or is it still better to rely on adding soft hypens via script? Like hyphenator.js https://code.google.com/p/hyphenator/ https://code.google.com/p/hyphenator/

Semaphor 12y ago
http://caniuse.com/#search=hyphens http://caniuse.com/#search=hyphens With no version of chrome supporting it it seems like a bad idea to rely on it.

bambax 12y ago

Wow, fantastic tool, and great examples. Thanks for sharing.

LukeB_UK 12y ago

I didn't know that CSS shapes was a thing. That's really cool.

TophWells 12y ago
Me neither. Are they new?
deleted 12y ago
[deleted]

scoot 12y ago

Just curious, why can't the shape be generated from the outline of the image alpha with an offset, rather than having to be generated by hand?

fenomas 12y ago
They can: http://dev.w3.org/csswg/css-shapes/#shapes-from-image http://dev.w3.org/csswg/css-shapes/#shapes-from-image But note that this is a general spec for adding shapes to HTML elements. Wrapping text around images is just one of many possible use cases.

zeroonetwothree 12y ago

This is cool, but reading text with oddly-shaped images inside of it is pretty annoying. I hope CSS shapes aren't going to be used excessively.

thathonkey 12y ago
Yeah, I agree it would be annoying for long-form content (which is why magazines/newspapers never really adopted layouts like that in earnest) even if only because we've learned to read and therefore favor rectangular blocks of text. It's still a neat effect for creating little asides, blurbs, etc. though
jdjb 12y ago
Not to mention this is exactly the sort of "pixel perfect" design that we should be discouraging, not encouraging. It doesn't seem like this technique translates well to a flexible design philosophy by letting the browser choose the best way to reflow text around elements (based on the amount of available screen real estate).
- untog 12y ago
  I don't think that's true. Looking at the video it seems like an ideal mix of both worlds - non-standard shaped images will be floated with CSS, and text will reflow and rewrap according to available size. Sounds pretty flexible to me.
- lowboy 12y ago
  But that's exactly what this is doing: defining a better bounding area for an element so that the browser can flow text around it according to the available screen real estate. Defining the length of each line of text is a backward-facing solution and should be discouraged.
drunken_thor 12y ago
That form of content has been used for ages in magazines. There is no reason why it can't work for the same type of content on the web.

juanplusjuan 12y ago

Cool! Can't wait for it to appear in a standard CMS (e.g. WordPress, SquareSpace, Weebly). Seems like it's the perfect addition for professional editors a la Scoop (http://open.blogs.nytimes.com/2014/06/17/scoop-a-glimpse-into-the-nytimes-cms/ http://open.blogs.nytimes.com/2014/06/17/scoop-a-glimpse-int...)?

psteinweber 12y ago

Side note: The use of the GIFs on the page really cuts to the chase and shows immediately what everything is about. I only watch explanatory videos if I'm really interested in a product, therefore appreciate this presentation.