Web Platform Team Blog

Making the web awesome

Archive for the Masking Category

Making the Web Sweeter with Food Network and Cupcakes

There are two things we know for sure that almost everyone loves: mobile applications and cupcakes. Food Network brought the two together in a beautiful tablet application called, appropriately enough, Cupcakes!. Cupcakes! is kind of a cupcake encyclopedia, full of recipes, ideas, tips, and of course, inspirational cupcake photography. When we saw the Cupcakes! app,... Continue reading →

Fragmentation of masked and clipped content – Part 2

The first part of the article “Fragmentation of masked and clipped content – Part 1” described possible scenarios how a clipping path can be broken into different fragments. The demonstrations used the CSS Multi-column layout with equally sized columns. Other CSS layouts like CSS Regions or CSS Overflow allow more flexibility on styling of fragment containers.... Continue reading →

Fragmentation of masked and clipped content – Part 1

Clipping and masking are graphical effects for partly or fully hiding portions of an object. A clipping path defines an area where the content will be visible. Content outside the area is invisible. An image can be used as a “mask” and the luminance of the image will determine how much of your content will... Continue reading →

Cutting Edge CSS Features at 2013

This year, on September 13, front-end web developers and web designers gathered in Berlin for the first edition of CSSConf held in Europe. It was an awesome event packed with highly informative and entertaining talks about features, tools, techniques and upcoming technology that super-charge CSS productivity. I was happy to be on stage and share... Continue reading →

CSS luminance masking now available in Chrome Canary and Webkit Nightly

CSS masks provide means to partially of fully hide images by using an image (or another graphical element) as an alpha mask or a luminance mask. If until now only alpha masks were available, now one can select between the two types by using the -webkit-mask-source-type property (in Webkit Nightly) and the mask-source-type property (you... Continue reading →

Repeat space and round available for mask-repeat and background-repeat properties in Webkit

As a part of the CSS Masking and CSS Backgrounds and Borders specifications, the -webkit-mask-repeat and background-repeat properties can have the values of round and space. For example, let’s say we have a green div with the following style, which is located on a blue background: div { width: 250px; height: 300px; background-color: green; -webkit-mask-image:... Continue reading →