Entries with “css” tag

Fixing the scrollTop bug

by Simon Pieters in Articles

Which element scrolls the viewport when using scrollTop? This article explains what “the scrollTop bug” is and what we need to do to get it fixed. Your help is needed!

Sex, Houdini and the Extensible Web

Sex, Houdini and the Extensible Web

by Brian Kardell in Articles

To evolve the web and compete with native, we need a way to innovate and iterate faster — the Extensible Web principles, which have brought us Service Worker and Web Components. Project Houdini looks at how we can bring extensibility to CSS, too.

The State of Web Type

by Bram Stein in Articles

Typography has a long and rich history, but much has been lost in the transition to the web. Let’s take a look at some of the features we need for an optimal and beautiful reading experience.

Getting to Know CSS Blend Modes

Getting to Know CSS Blend Modes

by Shwetank Dixit in Articles

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!

Understanding 3D Transforms

Understanding 3D Transforms

by Tiffany Brown in Articles

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.

Opera’s WebKit Patches

by Bruce Lawson in Blog

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.”

Understanding the CSS Transforms Matrix

by Tiffany Brown in Articles

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.

Opera Mobile Emulator Build With Experimental WebKit Prefix Support

by Bruce Lawson in Articles

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 -webkit- prefixes.

CSS3 Multi-Column Layout

by Molly E. Holzschlag in Articles

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.

Cross-Browser CSS box-shadows

by Rustam Gaffanov in Articles

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.

Introduction to HTML5 Video

Introduction to HTML5 Video

by Bruce Lawson, Patrick H. Lauke in Articles

This article gives you an introduction to <video> and some of its associated APIs. We look at why native video support in browsers is important, give an overview of the element’s markup, and outline the most important ways in which video can be controlled via JavaScript.

CSS Basics

by Christian Heilmann in Articles

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.

CSS Text Shadows and Background Sizing

by Christopher Schmitt in Articles

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!