Live data from Hacker News

Show HN: Cyberpunk web design made easy, really easy

augmented-ui.com

31–40 of 112 posts

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

#31

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…

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.

Ditto in firefox mobile. Parts of text not readable

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

#32

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…

> Check out the CSS behind it all here if you want to see CSS being used as a programming language

Could you explain the process behind the CSS, how it works?

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

#33

Earlier quoted context omitted.

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.

Ditto in firefox mobile. Parts of text not readable

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

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

#34

Earlier quoted context omitted.

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! Thank you! :D

I really hope we get a sequel to Deus Ex some day.

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.

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

#36
post #32

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…

> Check out the CSS behind it all here if you want to see CSS being used as a programming language Could you explain the process behind the CSS, how it works?

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

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 happy to clarify any point you're interested in!

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

#37

Earlier quoted context omitted.

I really hope we get a sequel to Deus Ex some day.

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.

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

#38

Earlier quoted context omitted.

I really hope we get a sequel to Deus Ex some day.

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.

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.

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

#39

Earlier quoted context omitted.

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.

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

#40

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…

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.

Post reply on HN