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
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 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.
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?
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 ^__^
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!
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.
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 :)
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. :)
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.
Looks fun, happy to see a great usage of CSS custom properties, but a little baffled and let down that it seems to use invalid HTML attributes :/
When writing HTML you can invent any custom attribute you want so long as it begins with `data-` [0], and in JavaScript there's even a special dataset interface that makes working with these custom data-* attributes simple and easy [1].
This could be improved without changing any of the design at all - just by updating it to not rely on writing invalid HTML.
I gave this a lot of thought. I used to be a stickler for valid markup. augmented-ui had a data- prefix as an option up to right before initial release.
Here are my reasons for not including it (yet):
1) data- isn't a great fit for it. It's not specifically data, it is visible, and I didn't want to clutter the dataset property for people using it with database output
2) invalid attributes are used everywhere, constantly. Even google.com uses them a few times. (this is the reason I'm not a stickler for it any more - if you get to the point where you're using js frameworks to build scalable web apps, chances are you're going to use invalid attributes in every single viewmodel file, or your coworkers will)
3) "data-" adds 5 extra characters to clutter and type on every single element and each selector in the main project css file. People who use augmented-ui are likely to use it on many many elements, and it adds up fast when you're building something big.
4) The only likely reason an invalid attribute might break is if the spec expands to use that exact same attribute. In the unlikely event that "augmented-ui" becomes a standard attribute, I will happily write the (grunt or w/e) script to patch every file in a project since this is very very easy to detect with regular expressions. (I've written large scale migration scripts and dozens of code parsers for work AND for fun)
5) I didn't want to split the userbase, especially at launch, with different options that can't be interchangeable. (interchangeability comes at a cost of exponentially large selectors in the fallback css because of Edge - the 5 layers of fallback support for Edge becomes over 30 selectors with just 2 different options) In the future I will have a dist folder that has a safely minified option at least. I may also have data- prefixed versions as a mutually exclusive option in the dist folder at that time if there is demand for it.
6) The first few commits were using class names instead of the attribute but even that was annoying to use because the class names were prefixed to avoid stepping on toes and the class list got way too cluttered. The "augmented-ui" attribute saved typing characters, looked cleaner, and felt cooler to use. (subjective, I know)
I understand and respect if you choose not to use it because of wanting valid attribute markup. Hopefully though this at least gives you perspective into my reasons and careful considerations that ultimately lead me to choose not to include it.
- 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 :)
I was making this "ad" for it over the weekend and got a pretty good laugh from it too. Especially at the "Wow!" text on the right haha: https://i.imgur.com/vbdEOXo.png
Does the augmented-ui property have to live inline on the html tag, itself? ... or is there are way to define the whole exe process within the CSS class without having to inline the augmented-ui property in the HTML?
in the CSS file and it will automatically apply the dom element attribute to whatever matches the CSS selector. The plugin needs work and optimizing and is my current priority, but the basics are there and it's functioning!
CSS custom properties don't need JavaScript to work - they're a platform feature. You can read them and interact with them from JavaScript just like any other CSS property, but just like any other CSS property it can be used 100% independently from any JS.
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.
[+] [-] James0x57|6 years ago|reply
For 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! ;)
[+] [-] hanniabu|6 years ago|reply
[+] [-] soulofmischief|6 years ago|reply
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.
[+] [-] vanderZwan|6 years ago|reply
https://github.com/dsalaj/awesome-quirks/
[+] [-] atemerev|6 years ago|reply
[+] [-] tgirod|6 years ago|reply
[+] [-] maaaats|6 years ago|reply
Could you explain the process behind the CSS, how it works?
[+] [-] t0astbread|6 years ago|reply
[+] [-] waylandsmithers|6 years ago|reply
[+] [-] hiccuphippo|6 years ago|reply
[+] [-] rtcoms|6 years ago|reply
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.
[+] [-] bonnow|6 years ago|reply
[+] [-] d6e|6 years ago|reply
[+] [-] liopleurodon|6 years ago|reply
[+] [-] scoobyyabbadoo|6 years ago|reply
[+] [-] _squared_|6 years ago|reply
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.
[+] [-] James0x57|6 years ago|reply
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!!
[+] [-] swalsh|6 years ago|reply
[+] [-] ehnto|6 years ago|reply
That text effect is super cool, as is the whole project, nice work!
[+] [-] James0x57|6 years ago|reply
Really hope we get a sequel to Mankind Divided some August, too many loose ends!
Thank you! :D
[+] [-] fimdomeio|6 years ago|reply
[+] [-] James0x57|6 years ago|reply
[+] [-] paxswill|6 years ago|reply
Reiterating though, this is really cool!
[+] [-] jtreminio|6 years ago|reply
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...
[+] [-] James0x57|6 years ago|reply
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 :)
[+] [-] PhasmaFelis|6 years ago|reply
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.
[+] [-] James0x57|6 years ago|reply
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. :)
[+] [-] Dirlewanger|6 years ago|reply
[+] [-] PhasmaFelis|6 years ago|reply
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.
[+] [-] ebg13|6 years ago|reply
[+] [-] johnsnowtho|6 years ago|reply
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.
[+] [-] err4nt|6 years ago|reply
When writing HTML you can invent any custom attribute you want so long as it begins with `data-` [0], and in JavaScript there's even a special dataset interface that makes working with these custom data-* attributes simple and easy [1].
This could be improved without changing any of the design at all - just by updating it to not rely on writing invalid HTML.
0: https://html.spec.whatwg.org/#embedding-custom-non-visible-d...
1: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement...
[+] [-] James0x57|6 years ago|reply
Here are my reasons for not including it (yet):
1) data- isn't a great fit for it. It's not specifically data, it is visible, and I didn't want to clutter the dataset property for people using it with database output
2) invalid attributes are used everywhere, constantly. Even google.com uses them a few times. (this is the reason I'm not a stickler for it any more - if you get to the point where you're using js frameworks to build scalable web apps, chances are you're going to use invalid attributes in every single viewmodel file, or your coworkers will)
3) "data-" adds 5 extra characters to clutter and type on every single element and each selector in the main project css file. People who use augmented-ui are likely to use it on many many elements, and it adds up fast when you're building something big.
4) The only likely reason an invalid attribute might break is if the spec expands to use that exact same attribute. In the unlikely event that "augmented-ui" becomes a standard attribute, I will happily write the (grunt or w/e) script to patch every file in a project since this is very very easy to detect with regular expressions. (I've written large scale migration scripts and dozens of code parsers for work AND for fun)
5) I didn't want to split the userbase, especially at launch, with different options that can't be interchangeable. (interchangeability comes at a cost of exponentially large selectors in the fallback css because of Edge - the 5 layers of fallback support for Edge becomes over 30 selectors with just 2 different options) In the future I will have a dist folder that has a safely minified option at least. I may also have data- prefixed versions as a mutually exclusive option in the dist folder at that time if there is demand for it.
6) The first few commits were using class names instead of the attribute but even that was annoying to use because the class names were prefixed to avoid stepping on toes and the class list got way too cluttered. The "augmented-ui" attribute saved typing characters, looked cleaner, and felt cooler to use. (subjective, I know)
I understand and respect if you choose not to use it because of wanting valid attribute markup. Hopefully though this at least gives you perspective into my reasons and careful considerations that ultimately lead me to choose not to include it.
[+] [-] peternicky|6 years ago|reply
- 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
[+] [-] James0x57|6 years ago|reply
- 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 :)
[+] [-] Litmus2336|6 years ago|reply
[+] [-] James0x57|6 years ago|reply
I was making this "ad" for it over the weekend and got a pretty good laugh from it too. Especially at the "Wow!" text on the right haha: https://i.imgur.com/vbdEOXo.png
[+] [-] rgovostes|6 years ago|reply
[+] [-] bkyan|6 years ago|reply
[+] [-] James0x57|6 years ago|reply
BUT
I wrote a separate plugin that does exactly what you're thinking: https://github.com/propjockey/aug-attr-spliced.js
It allows you to specify
in the CSS file and it will automatically apply the dom element attribute to whatever matches the CSS selector. The plugin needs work and optimizing and is my current priority, but the basics are there and it's functioning![+] [-] gitgud|6 years ago|reply
Also, wondering; how does this use custom css properties without using javascript?
[+] [-] err4nt|6 years ago|reply
[+] [-] cyberpunk|6 years ago|reply
Although, this cyberpunk at least, tends to stick to TUI's ;)
[+] [-] mcv|6 years ago|reply
[+] [-] tommica|6 years ago|reply
[+] [-] maaaats|6 years ago|reply
[0]: https://i.imgur.com/oA6Cslw.png
[+] [-] James0x57|6 years ago|reply
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/
[+] [-] foxhop|6 years ago|reply
[+] [-] MrLeap|6 years ago|reply
[+] [-] James0x57|6 years ago|reply