Home › Forums › CSS › Html/css futuristic interface › Reply To: Html/css futuristic interface
HelpfulTrafficHi, 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!