FITC is hosting a conference called Screens 2011 dedicated to mobile development. The event takes place in Toronto between Nov 14-15th, 2011. It is a 2 full day of presentations covering iOS, Android, HTML5 (jQuery Mobile, HP/WebOS, AIR, FLEX, Windows Phone) as well as marketing and business of apps. I have two conference tickets to give away. For your chance to win a free ticket, post a comment in this post before Oct 24, 2011. If you are interested in getting the tickets, use the following coupon code to save 15%: mobile2010.

When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn’t render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I’m going to revisit the topic and show you how much more you can do with the background-image CSS trick. I will show you how to use box-shadow, border-radius and transition to create various image styles.

View Demo Image Styles

I am delighted to work alongside MOO in offering a 20 postcard giveaway for 10 readers. The winners can upload their own design to redeem the postcards (shipping is included). Also, one lucky winner will win $50 in print credit to use at MOO. If you’ve not come across MOO before, they just love to print – whether it’s business cards, postcards, labels, stickers, MiniCards, greeting cards and much more!

Those who create responsive design for iPhone may be aware of the viewport scaling bug in iPhone Safari. The bug occurs when you set the viewport width to device-width and rotate the phone to landscape view. To see this in action, view the bug demo page with your iPhone and rotate the phone from portrait to landscape view (you should see the page being scaled up). This is a known bug for a long time. Today I’m going to share some tips on how to fix this bug.

I haven’t written any Photoshop tutorials for a while. Today I’m going to share a simple tutorial on how to create reusable background patterns with Photoshop and CSS. I learned this trick from designing WordPress themes. The trick is to create one reusable transparent PNG background and use CSS background-color property to create various color skins. It is particularly useful for creating customizable and dynamic templates (see demos).

The Frontend conference I spoke at last year is hosting again this year in Oslo, Norway between October 10-12thFrontend 2011 (@frontend_conf). Unfortunately, I won’t be attending this year. However, I have a free conference pass to giveaway. To enter the contest, all you have to do is write a comment about your thoughts on the event in this blog post. The contest ends on August 19th, 2011. Then a random winner will be drawn from the comment list.