All you need to do is add the canvasmask.js script and add a class of mask to each image you want to mask. You also need to provide a PNG file as the mask using the data-mask attribute. <img src="red-panda.jpg" alt="Red panda" class="mask" data-mask="centerblur.png"> Canvas Masking Demo → Canvas Masking Source →
Photoset Grid
Box
Photoshop Google Maps Tile Cutter Script Update
It’s been 1.5 years already since I created PS_BRAMUS.GoogleMapsTileCutter, a Photoshop Script which automatically chops up a large image into tiles for use with Google Maps. Today a huge update was released. Sparked by an initial pull request by Nick Springer, PS_BRAMUS.GoogleMapsTileCutter now sports a UI dialog in which you can set the options before …
Continue reading “Photoshop Google Maps Tile Cutter Script Update”
Auto-hiding scrollbars in IE10
How to Work with Engineers
Engineers are the magicians of the crew, who, with a few taps of their fingers, take the plans and the pixels and Voila! A working implementation. As a designer, how do you best keep up with their meme-savvy, self-deprecating, script-loving ways? Keep reading. And remember: Want to make stuff happen? All you need to do …
Responsive Elements
FlowType.JS
Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size—and subsequently the line-height—based on a specific element’s width. This allows for a perfect character count per line at any screen width. …