0

I'm currently trying to create a login page with the exact same input boxes which appear on the login screen on the Facebook app for iPad, however, I'm having no luck. I'm trying to do this using CSS3. I've attached an image for reference - Many thanks to anyone who might be able to help!

iPad Facebook App

I appreciate any responses - Many Thanks

Adam H
  • 1,159
  • 3
  • 15
  • 27
  • Keep in mind that I believe the Facebook app for iOS is now done entirely in native code instead of being a wrapper for html/css/javascript. You may have a hard time getting browser consistency for this without also using javascript or graphics – rossisdead Sep 23 '12 at 00:01
  • That's fine - If I can get it working like this in Chrome, I'm happy. Since it's a business app which will be largely restricted to the 'default' work browser (Chrome). – Adam H Sep 23 '12 at 10:08

1 Answers1

2

Check out radial gradients for the background glow http://www.impressivewebs.com/css3-radial-gradient-syntax/

The rounded edges are likely border-radius properties. http://www.css3.info/preview/rounded-border/

Centering it in the middle: http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/

Get rid of text input borders: How to remove border (outline) around text/input boxes? (Chrome)

Placeholder text for input boxes: http://www.paciellogroup.com/blog/2011/02/html5-accessibility-chops-the-placeholder-attribute/

Hope these tuts help

Community
  • 1
  • 1
AJcodez
  • 31,780
  • 20
  • 84
  • 118