Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Cyberpunk web design made easy, really easy

augmented-ui.com

Post reply on HN
Print view View original

1–10 of 112 posts

Re: Show HN: Cyberpunk web design made easy, really easy

#2

Post by James0x57 »

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)

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: ...

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! ;)

Re: Show HN: Cyberpunk web design made easy, really easy

#3

Post by atemerev »

James0x57 wrote: post #2

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) For example: https://i.imgur.com/yY66cdv.png and https://i…

“high tech, low effort” — brilliant!

Re: Show HN: Cyberpunk web design made easy, really easy

#4

Post by tgirod »

James0x57 wrote: post #2

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) For example: https://i.imgur.com/yY66cdv.png and https://i…

thank you so much for this. I'm currently organizing a Cyberpunk LARP, and I'm sure augmented-ui will be very useful!

Re: Show HN: Cyberpunk web design made easy, really easy

#5

Post by James0x57 »

tgirod wrote: post #4
James0x57 wrote: post #2

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) For example: https://i.imgur.com/yY66cdv.png and https://i…

thank you so much for this. I'm currently organizing a Cyberpunk LARP, and I'm sure augmented-ui will be very useful!

ahh that's so cool! Have fun! I'd love to see what you build if you make it public at all!

Re: Show HN: Cyberpunk web design made easy, really easy

#6

Post by James0x57 »

atemerev wrote: post #3
James0x57 wrote: post #2

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) For example: https://i.imgur.com/yY66cdv.png and https://i…

“high tech, low effort” — brilliant!

Thanks! ^_^

Re: Show HN: Cyberpunk web design made easy, really easy

#7

Post by bonnow »

James0x57 wrote: post #2

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) For example: https://i.imgur.com/yY66cdv.png and https://i…

Cool, I will use it to rebuild my blog's layout.

Re: Show HN: Cyberpunk web design made easy, really easy

#9

Post by scoobyyabbadoo »

James0x57 wrote: post #2

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) For example: https://i.imgur.com/yY66cdv.png and https://i…

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?
Post reply on HN