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

61–70 of 112 posts

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

#61

Post by _squared_ »

James0x57 wrote: post #48
_squared_ wrote: post #41

This is really cool, great job! 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.

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 ^__^ I bookmarked it, will keep an eye on it! Thank you!!

Hehe, thanks.

I don't think I'll change much things but augmented-ui styles on some elements here and there should give the UI a nice facelift.

I'll make sure to credit you for that really cool package.

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

#62

Post by johnsnowtho »

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.

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

#63

Post by _squared_ »

theandrewbailey wrote: post #43
James0x57 wrote: post #26

Earlier quoted context omitted.

Ohh you give me too much credit. I'm not much of a designer. That's all the generic font-family: sans-serif; lol

Try this font: https://www.theleagueofmoveabletype.com/orbitron

[deleted]

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

#64

Post by Hitton »

James0x57 wrote: post #26
fimdomeio wrote: post #25

Love it although my cyberpunk distopia dreams do not include Arial/Helvetica, not even in the closing credits. :)

Ohh you give me too much credit. I'm not much of a designer. That's all the generic font-family: sans-serif; lol

>I'm not much of a designer.

You are too humble. I was quite impressed by the site's design.

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

#65

Post by alltalk10000 »

_squared_ wrote: post #61
James0x57 wrote: post #48

Earlier quoted context omitted.

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 ^__^ I bookmarked it, will keep an eye on it! Thank you!!

Hehe, thanks. I don't think I'll change much things but augmented-ui styles on some elements here and there should give the UI a nice facelift. I'll make sure to credit you for that really cool package.

you two literally made my day and my entire week. like i became legit happy when i saw both of your UIs. have a great one :)

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

#66

Post by James0x57 »

hiccuphippo wrote: post #58
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…

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.

Border image property with svg was one of the first approaches I tried and tried. It got about half way to about half the options and required more setup than just a single CSS file.

I got slightly further to what I wanted with border-mask, but still fell really far short.

Some of the biggest limits on both of those is: 1) the size definitions is only 4 numbers so same-edge corners share a dimension (reasonable but very limiting) 2) changing the color of the border required more effort than setting a css property 3) doing more than using a color was a no-go without hands-on svg work and dom insertion required. 4) applying it to a larger element meant the border got wider. You'd have to have separate svg parts for each width built in, which sucks.

It took almost a week before I realized I could do everything I wanted by using clip-path. As soon as I did though, I went all in. Clip path was the most work up front but resulted in the most possible options, the easiest setup, and the easiest general use. Borders and the inset are full-featured CSS backgrounds that support practically anything, the augs along the edge could have different positions with simple css properties, it scaled to any element without changing the border width or inset distance, and it all worked out of the box with a single CSS file added to your project.

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

#67

Post by James0x57 »

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.

I land on css-tricks constantly. That's loaded with neat ideas.

For me, learning is always easiest when I'm learning what I need right now Soo my personal suggestion would be: just keep making things and don't let what you already know how to do be a limit for you.

Can't-do almost doesn't exist.

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

#69

Post by PhasmaFelis »

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.

This is a great look, regardless.

Post reply on HN