Monthly Archives: October 2013

Cutting circles in your HTML with CSS3

Masking images on the web has typically been a job reserved for Adobe Flash or some equivalent photo manipulation tool as a static image. While Flash was prevalent on the web, it became really easy to mask an image with a vector shape. Now that Flash content has been largely replaced with a combination of HTML, CSS3 and Javascript, it is time to dig back into the toolbox and find new solutions for old problems.

Screen-Shot-2013-10-08-at-2.47.29-PM

Masking Techniques

Making a mask for an image requires some sort of shape to use as the “mask”. This will determine what portions of your image will “show through” or be excluded. Typically a vector shape is used to make a mask. On the web, SVG (Scaleable Vector Graphics) is used to create these vector graphics. All the different ways to mask an image are outside of the scope of this article, however one technique that is illustrated in the next section does not require SVG at all. For more detailed information on the different ways to mask content with SVG check out this article

Masking with Radial Gradients

After a slight detour, it is time to get back to the task at hand. Cutting a transparent circle in a DOM element. As we have seen above, we can cut out all sorts of shapes using SVG. By layering a radial gradient over the top of a particular element we can achieve a similar effect using a circle. Check out the fiddle below for more details.

http://jsfiddle.net/HAKuS/1/

To create the illusion of a cutout circle we use the color-stops property of radial gradients. In the background-image style property the first color-stop is a 100px transparent color. This creates our “hole” in the white overlay. The next color-stop creates a 5px inner shadow of semi-transparent black. The final color-stop creates the background color for the rest of the DOM element. And volia, there is a masked hole in your DOM element with no SVG!

Screen-Shot-2013-10-10-at-9.17.01-AM

iOS 7, PhoneGap and the Status Bar

For some folks that just tried out their PhoneGap apps for the first time on iOS 7, you may have seen something like this…

ios7 Status bar

If you are like me, now is the time where you google for awhile to find out how to get rid of something that you have already figured out with iOS 6 🙁 Thanks for the update Apple.

Removing the Status Bar

It turns out that there is yet another new plist setting that will fix this issue. If you are using PhoneGap make sure to update Cordova to the latest release. (3.1)

Next, open your plist file (Resources/{ProjectName}-Info.plist) and add the key “View controller-based status bar appearance” and set it to “NO”. Also, for good measure make sure that “Status bar is initially hidden” is set to “YES”

Plist file