Emerging Tech

Blog archive
Java rain

Is 3D the next step for agency Web pages?

Many agency Web pages currently are dark or static due to the government shutdown, but underneath those place-holding pages are, in a few cases, some revolutionary and engaging designs. And when they’re active again, they might be ready to add another dimension.

In the not so distant past, government pages were rather dull, because it was more important to accurately display the  information than to try and craft an engaging design that some browsers could not support. Anything visually appealing, much less in 3D, was practically forbidden. 

Agencies have since taken a creative, interactive path in Web design, and today, thanks to some clever Cascading Style Sheets programming and the fact that almost all browsers support HTML 5, 3D effects are fairly easy to create. 

A few of my “non-essential” fed friends who grew bored playing Grand Theft Auto V all week have been experimenting with ways to implant 3D and other visual elements into federal Web pages They showed me some of the ways that government Web pages could be improved without restricting user groups and without needing a lot of advanced coding skills.

The trick is using CSS to change the shape of content elements, thereby mimicking 3D without  fully rendering it. In the past, making a 3D model required a lot of code and serious math skills. But now 3D can be created a lot more simply. While my friends are still trying to build a working model, other people already have, as is demonstrated on a Web page that lets users manipulate a template to create 3D clouds

3D clouds

The code beneath those beautiful clouds is actually fairly slim and is mostly CSS-based with a little bit of JavaScript. Below is a partial view of what the code could look like.

3D code

For other programmers who want to try it, there is a tutorial that shows how it can be done. Companies are even offering specific tools to help make the creation of robust 3D models even easier. It's based on the CSS transformation working document, which is constantly being updated as well.

There are other lightweight ways to create some pretty amazing visual effects, too. Check out this non-interactive demo of rain falling against a window that is written completely in JavaScript. It looks like rain on a real window. And it displayed great on several tablets and a smartphone that I pointed to the page.

Adding pretty elements to government pages won't make them any more functional. Even my friends who are experimenting with the code this week know that. But you have to learn how to walk before you can fly. Now that it's possible to bring 3D effects to websites, the next stage can begin, where people figure out how to put this to good use, maybe on weather, space or environmental pages, for example. The simplicity of the creation means agencies can add a new dimension to websites.

Posted by John Breeden II on Oct 15, 2013 at 12:32 PM


  • Oversight
    President of the United States of America, Donald J. Trump, attends the 2019 Army Navy Game in Philadelphia, Pa., Dec. 14, 2019. (U.S. Army photo by Sgt. Dana Clarke)

    Trump shakes up official watchdog ranks

    The White House removed an official designated to provide oversight to the $2 trillion rescue and relief fund and nominated a raft of new appointees to handle oversight chores at multiple agencies.

  • Workforce
    coronavirus molecule (creativeneko/Shutterstock.com)

    OMB urges 'maximum telework flexibilities' for DC-area feds

    A Sunday evening memo ahead of a potentially chaotic commute urges agency heads to pivot to telework as much as possible.

Stay Connected

Sign up for our newsletter.

I agree to this site's Privacy Policy.