skulbuny

Posted 1 month ago with tags:

iOS CSS3 iPhone iPad Retina CSS HTML Web Design Web Development Retina Display Tutorial

Create a Web App with Rounded Corners on iOS for the Retina Display

Have you ever seen the apps with rounded corners like this or this? Well, we’re going to be able to make a web app look like that on iOS devices, like this.

See a live demo of this tutorial here!

*You’re going to need to view this demo on an iPhone 4 to see the rounded corners effect, otherwise, you’ll just get a regular test page.

We’re going to need some basic CSS, CSS3, and a little HTML to get this little, but nice, aesthetic feature up and running, so open up your favorite website editor and get started!

So, we’re first going to need insert two <div> tags right below the body tag, above everything else you may have, like so:

<html lang="en">
<head>
 <title>Awesome Website Title Here</title>
 <link rel="stylesheet" href="path/to/stylesheet.css" media="screen" />
</head>
<body>
 <div id="topframe" class="frame"></div>
 <div id="bottomframe" class="frame"></div>
</body>
</html>

We will now need to make our mask. To do this, we have to do either A) A little Photoshopping, or B) use my premade masks for the rounded corners. Here is my “topframe.png” and here is my “bottomframe.png”

Please note: I’m not going to give a tutorial on how to create these masks. Just remember that they should be rounded to about 12px per corner, and there should be a white highlight sitting inside of the black mask. And remember to make them into two separate images!

On to the CSS! We have to make this frame to only be seen by iPhone 4 users. The iPhone 4 uses 2 pixels per point, so it has a pixel-ratio of 2. Luckily, the iOS Dev Team made it so CSS3 @media queries can speak speak specifically to these devices with a pixel ratio of 2, with @media (-webkit-min-device-pixel-ratio: 2). Here is the CSS I used for the demo given above, you’ll want to stick this at the bottom of your preferred CSS stylesheet:

@media only screen and (-webkit-min-device-pixel-ratio: 2){
#topframe {height: 6px; top: 0; background-image: url("../img/topframe.png"); -webkit-background-size: 320px 6px;}
#bottomframe {height: 6px; bottom: 0; background-image: url("../img/bottomframe.png"); -webkit-background-size: 320px 6px;}
.frame {position: fixed; z-index: 10000; width: 320px; left: 0; background-repeat: no-repeat;}
}

I followed most of the steps given from this blog post to help me get this CSS right. You have to make your height and width half of what it really is for it to be displayed correctly. The z-index is that high so it sits above any other object you may have on your page, like a popup, modal, or navbar. These frames are fixed because they need to stay still above your site. Don’t change it!

The only thing you should be changing is the path to your images, and possibly the height. Don’t change anything in .frame!

That should cover most of it! If you have any questions about this tutorial, shoot them at me at:

Thanks for reading, and enjoy those sweet looking rounded corners on your web apps!

skulbuny

Create a Web App with Rounded Corners on iOS for the Retina Display

See a live demo of this tutorial here!

Snippet to make any site full-screen in iOS