Multi
Multi
How To Make An iPhone App With CSS
Topic Started: Sunday, 1. May 2011, 10:03 (707 Views)
Andrew
Member Avatar
ぼくたちがすべてはばか。
I couldn't wait for resource weekend :P
This is best viewed in Chrome and Safari and FireFox 4

Demo - ATTACHMENT

First we set up our layout.

Code: HTML
 
<center>
<h1>Download the Outline App Today!</h1>
<h2>It's Not Real</h2>
</center>
<table>
<tr>
<td>
<div>
<center>
<img src="http://z4.ifrm.com/30235/69/0/p1061142/TealNew.png" />
</center>
</div>
</td>
<td>
<div>
<center>
<img src="http://z4.ifrm.com/30235/69/0/p1061134/GreNew.png" />
</center>
</div>
</td>
<td>
<div>
<center>
<img src="http://z4.ifrm.com/30235/69/0/p1061144/YelNew.png" />
</center>
</div>
</td>
<td>
<div>
<center>
<img src="http://z4.ifrm.com/30235/69/0/p1061136/OJNew.png" />
</center>
</div>
</td>
<td>
<div>
<center>
<img src="http://z4.ifrm.com/30235/69/0/p1061050/New.png" />
</center>
</div>
</td>
</tr>
</table>


App Layout
Code: HTML
 
<div>
<center>
<img src="http://z4.ifrm.com/30235/69/0/p1061050/New.png" />
</center>
</div>

The div is for the actual app structure, rounded borders, drop shadow, etc.
The center is to center the image.
The image is what will be showing on our app icon.

Code: CSS
 
html, body {
background: #263F50;
color: #82A7BE;
text-shadow: 0px 2px 1px #000;
font-family: Sans-Serif;
}

Set a background and text color. Now we style our divs.
Code: CSS
 
div {
height: 70px;
width: 70px;
background: #263F50;
border-radius: 13px;
overflow: hidden;
box-shadow: 0px 3px 4px #000,
0px 0px 1px transparent,
inset 0px 1px 0px rgba(255, 255, 255, 0.2);
position: relative;
}

Make it a 70x70 square with a 13px border radius. Make sure overflow: hidden is set so that anything that doesn't fit inside our app is hidden.Give it a black and transparent box shadow and set the position to relative.
Now we add the gloss.
Code: CSS
 
div:before {
position: absolute;
content: '';
height: 35px;
width: 70px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.4)), color-stop(95%, rgba(255, 255, 255, 0.1)));
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 95%);
border-radius: 50px;
border-bottom-left-radius: 140px 30px;
border-bottom-right-radius: 140px 30px;
bottom: 35px;
}

Yep pretty complicated isn't it :P
Set the position to absolute and the content to nothing.
Height to 35 and width to 70px.
Now we have an RGBA background gradient. The reason we use RGBA is so we have an alpha gradient :P
GIve it a 50px top radius.
Give it a 140px 30px bottom right and bottom left radius.
Set the bottom to 35px and BAM, you have gloss.

Give the icon image a top margin to center it more.
Code: CSS
 
img {
margin-top: 11px;
}


Table and header styling.
Code: CSS
 
table {
margin: 125px auto;
}

td {
padding: 5px 14px;
}

h1, h2 {
margin-top: 65px;
}


Done.

Final Source:
Code: HTML
 
<title>How To Make An iPhone App Icon With Pure HTML & CSS</title>
<style>
html, body {
background: #263F50;
color: #82A7BE;
text-shadow: 0px 2px 1px #000;
font-family: Sans-Serif;
}

div {
height: 70px;
width: 70px;
background: #263F50;
border-radius: 13px;
overflow: hidden;
box-shadow: 0px 3px 4px #000,
0px 0px 1px transparent,
inset 0px 1px 0px rgba(255, 255, 255, 0.2);
position: relative;
}

div:before {
position: absolute;
content: '';
height: 35px;
width: 70px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.4)), color-stop(95%, rgba(255, 255, 255, 0.1)));
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 95%);
border-radius: 50px;
border-bottom-left-radius: 140px 30px;
border-bottom-right-radius: 140px 30px;
bottom: 35px;
}

img {
margin-top: 11px;
}

table {
margin: 125px auto;
}

td {
padding: 5px 14px;
}

h1, h2 {
margin-top: 65px;
}
</style>
<center>
<h1>Download the Outline App Today!</h1>
<h2>It's Not Real</h2>
</center>
<table>
<tr>
<td>
<div>
<center>
<img src="http://z4.ifrm.com/30235/69/0/p1061142/TealNew.png" />
</center>
</div>
</td>
<td>
<div>
<center>
<img src="http://z4.ifrm.com/30235/69/0/p1061134/GreNew.png" />
</center>
</div>
</td>
<td>
<div>
<center>
<img src="http://z4.ifrm.com/30235/69/0/p1061144/YelNew.png" />
</center>
</div>
</td>
<td>
<div>
<center>
<img src="http://z4.ifrm.com/30235/69/0/p1061136/OJNew.png" />
</center>
</div>
</td>
<td>
<div>
<center>
<img src="http://z4.ifrm.com/30235/69/0/p1061050/New.png" />
</center>
</div>
</td>
</tr>
</table>


Once again, the demo is in the attachment.
Attached to this post:
app.html (2.25 KB)
Posted Image

Professional web design/development services.http://wildandrewlee.com/
Off
Profile
Quote
Top
 
Joe
Member Avatar
Hi.
That's neat. :o
Joe
Off
Profile
Quote
Top
 
Alam
Member Avatar
Level 6
Why call it an iPhone app if it's meant to be viewed in chrome, safari, or ff 4? It's not bad, but it seems like it would need more work to work the best for anything mobile. (no hate though)
Posted Image
Credit to Sarah for the signature. <3

Spoiler: click to toggle
Off
Profile
Quote
Top
 
Nick
Member Avatar
Let it go, let it go, can't hold it back anymore!
♁ Gaia ♁
Sunday, 1. May 2011, 11:55
Why call it an iPhone app if it's meant to be viewed in chrome, safari, or ff 4? It's not bad, but it seems like it would need more work to work the best for anything mobile. (no hate though)
He meant the button looks like an iPhone app, and it can't be seen in IE since it's CSS3.

Nice job Pro, quite interesting :o
Ephex - A Development, Design & Community Discord

Posted Image

Nick | 'Atta Boy Luther! | Outline Manager | Ask Me!

Myy Stuff
Off
Profile
Quote
Top
 
Geoffrey
Member Avatar
It's a love story, baby just say yes
Nice doc. haha.
Consider this statement my permission to convert my themes to other platforms. Please link back to http://geoffreykoester.com. Be sure to rehost all theme images on the new platform as we do not know how long they will redirect. Also some boards hosting theme/skin images may not survive the move.

Posted Image

Other Sigs
Awards & Memories
Off
Profile
Quote
Top
 
Oracle
Member Avatar
Level 8
O_O Wow, that's so cool. I had no idea you could do this with CSS.
Visit my shop! Forum reviews, posting packages, recolors
Posted ImagePosted Image
Posted Image
Me!

Off
Profile
Quote
Top
 
tokyodrift
Member Avatar
Level 9
Aww, I thought this was going to be an iPhone theme. XD Still very cool, though! Nice job.
Off
Profile
Quote
Top
 
jackie
Member Avatar
Level 10
Outline Documentations
G E N E R A L

Documentation accepted in to the General database

Quote:
 

[9:15:40 PM] Michael: penis is salty
[9:15:42 PM] Michael: with a bit of tang
[9:15:48 PM] Michael: :|
[9:15:53 PM] Cody: erm
[9:15:55 PM] Jackie Chen: uhm
[9:16:02 PM] Justin Bieber: ......
Off
Profile
Quote
Top
 
Sith
No Avatar
Fblthp
Is there any reason you're using highly deprecated tags such as <center>?
Posted Image

Last.fm
Off
Profile
Quote
Top
 
Andrew
Member Avatar
ぼくたちがすべてはばか。
I have no idea :P
Posted Image

Professional web design/development services.http://wildandrewlee.com/
Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding & Development · Next Topic »

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..