Web Platform Team Blog

Adobe

decor

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! (check it out on Apple’s App Store). Cupcakes! is kind of a cupcake encyclopedia, full of recipes, ideas, tips, and of course, inspirational cupcake... 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 →

Cutting Edge CSS Features at CSSConf.eu 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 →