VelociraptorSystems Demo Page

Using a glass overlay effect with CSS3 and HTML5

This page is a demonstration of
CSS3 and HTML5 elements

The only images on this page are the background tile, and the picture of Saturn in the background, an image from NASA's Cassini explorer.

Different levels of text are seperated by glassy divides

These glassy divides are represented by the <div> elements with the CSS gradient background applied.

CSS 3 Effects

CSS 3 gives many effects that scale infinitely, load quickly, and are more controllable. However, older browsers do not display them. This page currently works properly in Chrome and Firefox's latest versions, and mostly work in Safari and Opera. IE barely works at all.

HTML5 includes options like the <video> tag, which enables playback in browsers faster, with less overhead, than conventional Flash embedding.

Your video will become available once it has buffered.
Download Video: WebM, Ogg, MP4

While solutions like this are still new, and are still limited in how they can be styled, they are one of the most talked about new technologies in HTML5.

Infinite Zoom

SVG Math

In addition to many types of logos and graphics, SVGs can be used to display high-quality mathematics. Via a pipeline we developed from open-source utilities, we can display high-fidelity mathematical equations that behave like text.

You could zoom in as much as you'd like, and the above equation would remain high-quality.

Modern browsers are also capable of embedding and displaying SVGs, or Scalable Vector Graphics.

Ubuntu logo

These images can be smaller than conventional images, compressed better, and have higher quality, in addition to sometimes being the way they were designed in the first place. This is a case where you can pick all three of "cheaper better faster".