Opera 25 (based on Chromium 38) 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.
Håkon Wium Lie proposed CSS on 10 October 1994 — twenty years ago today. Bruce interviewed him about the past, present and future of the Web’s styling language.
Zach Leatherman explains common pitfalls with
@font-face and how to fix them using font load events.
Opera 24 (based on Chromium 37) for Mac and Windows is out! For users, it includes tab preview, better hi-res support and more obvious Private Windows. Here’s what the new release means for web developers.
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 the earlier tutorials of this course we talked about the content of web sites and how to structure content using HTML. This is very important as it means that we give our documents meaning and structure for other technologies to tie into seamlessly. The most important web technology to discuss next is CSS (Cascading Style Sheets), which is used to style our HTML, and position it on the web page. In this article I’ll introduce you to CSS — what it is, how to apply it to HTML, and what basic CSS syntax looks like.
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!