Web Development Blog

CSS3 animations are really easy to write once you know how they work. This post will show you some very basic animations done in CSS3. Once you get the hang of how to put them together, you will be able to do more advanced animations in CSS3 based on these examples. Also have a look [...]

Continue reading Introduction to CSS3 Animations by Examples

After developing a few mobile websites in the past few months, I notice that I am reusing certain Javascript code in every project. Followings are the 10 Useful Javascript Snippets that I use for mobile sites. Note that some snippets require jQuery mobile framework. 1. Add class name “iPhone” or “Android” to body element if [...]

Continue reading 10 Useful Javascript Snippets for your mobile websites

Using Google Fonts in your WordPress Theme is very easy and it can be completed in 3 simple steps. 1. Go to Google Web Fonts, browse all the fonts available for use on your website and pick any font you like. For this example, I will be using Droid Sans. 2. Click on the font [...]

Continue reading How to use Google Fonts in your WordPress Theme

If you have been developing websites and web apps for mobile, you may have noticed that the images are not very crisp on iPhone 4. The Retina display on iPhone 4 is the sharpest, most vibrant, highest-resolution phone screen ever but you need to know how to utilise it. The images you use on the [...]

Continue reading How to use hi-res images in web apps for iPhone4

jQuery Mobile is a framework for mobile web apps and mobile websites with an aim to provide a unified user interface system across many mobile device platforms such iPhone, BlackBerry, Android and Windows Mobile. The framework is built on top of one of the most popular Javascript frameworks, jQuery. Followings are some of the most [...]

Continue reading Top 10 jQuery Mobile Code Snippets that you need to know

In this step-by-step tutorial, I’m going to show you exactly how to code an HTML email; be it an HTML Email Signature or HTML Email Newsletter. 1. Changing the background color <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333"> <tr> <td> </td> </tr> </table> 2. Setting a fixed width and background color for the content area <table [...]

Continue reading How to code an HTML Email Newsletter

Here’s a snippet of CSS and HTML code that aligns an image in center (horizontally) and middle (vertically). Tested in Firefox, IE, Chrome and Safari. CSS #enter { position: absolute; text-align: center; left: 50%; top: 50%; margin: -120px auto 0 -130px; /* value of top margin: height of the image divide by 2 (ie: 240 [...]

Continue reading Align an image in center and middle using CSS

web 2.0 style call-to-action buttons can be purchased in psd format from graphic river Since writing How to style a Submit button in CSS a few months ago, I have found an alternative way to achieve the same result. In this example, we will be using <button> tag instead of <input> tag. The <button> tag [...]

Continue reading How to style a Submit button in CSS – Example 2

SEO site checker is the iPhone webapp we launched a few days ago. This is the fourth iPhone web application we’ve developed and we thought it’d be useful to share some tips we learnt along the way. 1. Get inspiration Before building anything, we like to browse through existing iPhone web apps that are available. [...]

Continue reading Tips for iPhone Web App Development

The main purpose of this code is to have “Read more” for a long block of text (eg: comments) without having to separate the text into two div blocks and then use toggle to show/hide the 2nd block. This code simply uses CSS overflow:hidden property to hide long block of text. jQuery live event is [...]

Continue reading Read more using jQuery live event