| How To Make An iPhone App With CSS | |
|---|---|
| Tweet Topic Started: Sunday, 1. May 2011, 10:03 (707 Views) | |
| Andrew | Sunday, 1. May 2011, 10:03 Post #1 |
![]()
ぼくたちがすべてはばか。
|
I couldn't wait for resource weekend ![]() This is best viewed in Chrome and Safari and FireFox 4 Demo - ATTACHMENT First we set up our layout.
App Layout
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.
Set a background and text color. Now we style our divs.
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.
Yep pretty complicated isn't it ![]() 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 ![]() 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.
Table and header styling.
Done. Final Source:
Once again, the demo is in the attachment. |
![]() Professional web design/development services. • http://wildandrewlee.com/ | |
Off
Profile |
Quote Top
|
| Joe | Sunday, 1. May 2011, 11:33 Post #2 |
![]()
Hi.
|
That's neat.
|
| Joe | |
Off
Profile |
Quote Top
|
| Alam | Sunday, 1. May 2011, 11:55 Post #3 |
|
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) |
![]() Credit to Sarah for the signature. <3 Spoiler: click to toggle
| |
Off
Profile |
Quote Top
|
| Nick | Sunday, 1. May 2011, 12:03 Post #4 |
|
Let it go, let it go, can't hold it back anymore!
|
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
|
Ephex - A Development, Design & Community Discord![]() Nick | 'Atta Boy Luther! | Outline Manager | Ask Me! Myy Stuff
| |
Off
Profile |
Quote Top
|
| Geoffrey | Sunday, 1. May 2011, 14:48 Post #5 |
![]()
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.![]() Other Sigs Awards & Memories
| |
Off
Profile |
Quote Top
|
| Oracle | Monday, 2. May 2011, 05:15 Post #6 |
![]()
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![]() ![]() ![]() Me! | |
Off
Profile |
Quote Top
|
| tokyodrift | Monday, 2. May 2011, 05:47 Post #7 |
|
Level 9
|
Aww, I thought this was going to be an iPhone theme. Still very cool, though! Nice job.
|
Off
Profile |
Quote Top
|
| jackie | Monday, 23. May 2011, 17:45 Post #8 |
![]()
Level 10
|
Outline Documentations G E N E R A L Documentation accepted in to the General database |
| |
Off
Profile |
Quote Top
|
| Sith | Tuesday, 24. May 2011, 12:08 Post #9 |
Fblthp
|
Is there any reason you're using highly deprecated tags such as <center>? |
![]() Last.fm | |
Off
Profile |
Quote Top
|
| Andrew | Tuesday, 24. May 2011, 15:54 Post #10 |
![]()
ぼくたちがすべてはばか。
|
I have no idea
|
![]() 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 » |
| Track Topic · E-mail Topic |
8:15 PM Jul 10
|
Powered by ZetaBoards Premium · Privacy Policy



Multi
Multi





































Thank you Brendan for the image! 
Still very cool, though! Nice job.



8:15 PM Jul 10


Outline Live