https://github.com/naipofo/skeuomorphic-ios-css

recreation of pre ios7 skeuomorphic design in css
https://github.com/naipofo/skeuomorphic-ios-css

apple css ios ios-skeuomorphic recreation skeuomorphic

Last synced: about 1 year ago
JSON representation

recreation of pre ios7 skeuomorphic design in css

• Host: GitHub
• URL: https://github.com/naipofo/skeuomorphic-ios-css
• Owner: naipofo
• Created: 2020-09-26T02:06:22.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-11-02T07:55:16.000Z (over 5 years ago)
• Last Synced: 2025-03-25T21:11:52.844Z (over 1 year ago)
• Topics: apple, css, ios, ios-skeuomorphic, recreation, skeuomorphic
• Language: CSS
• Homepage:
• Size: 580 KB
• Stars: 12
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# ios skeuomorphic design recreation in CSS + HTML

This is an *almost* pixel perfect recreation of ios 4 skeuomorphic design forms. I plan on recreating anything pre ios7 here.

There is a lot of annoyances in skeuomorphic design that apple uses. For example the borders around the buttons on the dialer are a shade lighter than the lightest part of the button, so you can't use transparency to define those.

## dialer

| ios 4.2 | css + html |

| ------------ | ------------ |

| ![](https://raw.githubusercontent.com/naipofo/skeuomorphic-ios-css/master/screenshots/ios-dialer.png) | ![](https://raw.githubusercontent.com/naipofo/skeuomorphic-ios-css/master/screenshots/css-dialer.png) |

## notes

| ios 4.2 | css + html |

| ------------ | ------------ |

| ![](https://raw.githubusercontent.com/naipofo/skeuomorphic-ios-css/master/screenshots/ios-notes.PNG) | ![](https://raw.githubusercontent.com/naipofo/skeuomorphic-ios-css/master/screenshots/css-notes.png) |

Feel free to recreate any other ios forms and pull request here.

I'm not adding any licences here, cause I'm not sure about copyright when it comes to projects like those.

Use this at your own risk 🤷‍♀️