The World Wide Web's decades-long tyranny of box design is finally coming to an end. A new set of CSS features – including the shape() function, and the border-shape and corner-shape properties – offers web designers and their AI agents a broader palette for laying out content in a more fluid manner.
When the World Wide Web Consortium (W3C) published its first standard for web page layout in 1996, web sites emulated the grid-defined layouts of academic papers, newspapers, and magazines.
At the time, graphics drivers, and browser rendering engines were all in a relatively primitive state. Developers were also trying to grapple with a new medium and generally found that flowing text within a defined space was much easier when the geometric coordinates of that space were kept as simple as possible.
But now print is basically dead, webdevs are savvier (and if not, AI is happy to help), and Lord knows GPUs are more powerful. So there's no reason today why a web page has to be square, daddy-o.
In Edwin A. Abbott's 1884 proto-Sci-Fi classic Flatland: A Romance of Many Dimensions, the protagonist who lives in flat two-dimensional space is abruptly exposed to the dizzying world of three dimensions, much to his astonishment.
Web developers may experience similar emotions when they first use these new CSS constructs.
In their original forms, HTML and CSS could draw only horizontal or vertical lines or borders on a Web page. Fancier layouts required proprietary plug-ins, such as Java Applets, Macromedia/Adobe Flash, or some tedious JavaScript hacks.
SVG first broke the boxiness of the web, giving the developers the ability to put curves, squiggly lines, logos or any other wild-ass shape desired by using a series of numerical coordinates to describe the shape (it's tedious work, though image-to-SVG converters help). SVG was limited to a canvas placed on a Web page, however. CSS ruled the layout of the page itself.
The first attempt at bridging the two worlds was path(), which allowed SVG to be embedded directly within CSS. The path() function had some limitations – it wasn't responsive to changing web page sizes and it didn't understand variables or CSS units of measurement. Developers had to define all specs in pixels and that was that.
The shape() function properly introduced the Web to richer design. A shape() is a set of geometric coordinates of a desired shape or trajectory. Unlike path()'s reliance on SVG, it is built on responsive CSS syntax. When combined with the existing clip-path property, shape() has been used to create ticket stubs, chat bubbles, and other assorted page flotsam.
The latest CSS property, border-shape, completes the work by applying CSS-native coordinates defined in shape() to the web page borders themselves. Define the coordinates with shape(), embed it in a border-shape property, and the boundaries are staked out on the page itself. The boundaries are laid out early in the rendering process, rather than clipped in near the end of the rendering.
"In other words, putting borders on CSS shapes will become child's play!" noted self-described CSS hacker Temani Afif, in a tutorial on the CSS-Tricks site.
This new property opens a range of design possibilities heretofore too complicated to contemplate – at least within a 40-hour webdev workweek.
Afif offers a number of demonstrations in his tutorials: not only can you carve up a Web page any way you see fit, but you can also put borders within borders. Fill in the space between the outer shape and the inner shape to make a cut-out. Shape an open heart inside a square box, for instance, using nothing but CSS.
Either the outside border or the internal shape can be animated, allowing the outside border to change shape as the mouse goes over it, or the inside border to be filled with an image or another design. A shape can enlarge or shrink when the mouse hovers over it, or text can be highlighted with little squiggly lines.
If hand-crafting the contents of shape() is not your jam, a companion property called corner-shape offers a number of pre-defined fancy border patterns. Most are variations of the standard box, including boxes with rounded edges, beveled edges, notches, scoops, and one called a "squircle."
According to the caniuse.com site, all major browsers now support shape(), while border-shape and corner-shape are still being implemented and considered experimental (though the current releases of Chrome, Edge, and Opera support the standard).
Now, it's up to developers to build a more fluid web.
(Score: 5, Insightful) by Thexalon on Thursday October 01, @04:07PM (9 children)
Rectangles are and should continue to be dominant in web design for 2 reasons:
1. Screens are rectangular. Ergo, subsets of screens that are easy to use are also rectangular.
2. Humans read things most easily in rectangles. That's true even when you account for languages that use orientations other than left-to-right. Nobody anywhere prefers reading things in curves.
3. Print media is almost always rectangular. Ergo, anything on the web that you want to translate easily to print works best if it's rectangular.
Neither of these are new groundbreaking discoveries, they're well-known graphic design principles. But I'm sure we'll see plenty of badly artistic pages that look like they might be exciting but suck to use.
"Think of how stupid the average person is. Then realize half of 'em are stupider than that." - George Carlin
(Score: 4, Insightful) by zocalo on Thursday October 01, @04:14PM (2 children)
Given some of the abominations of UI design we're currently plagued with, I am totally not going to be holding my breath on this - they've just been handed a shiny new visual gimmick to set themselves apart from all the other sheep doing the same thing. Of *course* they are going to be using it at every opportunity until it's as reviled as the "blink" tag.
UNIX? They're not even circumcised! Savages!
(Score: 2) by namefags_are_jerks on Thursday October 01, @04:38PM
> Of *course* they are going to be using it at every opportunity
Gaze-breaking advertising, of course. Something like the product spinning around in circular paths on the screen will draw attention on account of how visually irritating it is.
(Score: 1, Insightful) by Anonymous Coward on Friday October 02, @08:25AM
So for reading our field of view is arguably more suited for portrait instead of landscape.
(Score: 5, Funny) by krishnoid on Thursday October 01, @04:50PM
Hey, I'm just happy that there's an option for badly artistic pages to layout and render *locally*, rather than loading progressively over multiple AJAX calls on a bad connection to an underprovisioned server.
There's probably even a way to have them display well on older browsers [share.gemini.google], but it seems like you have to pretty much duplicate your CSS rules in oldspeak as well. Then again, AI can likely add those in at your request.
(Score: 2) by looorg on Thursday October 01, @08:37PM (1 child)
Have you met many graphical designers? They seem obsessed with not being stuck in the box. That said yes I do agree. I would assume most things are still going to be and come in box shaped forms. But I'm sure there is always someone out there that want to be radical and not be like all the other squares (in every meaning of the word) and instead create triangular or round websites.
Also just more CSS in general. Ugh ...
It was annoying to read spiral scrolltexts in the 80s when they figured out that hey we don't have to go right to left in a box, we can use the whole screen and be all over the place. To follow a sinus or cosin curve and all that. Someone somewhere will think that is once again awesome and radical for their promo website.
(Score: 2) by driverless on Friday October 02, @07:15AM
In other words from now on the content shown by browsers can suck just as much as the surrounding browser UI, see for example the recent Firefox UI refresh.
Wonderful.
(Score: 2) by Snotnose on Thursday October 01, @11:07PM
When print media gets fancy and doesn't use rectangular 99% of the time the text is harder to read.
Being the dumbest idiot in the land and president of the US should be 2 different people.
(Score: 2) by JoeMerchant on Friday October 02, @04:01AM
> Nobody anywhere prefers reading things in curves.
Silly rabbit, text for reading is just one thing you can put on a webpage.
What about a series of portraits rendered on the outside of spheres which roll around a squiggly track? Wouldn't that enhance somebody's communication?
Hey, I know: we could bring back the BLINK tag and make the formats flip back and forth between round squiggles and triangular jagged lines... /s
🌻🌻🌻🌻✌️ [google.com]
(Score: 4, Informative) by Lester on Friday October 02, @02:08PM
Talking of graphic design.
Who the hell invented flat buttons?
It was a perfect metaphore of something pushable.
Who the hell decide that links could look like anything?
With blue, underlined text, you always knew what was clickable.
Now you have to guess what "brilliant" and "original" idea the designer had just to figure out where to click.
Graphic designers ought to be tarred and feathered.
(Score: 3, Informative) by washbear on Thursday October 01, @06:30PM
On the contrary, print is making a comeback among those of us who want to get away from endless algorithmically recommended AI generated bloated spyware-ladeb slop, especially now that search engines are effectively useless for finding reliable information.