WORKING Voyager Sickbay LCARS in HTML/CSS (no images or JS effects!)

[deus]

Using one of Robert's elegant Voyager Sickbay display replicas as a guide, I created a functional LCARS with rollover and click support using only some creative CSS. Cufon (a lightweight JS script) is used to replace the default pagefonts with the proper LCARS font.

Preview (remember, there are no images! Just CSS. And the buttons work!):



To download the working panel, click here.
Simply download the file, unzip and open the 'LCARS1.htm' file in any browser that supports CSS3 (i.e. Firefox 4+, IE9, Chrome).

If someone has a server that they'd be willing to upload this to, I would appreciate it! I'm considering doing a video tutorial to show anyone who is interested how to do this exact same thing using little or no images. If anyone is interested, I'll do it :)

Non-flash button sounds coming soon.

[sheldon]

wow that impressive, I really admire those colors as well.

[deus]

wow that impressive, I really admire those colors as well.

Thanks, see here: http://www.lcarsc.com/showthread.php...ckbay-Displays

[Kmpr´rak]

Nice idea and cool work on this!

[deus]

Thanks! I'm working on a huge NCC1701-D MSD at the moment... I've made some tweaks to my system of doing this and I'm getting pretty fast!

Sneak peek...(remember, there is not even one image in this display!):

[deif]

looks great. deus. like to see you're developing and revealing us your creative skills. keep it up!

[Kmpr´rak]

Wow, another pearl! Thanks for posting. And sheldon, congratulations to your bronze star!

[deus]

Wow, another pearl! Thanks for posting.

Thanks for the compliments :)


Here's the most updated sneak peek... I repeat -- there is not a single pixel of an image in this file! If anyone has a server that I they would be willing to upload the html/css to, it's very small and I'd appreciate it!




This is a portion of the MSD from the Enterprise-D, bottom-right-hand section. I intend to make the whole MSD and integrate this panel.

[deus]

In case you are wondering how accurate this is, here's the original I'm working from.

[Library Computer]

Very impressive!