Back to overview

HTML5 Showcase

The demos below show how your browser supports the capabilities of web standards such as HTML5, CSS3, and JavaScript.

Typography

Size

Color

Leading

Tracking

Transparency

Rotation

Shadow

Try it out: Replace the word “Hello” with your own text. Use the drop-down menu to change the font. Adjust the sliders to change text attributes. Even add a drop shadow to your text.

About this demo: Display stylized fonts on your website without adding image files. CSS3 and SVG (Scalable Vector Graphics) allow you to embed vector-based fonts that scale beautifully.

Hello.

50Years of

Galerie d’art
560 Powell Street,
San Francisco,
CA 94105

Graphic
Design

About this demo:

Surprisingly, the type in this demo doesn’t use any images. With CSS3, you can use custom fonts and manipulate HTML elements in ways that don’t require images.

Going Over Vertical

Pipedream

photo by Bryce Kanights

Frontside trajectory at The Hook, Tony Farmer past vert.

The easily found terrain, the local skatepark or the curb down the block just doesn’t cut it for some skaters. It might take a sizable search, a grueling hike and a steady board, but the uniquely skateable landscape truly delivers.

About this demo:

Everything in this demo is pure HTML. Using CSS3, we’ve embedded the necessary fonts and styled the copy to produce a magazine-style layout.

This demo is not yet supported by your browser.

To view this CSS3 effect, you’ll need Safari 5 on Mac OS X or Windows, Safari on iOS, or the latest WebKit Nightly Build.

VM

View Magazine | Fall Issue

About this demo:

The text in this demo uses a background image that is clipped to its outline. All of the text is HTML, so it’s searchable and accessible.

Visit the Safari Dev Center to learn more and download sample code