IntroductionKeeping perspectiveperspectiveperspective-originTwo-sides to a transformed objectbackface-visibilitytransform-styleThe transform functionsperspective()matrix3d()translate3d() translateZ()scale3d() and scaleZ()rotate3d(), rotateX() and rotateY()Learn MoreIntroductionOpera 15 adds a lot of goodies under its hood, including three-dimensional CSS transforms (2D transforms have been availab

Opera Mobile Emulator Build With Experimental WebKit Prefix Support CSS vendor prefixes were introduced in CSS 2.1 for vendor-specific extensions with the warning that authors should avoid vendor-specific extensions. CSS Snapshot 2010 extended the definition: Prior to a specification reaching the Candidate Recommendation stage in the W3C process, all implementations of a CSS feature are considered

IntroductionFigure 1: An image of the finished example for this articleIn the first part of our WebGL series, we walked through a very simple introduction to WebGL, explaining what it is and how it can be used, and dissected a simple code example. From here on in, we will start looking at WebGL in more detail, focusing on individual tasks and techniques. This time, we’ll look at drawing more compl

IntroductionThis is the first in our series of articles about WebGL. The objective of this series is to provide the information and resources you’ll need to get started learning WebGL. In this piece, we will discuss how WebGL works, what you need to create WebGL applications, and what a simple example looks like. What is WebGL?WebGL is a JavaScript API that allows us to implement interactive 3D gr

IntroductionOne of the main problems HTML5 set out to solve was consistency (and therefore machine-readability) of markup, evidenced by the introduction of standard semantic elements such as <header>, <nav> and <figure>. This is all well and good, but there are times when you’ll want to add specific machine-readable data attributes to pieces of content so that they can be read consistently by some

viewport メタタグと @viewport 規則 Translated by Masataka Yakura · 31 Mar, 2011Published in: target-densitydpi, mobile, opera mobile, viewport, device-pixel-ratioThis is a translation of An introduction to meta viewport and @viewport, written by Andreas Bovens. はじめに Opera のモバイル製品ではずいぶん昔から viewport メタタグをサポートしています。Opera Mobile 11 になって viewport 実装はより堅牢なものになり、また、異なる画面密度に対応する新しいメカニズムもサポートしました。さらには、私たちが提出した @v

IntroductionSupport for the viewport meta tag in Opera’s mobile products has been around for quite some time, and from Opera Mobile 11 onward, we have made our viewport implementation more robust, added support for new mechanisms to deal with different screen densities, and included an implementation of our own CSS @viewport rule proposal. In addition, Opera Mini 6 and later now also comes with ba

IntroductionMultiple 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. It will therefore come as no surprise to anyone reading this that such a multiple column capability is one of the most hotly requested CSS feature additions! The Multi-column Lay

Table of ContentsIntroductionWhy WOFF?Where can I get WOFF fonts?ExamplesConclusionIntroductionOpera's Håkon Wium Lie first publicized the idea of freely downloadable fonts, the idea being to give designers the freedom to choose fonts of their preference beyond the traditional "web safe font set". This formed the basis of Web Fonts. We first implemented Web Fonts in Opera 10. Web fonts allow linka

Get familiar with HTML5! By Chris Mills · 14 Jan, 2011Published in: wsc, html5, web standards curriculum, open web Introduction Most of the web standards curriculum is based on the last stable version of HTML — HTML 4.01. The HTML 4.01 spec was completed in 1999, over 10 years ago as of the time of this writing! But unless you've been hiding under a rock for the last year or so, you'll be well awa

IntroductionA common problem in CSS concerns how to control the aspect ratio of replaced elements, such as <img> or <video>. For example, you might want to have all images occupy the same space on a page, but not distort and lose their aspect ratio when someone uses an image file that isn’t quite the right size. Resizing and letter-boxing the image slightly to conserve the aspect ratio is a much m

One of the things recently added to Opera is support for the buffered-rendering SVG property. SVG content providers can use this property to provide a hint to the implementation about how often an element is modified so it can make better speed vs. memory trade-offs. The attribute values for buffered-rendering are auto, dynamic, and static. From the SVG Tiny 1.2 recommendation: auto: Indicates tha

IntroductionDrop shadows are often used in web and print design to give elements more depth. Creating drop shadows for the Web used to require multiple images, created in image editing software and then attached to the page as CSS background images. This approached worked, but as well as being labour-intensive in terms of creating the necessary graphics, it also required bloating your markup with

To support several browsers we need to provide the same audio content in different formats. As we mentioned before, you can reference the different formats using multiple <source> elements placed inside the <audio> element: <audio controls preload> <source src="http://yourserver/rockandroll.ogg" /> <source src="http://yourserver/rockandroll.mp3" /> <!-- A fallback solution - Flash would do --> </a

IntroductionImagine visiting a city for the first time. You're hungry, but don't know where the nearest restaurants are and which of them are any good. Wouldn't it be nice if some app could detect your location and provide you with a list of restaurants closest to you, along with reviews and ratings for each one? And this is not the only consideration — could it detect your location accurately, ke

Table of contentsIntroductionThe basics of using canvasThe 2D context APIBasic lines and strokesPathsInserting imagesPixel-based manipulationTextShadowsGradientsSummaryIntroductionThe HTML5 specification includes lots of new features, one of which is the canvas element. HTML5 canvas gives you an easy and powerful way to draw graphics using JavaScript. For each canvas element you can use a "context

Of course, in the real web most of us are stuck having to support Internet Explorer, which doesn’t yet support any of these properties. The best place to use them is therefore an environment where you can control what browser will be used. A prime example here is Opera Widgets, which run on the Opera core engine and therefore include modern browser features. An intranet is also a good example, so

AI, Gaming, Opera GX Aria gets Buffed in Opera GX July 1st, 2024 Aria gets buffed in Opera GX. New features are being added to improve Aria's capabilities. Desktop Opera unveils Opera One R2 in Developer June 26th, 2024 Opera unveils Opera One R2 for early testing. This is a new version of the Opera One browser released in... Desktop Opera One now available for Windows on Arm June 13th, 2024 Opera