Normally making designs like this on the web is really tedious and a bit challenging. You'd have to do things like add a new element to the dom, rotate it 45deg, position it perfectly, draw just one border and make the background match what's outside the box to cover up the square border underneath the main element. (and that's just one corner of one element)
All you have to do now (after including the CSS file (no js or images, etc)) is this: <button augmented-ui="bl-clip exe">...
From there, there's a bunch of options that are just CSS. (and there are several other options, not just a simple corner clip!) You can set the size of the clip, change the border on the element to anything, including images and gradients (which is nearly impossible when done the traditional way). You can give it a background inset a distance from the border, leaving a transparent gap (so it'll work over any background at all) and much more!
I made all this possible with the polygon feature of clip-path so full-support reaches over 91% of global web users. Check out the CSS behind it all here if you want to see CSS being used as a programming language: https://unpkg.com/augmented-ui/augmented.css
This is really cool! I am actually more of a backend engineer though, and I use dashboard templates like you would find with bootstrap and then just tweak the template a bit to accept data from my backend. Are there any dashboards/consoles/portals/anything templates written with this augmented-ui that someone could just take and tweak what data populates it?
There are 8 positions, top-left, top, top-right, right, bottom-right, and so on.
Each position can have an aug equipped so the left side could have 3.
If you mean like stacked, I suppose you could add extra dom elements inside and augment each layer as you wish to.
There isn't a way built in to put multiple different augs in a given position/slot.
If you have anything even as crude as an MS Paint mockup so I can better see what you mean, I'd be happy to take a look and consider it or let you know if it's possible as-is!
Great work! One bug I noticed is that text runs out of the panels as seen on your page. I suggest making them overflow: auto to make it scroll when necessary, also with the required padding/margin to keep everything tidy within the parameters so it's not kissing the edge of the panel if the characters happen to line up perfectly to fit the width of the panel.
I'll work on it. The site was secondary to the project and I cut a lot of corners making it as fast as I could, putting all the real effort and focus in the project itself
Sure. Each aug is a clip-path partial. That is, a series of points meant to be put inside a clip-path: polygon(...here...); stored in custom properties.
All augs, by position, store their partial in the same internal variable. (--aug-_TlPath and --aug-_BPath for example).
So <div augmented-ui="tl-clip"> would store in the --aug-_TlPath a partial polygon path that draws the simple clip shape on the top left corner. Other augs in the tl position would do the exact same.
Then, to actually perform the clip, you use an executable option (exe for simplicity) like so: <div augmented-ui="tl-clip exe">
That executable option creates a clip-path: polygon(var(--aug-_TlPath), ...); on the element which combines all the partial paths into a single final path. They're applied clockwise from tl on.
Each partial is packed with calc() for every point, math based on the size options available for the position/aug, and sets up a lot of other internals. (like corners leave behind a variable for where they start/end so augs on the edge can find the mid point and center itself between the corners)
These vars are all applied to the same one element so even though the vars are set up in separate rules, they all have visibility with each other. With appropriate defaults in the custom properties, eg var(--aug-_TlPath, 0 0) this enables a pick-and-choose sort of plugin system for each partial.
In total there are 3 clip paths created. One for the element itself, one for the inside edge of the border (that loops back around and outside the element, creating a frame), and one for the inset.
Each aug in each position is responsible for providing all 3 paths. Each layer inward also degrades or compounds its size based on border width and inset distance respectively so a constant border and gap width are drawn the whole way around.
...That's pretty much it.
Oh and the automatic elliptical border radius fallback for pre-chromium Edge and iOS < 11 does the exact same thing with corner aug data but instead of making a clip-path, it makes a border-radius rule.
Are there any resources or articles you'd recommend to get a more in-depth view of CSS? I'm a frontend developer but I always struggle with CSS beyond the basics.
Understanding how you you created this is very enlightening.
I land on css-tricks constantly. That's loaded with neat ideas.
For me, learning is always easiest when I'm learning what I need right now Soo my personal suggestion would be: just keep making things and don't let what you already know how to do be a limit for you.
I started getting ready to write a response saying, no, why the hell would you clip and make shapes in the DOM and not regular CSS, till I finished reading the rest of your post.
Great job on the animation, it really highlights how cool your augmentation system is. I have no doubt this will see a lot of use.
Would it be better to use the css border-image property? If you don't want to use images I guess you could embed svg in it. That should give you around 98% of all browser users according to caniuse.
Border image property with svg was one of the first approaches I tried and tried. It got about half way to about half the options and required more setup than just a single CSS file.
I got slightly further to what I wanted with border-mask, but still fell really far short.
Some of the biggest limits on both of those is: 1) the size definitions is only 4 numbers so same-edge corners share a dimension (reasonable but very limiting) 2) changing the color of the border required more effort than setting a css property 3) doing more than using a color was a no-go without hands-on svg work and dom insertion required. 4) applying it to a larger element meant the border got wider. You'd have to have separate svg parts for each width built in, which sucks.
It took almost a week before I realized I could do everything I wanted by using clip-path. As soon as I did though, I went all in. Clip path was the most work up front but resulted in the most possible options, the easiest setup, and the easiest general use. Borders and the inset are full-featured CSS backgrounds that support practically anything, the augs along the edge could have different positions with simple css properties, it scaled to any element without changing the border width or inset distance, and it all worked out of the box with a single CSS file added to your project.
Did the Deus Ex series influence your design choices? I remember after playing Human Revolution, I was doing graphic design for a fitness supplement company, and I went on a sort of dystopian/tech UI tangent that fit really well with the product line. It was fun.
That text effect is super cool, as is the whole project, nice work!
I started trying to figure out different ways to do this because I was watching a 12 hour playthrough of Deus Ex Human Revolution on youtube. Took about 5 days until I realized I could do everything I wanted with clip-path.
Really hope we get a sequel to Mankind Divided some August, too many loose ends!
Just in case you’re not aware (maybe you are making a joke?) the series consists of six games: Deus Ex (2000), Deus Ex: Invisible War (2003), Deus Ex: Human Revolution (2011), Deus Ex: The Fall (2013), Deus Ex Go (2016) and Deus Ex: Mankind Divided (2016). The original from 2000 is one of the most beloved games in the genre.
The original games, how well loved they might be, are kinda awful to play on modern day standards though. I guess they are referencing how Mankind Divided ended kind of abruptly and deserves an sequel.
Not in my opinion. I played through the original again last year, and enjoyed it just as much as I always have. The relatively poor graphics by today's standards don't bother me.
People still love Casablanca. Nobody cares that it's in black and white.
Yeah, I guess jokes don't always work in this format on the Internet.
If I remember correctly, Invisible War was so bad that the entire team was fired. I've played the original several times. It's a classic. I wouldn't regard any of the supposed sequels as sequels. I played IW once. It was hot garbage.
I haven't tried HR and beyond, but from gameplay videos it doesn't look as though they've captured the spirit of the original.
It's nothing like Invisible War either. I would consider Invisible War a bad sequel, while I would consider Human Revolution a spiritual succesor. Neither game is like the original but Human Revolution/Mankind Divided are great games in their own right (ignoring that Mankind Divided was cut short)
Human Revolution was my favourite, after the original. In terms of replayability, I come back to it more often. The atmosphere, particularly in Hengsha, were quite immersive. I would generally recommend it.
Invisible War - some say nowadays it got more flack than it quite deserves, but I absolutely cannot make myself go back to it :<
Mankind Divided - I'm halfway through, and quite enjoy it. I do understand that most people find it unfinished and short though. It does have a different vibe to original.
Me too, the story was building so well and the pieces of the puzzle were being placed down. Then they threw half the pieces away and the game ended! I have read there might be a sequel after their current project, I am hopeful.
Cool, I tried to make a UI some time ago, with interlocked boxes that had depth [0], and it was a real hassle to get everything lined up properly with the borders. So much I didn't bother getting it done as it was only for a fun workshop. Could this be done with this css?
wow that is remarkably similar to the ui I sketched out of an idea I had a couple years ago.
But yep, that would be fairly easy to do with augmented-ui. The only "tricks" would be the parts that extend out would just be layered ontop of the orange clip instead of being a child element. The orange clip wouldn't actually need to have a hole. Where there is a hole visible though, you can just draw a piece with the same color as the background so it looks like a hole.
I use viewport units (vh, vw) in my CSS to ensure everything scales to different screens/resolutions; so far augmented-ui seems to handle that very well.
oh my gosh man this is so cool I legit almost teared up a bit. It looks awesome even without it but I cannot wait to see where you land using augmented-ui.
This is the first time I've got to see someone use it for a big project ^__^
I find it fascinating that the "spliced" screen animation, an phenomenon unique to CRT screens, still persists as a cyberpunk trope. No doubt it's because cyberpunk imagery has its origins in the 70s/80s when all we had is analog screens. I think it will continue to be one of those weird anachronisms future generations won't know why it exists unless you do some deep digging (or were around for its origins).
It's funny watching the flamewars on r/cyberpunk about what does and doesn't count as "cyberpunk." Some people hate it when real-world images pop up there. They can't get their heads around the fact that cyberpunk isn't strictly sci-fi anymore; we've been living in it for at least 20 years.
Yup this is a nice take - sometimes these libraries can be a bit cumbersome, but the syntax is simple - similar to bootstrap.
I think the big thing is the design - this looks straight out of Mass Effect or something - really clean, and feels fully transformed - like you're not even looking at the web we already see everyday.
If I do anything futuristic based I'll definitely be using this. Good job.
This is really cool! It's interesting that you call it "cyberpunk," though. With a few exceptions, it seems like generic sci-fi to me; it wouldn't be out of place on Star Trek, I think.
If you asked me to imagine "cyberpunk web design," I would probably say HTML 1.0 with green-on-black text. Cyberpunk as a visual aesthetic is usually rooted in the dark future as seen from the '80s, all CRTs and chunky cables and Japan Inc.
mmmmm yeahhh, not gonna argue that, I think you're probably right on all points. haha
The reason I made it though is because of my love of the Cyberpunk genre specifically. Deus Ex, Tron Legacy, Cyberpunk 2077, and so many more shows, games, and movies are where I draw inspiration from.
They always feature this style as if it was easy to do, just wanted to give back and help bring that to reality.
Thank you!
edit: also, augmentations/augs by that name, I think, are specifically cyberpunk. Augs as an idea fits very well as an analogy for both how this works under the hood and how it's used on the surface. Soooo it's more specifically Cyberpunk than generic sci-fi in that regard, imo. :)
It looks really cool, but it spikes my browser's (Firefox and Chromium on Ubuntu 19.04) CPU usage whenever it's active. Not even scrolling, just visible.
On a side note, I've been forced to install The Great Suspender[0] extension because so many non-active tabs will simply take over CPU usage in Chrome.
When a single tab spikes my laptop's power usage from 14.9W to 35W+ there is something terribly wrong with the design.
When a single tab spikes my laptop's power usage from 14.9W to 35W+ there is something terribly wrong with the design.
The animations are using WebAssembly which runs directly on CPU and results in tons of dom updates every frame. The biggest current actual flaw in it is that it doesn't shut off or pause when it's out of frame so all js animations on that page run constantly. It's on the todo list
Thank you very much for checking it out and providing feedback!
If you mean the main site, that uses an animation library that uses WebAssembly. It's faster than plain js but does lean on cpu directly. Lots and lots of dom updates to run the animations too, which is expensive.
Other pages like the test page and docs page don't have animations and probably don't tax your cpu very much. Buuut I'd be curious to hear if your system/browser disagrees on those pages too :)
- The looping animations are from a JS animation library that I wrote so that means lots of dom updates every animation frame, which is expensive. Also, the animation lib uses WebAssembly which runs directly on CPU. Aaand they don't shut off or pause when they're out of frame (haven't got to that yet)
- Awesome, thank you! Hoped it would be helpful :)
111 comments
[ 251 ms ] story [ 734 ms ] threadFor example: https://i.imgur.com/yY66cdv.png and https://i.imgur.com/A2Pyeur.png on Cyberpunk 2077's website this is roughly how they do it.
I set out to fix that with augmented-ui.
All you have to do now (after including the CSS file (no js or images, etc)) is this: <button augmented-ui="bl-clip exe">...
From there, there's a bunch of options that are just CSS. (and there are several other options, not just a simple corner clip!) You can set the size of the clip, change the border on the element to anything, including images and gradients (which is nearly impossible when done the traditional way). You can give it a background inset a distance from the border, leaving a transparent gap (so it'll work over any background at all) and much more!
Here are the docs on the border: http://augmented-ui.com/docs/#--aug-border-bg (click show in codepen if you want to play with it, jsfiddle's post feature is currently down)
I made all this possible with the polygon feature of clip-path so full-support reaches over 91% of global web users. Check out the CSS behind it all here if you want to see CSS being used as a programming language: https://unpkg.com/augmented-ui/augmented.css
Aaaand this is all free to use in any project! Check it out on NPM, I'd really really love to see what you make with it: https://www.npmjs.com/package/augmented-ui
Happy to answer questions! <3 Get augmented! ;)
It's only been 10 days since v1.0.0 released so I'm sure nobody's done that yet. But yeah, great idea, it could make them some money, hope it happens!
I guess there is a mistake in documentation on website. When I hover on --aug-tr, --aug-bl
The description says, Top-left, Bottom-right clip augs. I It should be Top-right Bottom-left.
Each position can have an aug equipped so the left side could have 3.
If you mean like stacked, I suppose you could add extra dom elements inside and augment each layer as you wish to.
There isn't a way built in to put multiple different augs in a given position/slot.
If you have anything even as crude as an MS Paint mockup so I can better see what you mean, I'd be happy to take a look and consider it or let you know if it's possible as-is!
https://github.com/dsalaj/awesome-quirks/
Could you explain the process behind the CSS, how it works?
All augs, by position, store their partial in the same internal variable. (--aug-_TlPath and --aug-_BPath for example).
So <div augmented-ui="tl-clip"> would store in the --aug-_TlPath a partial polygon path that draws the simple clip shape on the top left corner. Other augs in the tl position would do the exact same.
Then, to actually perform the clip, you use an executable option (exe for simplicity) like so: <div augmented-ui="tl-clip exe">
That executable option creates a clip-path: polygon(var(--aug-_TlPath), ...); on the element which combines all the partial paths into a single final path. They're applied clockwise from tl on.
Each partial is packed with calc() for every point, math based on the size options available for the position/aug, and sets up a lot of other internals. (like corners leave behind a variable for where they start/end so augs on the edge can find the mid point and center itself between the corners)
These vars are all applied to the same one element so even though the vars are set up in separate rules, they all have visibility with each other. With appropriate defaults in the custom properties, eg var(--aug-_TlPath, 0 0) this enables a pick-and-choose sort of plugin system for each partial.
In total there are 3 clip paths created. One for the element itself, one for the inside edge of the border (that loops back around and outside the element, creating a frame), and one for the inset.
Each aug in each position is responsible for providing all 3 paths. Each layer inward also degrades or compounds its size based on border width and inset distance respectively so a constant border and gap width are drawn the whole way around.
...That's pretty much it.
Oh and the automatic elliptical border radius fallback for pre-chromium Edge and iOS < 11 does the exact same thing with corner aug data but instead of making a clip-path, it makes a border-radius rule.
happy to clarify any point you're interested in!
Understanding how you you created this is very enlightening.
For me, learning is always easiest when I'm learning what I need right now Soo my personal suggestion would be: just keep making things and don't let what you already know how to do be a limit for you.
Can't-do almost doesn't exist.
Great job on the animation, it really highlights how cool your augmentation system is. I have no doubt this will see a lot of use.
I got slightly further to what I wanted with border-mask, but still fell really far short.
Some of the biggest limits on both of those is: 1) the size definitions is only 4 numbers so same-edge corners share a dimension (reasonable but very limiting) 2) changing the color of the border required more effort than setting a css property 3) doing more than using a color was a no-go without hands-on svg work and dom insertion required. 4) applying it to a larger element meant the border got wider. You'd have to have separate svg parts for each width built in, which sucks.
It took almost a week before I realized I could do everything I wanted by using clip-path. As soon as I did though, I went all in. Clip path was the most work up front but resulted in the most possible options, the easiest setup, and the easiest general use. Borders and the inset are full-featured CSS backgrounds that support practically anything, the augs along the edge could have different positions with simple css properties, it scaled to any element without changing the border width or inset distance, and it all worked out of the box with a single CSS file added to your project.
That text effect is super cool, as is the whole project, nice work!
Really hope we get a sequel to Mankind Divided some August, too many loose ends!
Thank you! :D
People still love Casablanca. Nobody cares that it's in black and white.
If I remember correctly, Invisible War was so bad that the entire team was fired. I've played the original several times. It's a classic. I wouldn't regard any of the supposed sequels as sequels. I played IW once. It was hot garbage.
I haven't tried HR and beyond, but from gameplay videos it doesn't look as though they've captured the spirit of the original.
Invisible War - some say nowadays it got more flack than it quite deserves, but I absolutely cannot make myself go back to it :<
Mankind Divided - I'm halfway through, and quite enjoy it. I do understand that most people find it unfinished and short though. It does have a different vibe to original.
https://wegotthiscovered.com/gaming/deus-mankind-divided-can...
(skip to the bottom) https://www.vg247.com/2019/07/29/deus-ex-mankind-divided-seq...
I can imagine it actually being better with a smaller studio.
The people working on the new Baldur’s Gate. They’re a small studio. It wouldn’t work with EA or whoever.
https://www.youtube.com/watch?v=g_CBF318nBY
You are too humble. I was quite impressed by the site's design.
[0]: https://i.imgur.com/oA6Cslw.png
But yep, that would be fairly easy to do with augmented-ui. The only "tricks" would be the parts that extend out would just be layered ontop of the orange clip instead of being a child element. The orange clip wouldn't actually need to have a hole. Where there is a hole visible though, you can just draw a piece with the same color as the background so it looks like a hole.
Here you go: https://jsfiddle.net/3tx4ve59/
I'm thinking about integrating this in edex-ui ( https://github.com/GitSquared/edex-ui ), here's how it looks like so far, redesigning pop-ups: https://imgur.com/a/4oABPAT
I use viewport units (vh, vw) in my CSS to ensure everything scales to different screens/resolutions; so far augmented-ui seems to handle that very well.
This is the first time I've got to see someone use it for a big project ^__^
I bookmarked it, will keep an eye on it!
Thank you!!
I don't think I'll change much things but augmented-ui styles on some elements here and there should give the UI a nice facelift.
I'll make sure to credit you for that really cool package.
It's funny watching the flamewars on r/cyberpunk about what does and doesn't count as "cyberpunk." Some people hate it when real-world images pop up there. They can't get their heads around the fact that cyberpunk isn't strictly sci-fi anymore; we've been living in it for at least 20 years.
Although, this cyberpunk at least, tends to stick to TUI's ;)
I think the big thing is the design - this looks straight out of Mass Effect or something - really clean, and feels fully transformed - like you're not even looking at the web we already see everyday.
If I do anything futuristic based I'll definitely be using this. Good job.
If you asked me to imagine "cyberpunk web design," I would probably say HTML 1.0 with green-on-black text. Cyberpunk as a visual aesthetic is usually rooted in the dark future as seen from the '80s, all CRTs and chunky cables and Japan Inc.
This is a great look, regardless.
The reason I made it though is because of my love of the Cyberpunk genre specifically. Deus Ex, Tron Legacy, Cyberpunk 2077, and so many more shows, games, and movies are where I draw inspiration from.
They always feature this style as if it was easy to do, just wanted to give back and help bring that to reality.
Thank you!
edit: also, augmentations/augs by that name, I think, are specifically cyberpunk. Augs as an idea fits very well as an analogy for both how this works under the hood and how it's used on the surface. Soooo it's more specifically Cyberpunk than generic sci-fi in that regard, imo. :)
Reiterating though, this is really cool!
When a single tab spikes my laptop's power usage from 14.9W to 35W+ there is something terribly wrong with the design.
[0] https://chrome.google.com/webstore/detail/the-great-suspende...
If you mean the main site, that uses an animation library that uses WebAssembly. It's faster than plain js but does lean on cpu directly. Lots and lots of dom updates to run the animations too, which is expensive.
Other pages like the test page and docs page don't have animations and probably don't tax your cpu very much. Buuut I'd be curious to hear if your system/browser disagrees on those pages too :)
- very high resource usage (animation meter and my system monitor confirms high CPU usage)
- hovering over examples lines of code and displaying a description is very cool
- The looping animations are from a JS animation library that I wrote so that means lots of dom updates every animation frame, which is expensive. Also, the animation lib uses WebAssembly which runs directly on CPU. Aaand they don't shut off or pause when they're out of frame (haven't got to that yet)
- Awesome, thank you! Hoped it would be helpful :)