Back to overview
Best Viewed: Safari on iOS, Mac OS X, Windows
You can use CSS to improve your web pages in a number of ways. For example, you can reduce the number of remote resource requests and the overall size of your web page by using CSS to draw styled text, borders, reflections, and gradients. And, when you use CSS web fonts instead of images to display text in non-standard fonts, your text is automatically selectable, scalable, accessible to screen readers, and indexable by search engines. Using CSS instead of images to create advanced effects can minimize memory footprint, reduce overall download time, and improve accessibility.
In this example:
- A custom font is displayed with the
- The frame is drawn with a single image and
- The glass overlay is drawn with
-webkit-gradient, then masked with HTML5
Viewing this demo using a browser other than the latest version of Safari may not provide you with the experience this demo was designed to showcase.
To ensure the best experience with this demo, simply download Safari. It’s free for Mac and PC and only takes a few minutes to install.Close