Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

Share this Page URL
Help

CHAPTER 3: CSS3 and iOS Styling > Styling for iOS - Pg. 55

CHAPTER 3 CSS3 AND IOS STYLING Text Effects There are many new text properties with CSS3; the ones we care most about when styling our iOS app are the text shadow and word wrap properties. Text Shadow The text shadow simply adds a shadow to the text with the following format, text-shadow: horz-shadow vert-shadow blur color; where the horz-shadow and vert-shadow represent the horizontal and vertical shadows, the blur represents the blur distance, and the color is the color of the shadow. h1.title {text-shadow:2px 2px #ccc;} Typically I would use a text shadow for text in a header or a button to give it a more native look and feel. Word Wrap This permits you to allow an element that might have unbreakable words broken so that content does not scroll unintentionally. Article {word-wrap:break-word;} There are other text properties defined in CSS3 including: hanging-punctuation, punctuation-trim, text-align-last, text-emphasis, text-justify, text-outline, text-overflow, text-wrap, and word-break. This concludes a short reference of what's new in CSS3. Next we take what we've learned from CSS3 and apply it to making our ugly web app look like an iOS app. Styling for iOS Making our web app look like a native iPhone or iPad app is critical to its design. The main reason is that users are used to interacting with these devices in a certain way. Although you could make your application "work" without any iOS styling whatsoever, your adoption curve will take a serious hit. What I do over the remainder of the chapter is show you how to perform some basic iOS styling techniques such as styling a list and button, or making use of the overflow and fixed positioning. Styling a Header All you need to do to create a header is add some CSS. I've added this to the file /chapter3/css/sample.css. Companion Site Reference Example 3-6: Follow the link below to run this example on the companion site. http://www.learnhtml5book.com/chapter3/sample_header.php 55