About the new skin
By Jon Hickshicksdesign. Wednesday, June 3, 2009 6:47:23 AM
Initially, a new skin wasn't planned for Opera 10. We were just going to do a 'clean-up' of some elements and focus on UI for new features. However, over time, the new UI elements started jarring with the 9.5 skin, and steadily everything started getting updated. In particular, there were a lot of icons that were just plain fuzzy - they weren't following pixel lines well and the anti-aliasing made them blurry. Almost all the icons have been replaced, and by the time the final release is out they'll all be revised.
Elements of the skin remain however, for example the color scheme is very much taken from it, but with lines being simplified, and the use of etch effects and border inner highlights to give extra crispness to edges.
Things to bear in mind while you're playing with beta 1:
- What you see here is neither complete nor final, and there will be more iterations before the final release. Some elements will still look like the current skin!
- Currently the skin is implemented for the default setup, tabs at the top, panels on the left, panel toolbar on the left and status bar at the bottom. Other setups will look a bit odd - for now.
- This build doesn't include the new features in Opera 10, so one of the reasons for the revised skin isn't there. All we be clear when the beta comes out!
Give it time to 'settle down' and see what you think!
For the skin designers out there, there is a new parameter for Text Shadow. This was added to reproduce the etched text effect that is standard on OS X, but many windows apps are starting to use this style too. Here's how it works:
Text Shadow = 0 1 Text Shadow Color = #ffffff
The first parameter has the X and Y co-ordinates of the shadow. The example shows a 1px shadow directly underneath, but you can also use negative values. The second is self-explanatory! Blur-radius hasn't been enabled as this causes too much of a performance hit. Have fun with this!
Another new skin feature is the ability to skin the horizontal and vertical splitters. The element names are:
[Splitter Horizontal Divider Skin] [Splitter Vertical Divider Skin]
These are set at 3px, but take skin parameters just like other elements.