Controlling text size in Safari for iOS without disabling user zoom

The default viewport settings – the size and scale of the viewport – in Mobile Safari/Safari for iOS are optimised for websites with a width of 980 pixels. This means that if you use a fluid/elastic layout or media queries to make your layout adaptable, Safari on iOS doesn’t take advantage of the flexibility that […]

CSS Webkit Appearance

I did my fair share of testing this site on an iPad during development. In most cases, the version of Mobile Safari found on the iPad renders pages like any other standards-based browser. Only when I got to native UI elements like search boxes & text fields did I notice an inconsistency. A pre-set styling […]

Random Color CSS3 Animation

Ever since I wrote my first lines of code, I have had a strange interest in the functions that generate random numbers. and yes, I know actual random doesn’t exist Every time I just want to fool around with some code, you will find me popping in a random function in somewhere. So when I […]

Rounded corners on images, CSS-only

Admit it, even though rounded corners are widely seen as overused, you love playing with border-radius. A common complaint is that you can’t use that CSS3 property on images. Define any value, and the images will still display as nature intended: straight corners. For a project I’m working on, it would’ve been really nice having […]

iPhone CSS Tips for Building iPhone Websites

With the rapid rise in mobile browsers, it has probably never been more important to ensure your sites can be handled on these platforms. By far one of the most popular such browsers is Mobile Safari on the iPhone – this is one of the easiest browsers to develop for: it runs on Webkit (meaning […]

Nice Web Type – Pure CSS text gradient no PNGs

So there you have it. A pure CSS text gradient with no PNG images necessary. Of course, it only works in Safari. Get your mind into techniques like this now, and you’ll know the logic when other browsers catch up…

3D Transforms Using Safari Webkit

WebKit on Mac OS X now has support for CSS 3D transforms, which allow you to position elements on the page in three-dimensional space using CSS. This is a natural extension of 2D transforms, which we described in an earlier blog post. 3D transforms have been supported on iPhone since 2.0, and now we’re please […]

How to stop images breaking rounded corners in Safari

Currently when you place an image or any ‘replaced content’ inside a block with rounded corners set by -webkit-border-radius, the image pokes through the rounded corners on Safari version 4.01 at the time of writing. The expected and desired behaviour is that the image be cropped by the rounded corners. This can be achieved by […]