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.
Show HN: Cyberpunk web design made easy, really easy
31–40 of 112 posts
Re: Show HN: Cyberpunk web design made easy, really easy
#32Normally 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…
Could you explain the process behind the CSS, how it works?
Re: Show HN: Cyberpunk web design made easy, really easy
#33Earlier 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
Re: Show HN: Cyberpunk web design made easy, really easy
#34Earlier 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.
Re: Show HN: Cyberpunk web design made easy, really easy
#35Re: Show HN: Cyberpunk web design made easy, really easy
#36Normally 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?
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
#37Earlier 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.
Re: Show HN: Cyberpunk web design made easy, really easy
#38Earlier 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.
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
#39Earlier 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.
People still love Casablanca. Nobody cares that it's in black and white.
Re: Show HN: Cyberpunk web design made easy, really easy
#40Normally 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 job on the animation, it really highlights how cool your augmentation system is. I have no doubt this will see a lot of use.