Opera Logo with CSS

The Opera logo, rendered only with CSS, no images. Compare it with the real deal.

Opera logo with CSS across browsers

Best viewed in Firefox 3.6+, Safari 4+, Chrome 5+, [Updated 17 March 2011] and Opera 11.1+.

Aside from another shameless plea for attention, this demonstration gives me a chance to look at some CSS3 properties across browsers.

[Updated 18 March 2010] After this post started gaining some momentum on the tweets, both Håkon Wium Lie and Jan Henrik Helmers produced their own Opera 10.5-friendly versions using inset box-shadows to recreate the gradients.

Border Radius

In all the tutorials and hubbub over CSS3, elliptical border radius is one of those features that hasn’t been given enough attention. It’s syntax is easy enough: instead of using one value, two are used. First value is horizontal, second is vertical (following x & y, just like other 2-D values like background-position). Important to note is the difference between the Mozilla, Opera and Webkit values. Mozilla uses a slash, Webkit uses a space.

-moz-border-radius: 220px/235px;
-webkit-border-radius: 220px 235px;
border-radius: 220px/235px;

Regular ol' border-radius is not just a vanity property anymore. Opera 10.5 and Internet Explorer 9 both support border-radius, no vendor-prefix necessary. For these browsers, the shape will not be perfectly oval, but at least be mostly round. Note that the border-radius property should come first, as it will overwrite preceeding -webkit-border-radius properties in Webkit browsers. Opera’s own Vadim Makeyev and Petter Nilsen did a good job of looking over my shoulder to point out that Opera 10.5 support elliptical border-radius.

Lars Gunther then followed up regarding the proper ordering of properties. I had overwritten the default border-radius with the vendor-specific owns, but as Lars discusses the best practice for this scenario, border-radius should be the ultimate property.

The extra fun use-cases to consider are the Webkit and Mozilla browsers that support border-radius, but not the elliptical variety. Take for instance Camino 2.0. Given the code above, it has no property to fall back on, and will render the shape as a rectangle. So do you add yet another border-radius property?

Gradients

While Firefox lagged Webkit browsers with supporting CSS gradients, the extra time it took doing so was well worth it. Mozilla’s gradient syntax is more intuitive and easier to remember. If it’s just a simple two color gradient, the Mozilla syntax goes angle, color, color. Webkit’s implementation requires more deliberate code with its positioning and colors. 

background: #800;
background: -moz-linear-gradient(-90deg, #F88, #800);
background:   -o-linear-gradient(        #F88, #800);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#F88), to(#800));

This difference is emphasized when working with multiple colors. Take this example, from the large fill area, which has 3 additional color-stops:

background: #E71616;
background: -moz-linear-gradient(-90deg, #FE878A, #E71616 50%, #800000 80%, 
    #800000 85%, #b80304);
background:   -o-linear-gradient(        #FE878A, #E71616    , #800000 80%, 
    #800000 85%, #b80304);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#FE878A),
    color-stop(50%, #E71616), color-stop(80%, #800000), 
    color-stop(85%, #800000), to(#b80304) );

Of course, a default color should be supplied for graceful degradation. Using a text editor with proper syntax highlighting is a huge help here, making sense of all the business going on between all those parentheses and commas.

Looking at radial gradients, it’s much of the same. The Webkit values can grow cumbersome easily. Mozilla provided some sweet helper constants like cover and contain so you don’t have to worry about sizing the radii perfect to fit whatever size you’re working with.

Box Shadow

Box shadow properties are consistent between browsers. Apart from the vendor prefixes, the properties are exactly the same.

-webkit-box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
   -moz-box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
        box-shadow: 0 100px 30px hsla(0,0%,0%,.2);

Here I’m using the HSLa color value, which I’ve found to be easier to tweak when designing on the fly.

Resources

I find myself turning to the Mozilla Developer Center for reference on the new properties and values. In addition to comprehensive overviews, it also details the differences between Mozilla and other browser implementations. In fact, it was through the MDC that I found the Safari Reference Library. Googling “mdc” with the property in question will get you straight there, so you can avoid the multitude of zombie CSS blogs.

PROTIP: when Googling for CSS3 values and properties, be sure to leave off the initial hyphen. “-moz-linear-gradient” will be interpreted as NOT moz-linear-gradient thus yielding no results.

Also useful is the Western Civilization CSS3 Sandbox, which has tools for trying out gradients, text shadows, box shadows, text stroke, and transforms. Especially helpful is the ability to change between Webkit and Mozilla syntax.

Possible practical reason for CSS shapes?

Resolution independence. Go ahead and page zoom in to see how the shapes hold up with no pixelation.