Web Platform Team Blog

Adobe

decor

Making the web awesome

Archive for the Tips and Tricks Category

Add Shape and Depth to Your Layout with Photoshop and CSS Shapes

In the current Webkit implementation of the CSS Shapes specification, we’ve added support for shape-outside  using an image as a value. In this case, rather than defining the shape with a basic-shape function, the shape is computed from the image’s alpha channel, with the opacity threshold being configurable with shape-image-threshold. By using an image with... Continue reading →

Using blend modes in HTML Canvas

Canvas blending is an HTML feature for designers and web developers. In this blog post, I  present the syntax and some use cases where blend modes are particularly useful. What are blend modes? To put it simply, blend modes are ways of combining two graphic objects using special mathematical formulas. Recently, blend modes have landed... Continue reading →

Making Long-form Journalism More Repeatable

Last spring, we experimented with combining some amazing content from National Geographic with emerging layout features like CSS Regions and Shapes. We believe that the result — a feature called Forest Giant — was a really elegant and unique experience. However, like so many other popular long-form articles we’re now seeing on the web, it... Continue reading →

Building a Better Web Through Crowd Sourcing

In case you hadn’t heard, the SFHTML5 Meetup group will be hosting a meetup on April 25th 2013 focused on making the Web better via crowd sourcing testing. Rebecca Hauck will talk to us about Test the Web Forward a community-based grass roots movement with the goal of improving the quality of the Web by fostering... Continue reading →

Codepen Pattern Rodeo on CSS Regions

Last week a new Pattern Rodeo contest was posted on the CodePen blog. Chris Coyier from CSS Tricks challenged folks to use CSS Regions in their designs. These pens could work with the experimental regions implementations in Chrome Canary or IE10, or use the Regions polyfill in other browsers. Twenty-three people entered the contest. The... Continue reading →

Building a Screensaver in HTML

To get some experience working with and optimizing CSS 3D transformations, we decided to build an HTML screensaver demo (GitHub repo). Here’s how it works: Open the demo in any modern browser with proper 3D CSS transformation support (Chrome, Safari, or Firefox). Choose your favorite image sharing services (Flickr, 500px, Instagram, or Dribbble). Watch the... Continue reading →

Icons and Icon Fonts

The explosion of devices and screen sizes has had an interesting effect on how designers and developers use icons on the web. Used well, icons can pack a lot of information into a small amount of visual real estate. They can help UIs communicate efficiently. For example, consider The ‘conversation bubble’ icon is not only... Continue reading →