CSS3 only Native iPhone App. No images!
Posted By Estelle Weyl on June 14, 2010
My challenge to myself today was to create the native look of an iPhone application using only CSS. No images. I did it. When developing for the iPhone, one only has to consider a single browser. This made the challenge somewhat easy. The fun part was creating the page background, buttons and navigation bar without the use of image. Linear gradients came to the rescue. Now that Safari 5 supports inset shadows, the buttons were a cinch. Check it out (on iPhone or Safari 5 only)!
And, since I like to share, here are the important parts of the code:
#theNavBar{
background-image: -webkit-gradient(linear, 0% 0%, 0% 50%, from(rgba(176, 188, 205, 1)), to(rgba(129, 149, 175, 1)));
padding: 7px 10px;
background-color: rgb(109, 132, 162);
border-bottom-color:1px solid rgb(45, 54, 66);
border-top:1px solid rgb(109, 132, 162);
display: block;
height: 31px;
line-height: 30px;
display: block;
border-bottom: 1px solid #2C3542;
border-top: 1px solid #CDD5DF;
}
#theBodyBackgroundImage {
background-color:#C5CCD4;
background-image: -webkit-gradient(linear, left top, right top, from(#C5CCD4), to(#CBD2D8), color-stop(0.6, #C5CCD4), color-stop(0.6, #CBD2D8));
-webkit-background-size:7px 7px;
background-repeat: repeat;
}
Feel free to right click on the iframe above and look at the code. For detailed explanations of everything… you may have to wait for my book. The page on it’s own is here, but is only decent on iPhone or Safari 5 (and perhaps chrome).
