Beautiful UI styling with CSS3 text-shadow, box-shadow, and border-radius

Beautiful UI styling with CSS3 text-shadow, box-shadow, and border-radius

CSS3 shadows and rounded corners are easy to understand at a basic level, but what if you want to start using them in more advanced UI styling, such as textured buttons and semi-transparent glass effects? In this article Opera designer Jan Henrik Helmers hows you how to create these UI features and more, using CSS3 features, and no images whatsoever.

( Read the article )

Seeing that CSS can be made to make interfaces, could we have CSS for making Opera skins (We already have SVG)?

Gradients are something very important thats missing in opera. The whole point of using css for UI, is to avoid images, but without gradients, its difficult.

In your examples, you have used inset shadows to get the gradient background, but i am not sure if the effect can be completely replicated. plus maintaining style sheets to render same effects in all browsers is a pain.

also, when applying border radius to a text input field, opera behaves odd. I had submitted a bug report on this. here is a link to the test case

Originally posted by DanielHendrycks:

Could we have CSS for making Opera skins?

There is much complexity that is hard to manage concerning the interface between HTML elements and native widgets, especially for a browser like Opera which runs on so many platforms. I think many would like to see CSS used in more places, but not at the expense of UI performance.

Originally posted by narenana:

Gradients are something very important thats missing in opera.

Gradients could be used for at least some of the inset box-shadow effects, and would be less expensive to render. I'm not sure I agree it is "very important" yet, but I would certainly like to see it supported.

The whole point of using css for UI, is to avoid images

Is it ?


Anyways, gradients only recently appeared in a CSS3 draft. Until then there was little point in implementing one of the proprietary syntaxes, or even worse another proprietary syntax, that might very well be ruled out when the standardization work start. Now that gradients are included in CSS3, it's time to consider them seriously.

I agree about the gradients. Its very time consuming creating these wonderful effects (largely through trial and error). Wouldn't it be nice if we could create the designs in Photoshop or Fireworks and output the CSS? Maybe an add-on could provide cross-browser CSS for the existing buttons and other library UI elements which would provide a good starting place for development.

When viewing this article on Opera for Mac, I do not see the styling. Any ideas why the Mac version does not support the CSS3 styles? I can't wait for the day that all browsers have one attribute for radius, shadows, and gradients (IE excluded since they never get it right).

@chrismills thanks for your reply. Here is some info about my installation.

Version information
Version 10.10

Build 6795

Platform Mac OS X

System 10.5.8

Java Runtime Environment installed

Browser identification

Opera/9.80 (Macintosh; Intel Mac OS X; U; en) Presto/2.2.15 Version/10.10

------

Yeah, if we could just write border-radius: and have it work in all browsers would be awesome. Do you have a link where I can read about the IE9 improvements you mentioned?

Originally posted by aamabbutt:

Its very time consuming creating these wonderful effects (largely through trial and error). Wouldn't it be nice if we could create the designs in Photoshop or Fireworks and output the CSS? Maybe an add-on could provide cross-browser CSS for the existing buttons and other library UI elements which would provide a good starting place for development.

The problem with WYSIWYG environments is that they create the code for you, and they might make poor decisions on your behalf. This again creates problems if you later want to do something clever or solve a tricky problem by hand. As CSS3 matures, there will be utilities available where you can be creative without using a text editor.

Works beautifully in my Opera browser but still fails in Firefox (I'm currently running ver.3.6.3).
The only styling visible in Firefox is text shadow and rgba background. I assume this would be the same with Safari which would probably still need -moz- or the -webkit- prefix in front of the property.

Originally posted by aamabbutt:

I agree about the gradients. Its very time consuming creating these wonderful effects (largely through trial and error). Wouldn't it be nice if we could create the designs in Photoshop or Fireworks and output the CSS?

I agree it would be really AMAZING to be able to export at least shapes with gradients and possibly some shadow/glow effects from Fireworks directly to pure CSS.

I just wanted to point out that the nightlies of WebKit support the inset argument for -webkit-box-shadow.

So if you inserted -webkit-box-shadow into all of your example code it should also be visible in the Nightly.

Originally posted by CyberSkull:

I just wanted to point out that the nightlies of WebKit support the inset argument for -webkit-box-shadow.

That is great news. Hopefully it means we can drop the prefixes soon.

Originally posted by chrismills:

Originally posted by CyberSkull:

So if you inserted -webkit-box-shadow into all of your example code it should also be visible in the Nightly.

I've made this change in the examples - let me know what you think.

They all work great in the nightly (WebKit 528).

There is a bug with putting an inset argument in Safari 4. WebKit won't recognize it and invalidates the entire declaration. Using the grey div example, I came up with a workaround.


div {
width: 100px;
height: 100px;
margin: 10px;
padding: 0;
background: #ccc;
box-shadow: 8px 10px 10px rgba(0,0,0,0.5), inset 8px 10px 10px rgba(255,255,255,0.75);
-o-box-shadow: 8px 10px 10px rgba(0,0,0,0.5), inset 8px 10px 10px rgba(255,255,255,0.75);
-webkit-box-shadow: 8px 10px 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 8px 10px 10px rgba(0,0,0,0.5), inset 8px 10px 10px rgba(255,255,255,0.75) !important;
-moz-box-shadow: 8px 10px 10px rgba(0,0,0,0.5), inset 8px 10px 10px rgba(255,255,255,0.75);
}

Insert the code without the inset and make the inset rule !important so that the nightly/future versions will use it.

Safari 5 (WebKit 533) supports the inset property normally.

It just occurred to me that there is an important feature missing from the article. The :active state of the button! Now that the button is all pretty, how do users know they hit it?

I cobbled together a quick example for the red button:

button:active {
	box-shadow: inset -0 -1px 3px pink, inset -0 5px 15px maroon, 0 2px 1px black;
	-o-box-shadow: inset -0 -1px 3px pink, inset -0 5px 15px maroon, 0 2px 1px black;
	-webkit-box-shadow: inset -0 1px 3px pink, inset -0 5px 15px maroon, 0 2px 1px black;
	-moz-box-shadow: inset -0 -1px 3px pink, inset -0 5px 15px maroon, 0 2px 1px black;
}

Opera
10.61 6430 on Linux x86_64, 2.6.32-24-generic
Parent with:
width: 450px; width: 450px; border-radius: 225px; -moz-border-radius: 225px; -webkit-border-radius: 225px; overflow:hidden;
Childe:
width: 500px; width: 500px;

Content overflow parent border!