Author Archive: agreenblatt

rss feed

Author's Website

Adonit Jot Touch 4 Support for Brushes iPad App

January 20, 2014 | By

And now for something completely different… With the announcement of Adobe’s teaming up with Adonit to help manufacture and ship Mighty & Napolean in the first half of 2014, I thought it might be a good idea to start getting my head wrapped around how all this technology works. I … Continue reading

Read More

Presentation on SVG Filters, CSS Filters & Blend Modes

October 29, 2013 | By

I’ve just posted the presentation I gave at the HTML5 Developer Conference in San Francisco.  There are tons of good links to demos on creating SVG Filters that apply to both SVG content and HTML content, CSS Filters, Blend modes and even a few surprises. http://blattchat.com/presos/FiltersBlendModes.pdf Enjoy!

Read More

Designing and Debugging Web Layouts With CSS Regions

October 10, 2013 | By

The adoption of CSS Regions is definitely moving along swiftly.  They are now supported in Mobile Safari on iOS7, Opera, Chrome Canary, Chrome Stable & WebKit nightly. Browser support continues to evolve and can be tracked here. CSS Regions allow you to define content that can “flow” through a series … Continue reading

Read More

Gradient Maps, now on iOS7!

October 5, 2013 | By

Gradient maps, they’re not just for desktop anymore… gradientmaps.js is a library I wrote that leverages SVG Filters to enable you to easily apply a Gradient Map to any DOM element. When I first announced the library, it seemed obvious to me how you could use the library for creative … Continue reading

Read More

Clip Paths & Blending Demos Updated for Mobile, Supported on iOS7

September 20, 2013 | By

The recent release of iOS7 brings many new exciting features to mobile Safari.  I’m going to be writing about this in more details shortly. In the meantime, I’ve updated my CSS Clip Paths and Canvas Blend mode demos to support touch events so you can try them out for yourself … Continue reading

Read More

Photoshop Blending in a Canvas

September 16, 2013 | By

I explained a bit about compositing and blending in a previous post, how Canvas blending lets you achieve in a Canvas the same kinds of blending effects you’d find in Photoshop. Updated – September 24, 2013: Canvas Blending is also supported on Firefox and iOS7 Safari Programmatically working with the … Continue reading

Read More

Interactive CSS Clip Paths

September 10, 2013 | By

Did you know that on Chrome you can specify complex clip paths for your content very easily using the clip-path CSS property? With the standard clip property, you can specify a rectangular clipping area for absolutely positioned elements, as in: mycontent: { position: absolute; clip: rect(5px, 100px, 100px, 5px); } … Continue reading

Read More

Adobe Create Now World Tour

September 9, 2013 | By

The Adobe Create Now World Tour is about to kick off and if you want to learn about all the latest and greatest with Adobe® Photoshop® CC, Illustrator® CC, InDesign® CC, Dreamweaver® CC, After Effects® CC, Premiere® Pro CC, and much more, I highly suggest you attend one of these free events. In truth, if you just plain … Continue reading

Read More

Cross-Browser Responsive Content with CSS Regions

August 29, 2013 | By

In a recent post I described how you could use CSS Regions to easily create responsive content. One of the limitations mentioned though was that CSS Regions at present are natively supported only on Webkit nightly and Chrome Canary and Chrome Stable. There is however the CSS Regions polyfill code … Continue reading

Read More

Responsive Content Using CSS Regions

August 16, 2013 | By

CSS Regions allow content to flow across multiple areas of the display, called regions.  The beauty of CSS Regions is that you can separate the content from the layout.  And with that comes the ability to create some responsive content very easily. Update August 29, 2013:  I have a new … Continue reading

Read More

Practical Gradient Map Use Case

August 13, 2013 | By

I’ve been writing a few posts about the new gradientmaps.js library, and it occurred to me that gradient maps are a little hard to get your head around.  How would you use them in a real-world scenario?  From a pure creativity standpoint, they’re a no-brainer.  But are there any practical … Continue reading

Read More

Implementing the Duotone Filter with an SVG Filter

August 12, 2013 | By

In a recent post I described a duotone CSS Custom Filter I had built that allowed you to take a black and white image, and remap the black and white colors to two other specified colors.  Say you have a t-shirt website.  You could provide a single black and white … Continue reading

Read More

Advanced Gradient Map Usage

August 6, 2013 | By

As you can read here, I’ve just open sourced gradientmaps.js, a library that allows you to apply Photoshop-like gradient maps to HTML content in Chrome and Firefox. Now that the library is out there, let’s have a little fun. Let me explain how you might use the library with jQuery. … Continue reading

Read More

Announcing gradientmaps.js

August 6, 2013 | By

I’ve just released gradientmaps.js on Github. You can use this library to apply gradient maps to any HTML content using SVG filters. You can find all the details on the Adobe Web Platform team blog: http://blogs.adobe.com/webplatform/2013/08/06/gradientmaps-js-gradient-maps-for-html/ The library makes use of SVG filters. As indicated on this table of browser … Continue reading

Read More

Fun with SVG Filters

July 13, 2013 | By

I’ve been playing around with SVG Filters lately, and let me tell you, I’ve been having a ton of fun.  The best part is, you don’t have to know a lot about SVG here.  The filters, defined in embedded SVG can be applied to your HTML content with CSS.  Once … Continue reading

Read More

The state of CSS & Graphics

June 26, 2013 | By

I don’t know about you, but I find that keeping track of what graphics-related CSS properties are supported in what browser, and under what conditions, and with which vendor prefix, is a little daunting. caniuse.com is extremely helpful for this, but it’s still not very easy to find out things … Continue reading

Read More

Understanding Compositing and Blending

June 11, 2013 | By

With Canvas blending now in Chrome Canary, WebKit Nightly and Firefox, it’s a good idea to start getting your head wrapped around this spec.  It seems to be moving along nicely and is starting to show up in more and more browsers. You can find the compositing and blending spec here: … Continue reading

Read More

CSS Exclusions and Shapes Split Into 2 Specs

June 10, 2013 | By

It can often take several years for a W3C spec to go from initial submission (a W3C member submitted a suggestion for a Web standard) to final recommendation status. Often though, a spec is split up into multiple independent  specs to allow each spec to evolve independently, and hopefully faster. … Continue reading

Read More

Twitter Bootstrap typeahead.js with underscore.js Templating – A Tutorial

June 4, 2013 | By

In a previous post, I described how to use the Twitter Bootstrap Typeahead component. The Twitter Bootstrap team recently announced however that they would be switching to Twitter’s typeahead.js for the next major release. That sounds pretty great to me.  typeahead.js is much more powerful than the current Twitter Bootstrap … Continue reading

Read More

Duotone Custom Filter

May 30, 2013 | By

Say you have a black & white image and want to display it in many different 2-color schemes. You have a few options here.  You could draw the image in a canvas and then use JavaScript to manipulate each pixel.  Or you could in theory convert your black & white … Continue reading

Read More

Photoshop Layer Mask Implemented with CSS Custom Filters

May 28, 2013 | By

My last post talked about how you can create a Photoshop-like soft blur effect with built-in filters.  As I started reading more about how you would actually create that soft blur effect in Photoshop though, I realized that often you don’t want the soft blur to apply to people’s faces. … Continue reading

Read More