Live data from Hacker News

Show HN: Cyberpunk web design made easy, really easy

augmented-ui.com

51–60 of 112 posts

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

#52

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.

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…

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.

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

#55
post #11

Earlier quoted context omitted.

Nice work. 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.

Fixed! Thank you very much!

Is it possible to have multiple clips on single side of border ?

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

#56

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 fantastic. Thank you for sharing and teaching me something I didn't know you could do with CSS.

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

#57
post #55

Earlier quoted context omitted.

Fixed! Thank you very much!

Is it possible to have multiple clips on single side of border ?

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!

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

#58

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…

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.

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

#59
post #32

Earlier quoted context omitted.

> 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 w…

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.

Post reply on HN