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

81–90 of 112 posts

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

#82

Post by hanniabu »

James0x57 wrote: post #33
teknopaul wrote: post #31

Earlier quoted context omitted.

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

Assuming the site was built with the library, then this seems like an issue pertaining to the project and not the website.

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

#83

Post by maaaats »

James0x57 wrote: post #44
maaaats wrote: post #30

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? [0]: https://i.imgur.com/oA6Cslw.png

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…

Really cool, thanks!

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

#85

Post by jimmychangas »

yakshaving_jgt wrote: post #21
James0x57 wrote: post #19

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.

To anyone interested, this video touches on the greater themes behind the original Deus Ex, and may inspire you to play the game :)

https://www.youtube.com/watch?v=g_CBF318nBY

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

#86

Post by James0x57 »

Litmus2336 wrote: post #84

This is hilarious, and I love it. It makes me really, really nostalgic.

hahaha awesome

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

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

#87

Post by Litmus2336 »

James0x57 wrote: post #86
Litmus2336 wrote: post #84

This is hilarious, and I love it. It makes me really, really nostalgic.

hahaha awesome 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

All you need to do is fill it with ads, then it will be really cyberpunk!

Although I heard recently that might be against NPM's TOS...

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

#88

Post by carti »

throwawaytoday5 wrote: post #59
James0x57 wrote: post #36

Earlier quoted context omitted.

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.

CSS Secrets: Better Solutions to Everyday Web Design Problems (written by Lea Verou) covers a variety of interesting techniques along these lines.

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

#89

Post by ebg13 »

Dirlewanger wrote: post #49

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

I didn't know what you were talking about until I switched browsers on a hunch. That animation doesn't work in Safari.
Post reply on HN