skulbuny
Whenever 140 characters just isn't enough, I resort to this. If you want more of my mind, check out my twitter. It gets updated more than this.
Click here to go back to skulbuny.com
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!
Just stick this little guy in your <head> and add your site to your iOS home screen!
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
OS X Mountain Lion (10.8) arrives this summer. With all-new features inspired by iPad, the Mac just keeps getting better and better.
Mountain Lion looks like it will be a promising follow-up to OS X Lion. It will bring over popular iOS apps and features like Messages, Reminders, Notes, Twitter integration and Notification Center. Mountain Lion will also expand it’s iCloud integration by allowing you to store documents on iCloud and access them from your iPad, iPhone and Mac.
Additionally, Daring Fireball’s John Gruber has an excellent article about how Apple’s Phil Schiller revealed Mountain Lion to him in his own person “Apple Media Event”.
Can’t wait to play with this.
- Apple Announces OS X Mountain Lion (laughingsquid.com)
iOS 5 - When the phone is locked, you can “slide to view” the notifications themselves, taking you directly to the app.
Umm… who didn’t know that?
With a planned official release of iOS 5 coming on October 12, Apple quietly released the Gold Master of the OS to developers after its presentation yesterday. This Gold Master build is the release that will be pushed to everyone next week, meaning that you can install it without an Apple developer account; all you need to do is download the software, restore using iTunes, and you’ll be all set with the brand new iOS 5!
If you are unfamiliar with manually restoring an iOS build to your device, follow along here to get your device upgraded.
Make a BackupFirst things first, you’ll want to make a backup of your iOS 4 (or iOS 5 beta) installation, because this process will wipe your device. If you don’t have a backup, you’ll be starting from scratch. Sync your phone with iTunes and a backup will be automatically made, or you can right click on your device in the iTunes sidebar and select Back Up.
Download the Appropriate Software
Then, download the iOS 5 software and the newest iTunes beta. Here are the links for the different devices supported by iOS 5:
Download iOS 5 GM for iPhone 4 (GSM)
Download iOS 5 GM for iPhone 4 (CDMA)
Download iOS 5 GM for iPhone 3GS
Download iOS 5 GM for iPad 2 (Wi-Fi)
Download iOS 5 GM for iPad Wi-Fi + 3G (GSM)
Download iOS 5 GM for iPad Wi-Fi + 3G (CDMA)
Download iOS 5 GM for iPad 1
Download iOS 5 GM for iPod touch 4G
Download iOS 5 GM for iPod touch 3GDownload iTunes 10 Beta 7
Restore in iTunes
Next, load up iTunes and plug your device back in. Go to the main settings page for the device (click it in the sidebar) and you’ll see a button that says Restore. Hold down Option on Mac or Shift on PC and click the Restore button; you’ll be prompted to select the software to install. Navigate to the folder where you downloaded the OS software above, and select the IPSW file for installation.
You’re Almost Done!
Your device will turn off and the installation process will begin. Once that’s been completed, you’ll be walked through iOS 5′s new on-screen setup, which allows you to set up your device and restore the iTunes backup you just made. It’s that easy!
If you are in Windows or Linux, extract the .dmg file, then extract the file it creates, and then you get the .IPSW file you use to “restore” your iOS device with.
(Source: lockergnome.com)
