Html/css futuristic interface

[bashman]

I want to create a futuristic interface more or less as seen in the photos ( as reference).

There is a specific way to make this type of interfaces. I need you to be responsive and adaptable.

Here you have to deal with a lot of things, sounds, typewriters, animations and other elements. But let’s just say my first priority is the graphical interface.

Can you recommend any libraries, frameworks or anything that will help with this case?

I wouldn’t want to put the interface as a background, it’s unprofessional. What would you recommend, trimming the borders? and modeling several pieces of images?, will there be someplace with something similar to see?.

Please see the reference images.

https://postimg.org/gallery/38xderppy/

[Shikkediel]

You probably should’ve better bumped the old topic instead of copy pasting and creating a new one.

[HelpfulTraffic]

@Bashman,

Hi, I used to build websites like this in the early 2000s.

I quickly learned that using tables and separate IMG elements was a very bad way to design a webpage because it can result in very long load times, and a very sluggish website, especially if there’s lots of word wrapping text.

I do not know of any framework that would be useful in doing this.

But, if I were you, I’d start by designing everything in Photoshop (or your photo editor choice)… When you’re done, you will want to crop the image like this:

T = top, L = Left, R = Right, B = Bottom, TL = Top Left, etc etc.

[TL Corner] [T Repeating] [TR Corner]
[L Repeating][C Repeating][R Repeating]
[BL Corner][B Repeating][BR Corner]

You will end up with 9 separate images, which you will then want to turn into a sprite sheet so that the result is a single file rather than 9 separate files. Have fun with that. lol

Then, for the parent <DIV> you will need to set it to “position: relative;”

Inside that div, you will want sub divs (9 to be exact). You can name them as such: <div class="TL">, <div class="T"> etc etc…

These will each need the “position: absolute” property, and you’ll have to make use of these properties: “width, height, top, right, bottom, left, background-image, background-position, background-size, background-repeat” etc etc….

then, to make the sub divs appear behind the content, use “z-index: -1;”

Now, to be clear, it’s not really recommended to do this because the web nowadays is all about providing a visually clear presentation, with emphasis on semantic HTML structure. Everything I’ve just suggested goes against that goal, but if you can live with people telling you you’re a horrible person for doing this, then more power to you because the end result will be a retro 90s look that has long since been forgotten.

Now, there are probably other ways you can do what I’ve suggested without having 9 sub divs, but it’s been a long time since I’ve done this and I’m not really interested in going down that rabbit hole again (at least not now).

You can easily spend 20 hours working on this and in the end, you’ll get the result you’re looking for, but then you’ll have probably gone back and forth between Photoshop, HTML, CSS like, 4 dozen times and you’ll have a massive headache.

Maybe there’s a utility out there that lets you do this easily…. MAYBE…. but you’ll still have to do a lot of work cropping the image in photoshop.

Anyway, good luck!

[Vanderson]

I would recommend using multiple backgrounds on one main

. You could achieve all of these designs like this. :) No framework needed at all. Just make sure the corner pieces are on top, and that the sides, top, bottom and main background are in the back. (order or listing backgrounds) And make sure the corners have a decent background transparency setup so they merge with the other images.

This is 90% a photoshop job. Just need 9 images. 4 corners, 4 sides, and a central background. Have fun!

[Author]

Posts