Opera 23 (based on Chromium 36) for Mac and Windows is out! To find out what’s new for consumers, see our Desktop Team blog. Here’s what it means for web developers.
will-change is a new property that allows you to let a browser know ahead of time that an element may change, so that it can make any preparatory optimisations. Sara Soueidan shows you how to put an end to cargo-cult hacks, and speed up your animations.
Opera 22 (based on Chromium 35) for Mac and Windows and for Android is out! Here’s what that means for web developers.
CSS Blend Modes provide a way to specify how one layer will interact or “blend” with the one underneath. Until now, this was the domain of photo editing applications, but now they are available on the web using CSS itself!
Opera 21 for Mac and Windows (based on Chromium 34) is out! Here’s what that means for web developers.
In this article we’ll dig in to 3D transforms in detail, looking at the fundamental differences between 3D and 2D transforms, the 3D transforms available, and some demos that show how these work.
About five weeks ago, we announced that Opera’s products would transition to using WebKit. We said “Opera will contribute to the WebKit and Chromium projects. Our work on web standards to advance the web continues.”
This article provides a basic introduction to Flexbox, the gifted new kid on the block with respect to CSS layouts. Here we’ll show you how the most exciting new features of Flexbox work.
In this article we explain how transform matrices work — these involve some rather complicated math, but they are not so hard to understand when you sit down and check out a few examples! Once you understand how to put together matrices, you can use them inside the CSS
transform: matrix(); and
transform: matrix3d(); functions to apply transform effects to your web pages.
Through our site compatibility work, we have experienced that many site authors only use
-webkit- prefixed CSS, thereby ignoring other vendor prefixes and not even including an unprefixed equivalent. This leads to a reduced user experience on non-WebKit browsers, as they don’t receive the same shiny effects, even although they support them. To tackle this problem, we are releasing an experimental Opera Mobile Emulator build with experimental support for selected
This article covers the basics of CSS3 radial gradients, a great CSS feature that allows for much more flexible design work.
Opera’s spatial navigation is the most common navigation mechanism on web-enabled TVs and devices. It offers an intuitive way for users to navigate web pages. Using a sprinkling of CSS3, developers can take full control over the exact order in which elements receive focus, to further enhance the browsing experience.
Multiple column design that allows text to flow naturally from column to column depending on width and other parameters has proven invaluable in print design, crossing languages, cultures and a range of media. The good news is that now it is coming to web design, courtesy of the CSS3 Multi-column Layout Module. In this article we show you how to get to grips with it.
This guide is aimed at web developers wishing to optimize their web sites and applications for better compatibility with web-enabled/connected televisions, with a particular emphasis on the Opera Device SDK and its functionality.
In this article we make full use of the HTML5 video element and associated media elements API — along with jQuery and some CSS3 magic — to make a fully-customizable, themeable HTML5 video player. To round things off, the player is encapsulated as a jQuery plugin for easier reuse.
CSS3 box-shadow is a very useful property — creating drop shadows programmatically can save web designers a lot of time in image editing software. However we have a problem if we need to replicate those shadows in Internet Explorer, which does not support this property. In this article, we present a cross-browser solution that uses box-shadow in supporting browsers, and IE filters to fake the drop shadows in IE.
This article gives you an introduction to
In this article David Storey looks at how to use CSS counters to provide robust sequential numbering for reoccuring HTML elements such as list items or paragraphs.
In this article Christopher Schmitt explores a couple of great new CSS design properties available in CSS3 — text-shadow for creating drop shadows, and background-size for automatically resizing background images as the browser window changes size. Exciting stuff indeed!