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;
}
The page on it’s own is here, but is only decent on iPhone or Safari 5 and chrome.
The github version supports more browsers
Nice. Beautiful minimalism.
The code is spilling out to the right of the page there. :P
Very nice tecniques you used there, liked the background gradient… still don’t understand too much how did you do it but I will if I put more attention to code, Thank you very much for posting it :)
Wow thanks for this! Looks great. You don’t have a css segmented control lying around do you? =)~