Form Styles with a Splash of CSS3

Form Styles with a Splash of CSS3

About 75 percent of the preceding CSS is a mix of CSS1 and CSS2, which has been around now for some time. However, there is also a smattering of CSS3, and most of this is quite new. This stylesheet includes some WebKit-specific CSS3 definitions that

CHAPTER 2: Building a Mobile HTML Entry Form

enable us to make our form look very nice without requiring the use of external image resources.

NOTE: The CSS3 specification (like the HTML5 specification) is not yet finalized. For this reason, the CSS3 definitions here are implemented using the proprietary -webkit prefix (for the WebKit browser family, other browsers will implement their own proprietary prefix). This indicates that the folks at WebKit are confident that these sections of the CSS3 spec will make the final cut. Once the CSS3 specification is locked down, then the -webkit prefix will be dropped and replaced by the standard name.

As an example, -webkit-box-shadow will simply become box-shadow. This is definitely worth keeping in mind when building your mobile application—especially given that there is nothing stopping someone from installing a different mobile browser on their Android device. If you want your web app to display in browsers other than WebKit, try to use proprietary CSS3 extensions for eye candy only. Either that or include definitions for the other browser-rendering engines that you want to support in the style definitions also.

Let’s have a brief look through the CSS3 extensions used in this example (more detail is provided in the Appendix of the book).

appearance (-webkit-appearance)

This CSS3 property is used to tell the browser what type of native of control we would like to be displayed. There are many different control types that can be specified. For this example and many other instances, it is simplest just to set the appearance to none and to apply the look and feel through surrounding elements.

border-radius (-webkit-border-radius)

The border-radius property provides a very simple and nice way of applying a border to your HTML elements. In addition to being able to specify the corner radius for all corners of your element with this property, you can specify specific and different radii for each individual corner using the following properties:

border-bottom-left-radius border-bottom-right-radius border-top-left-radius border-top-right-radius

A radius property will take either one parameter that specifies the overall corner radius, or two parameters, specifying the horizontal radius and vertical radius for the corner(s), respectively.

32 CHAPTER 2: Building a Mobile HTML Entry Form

box-shadow (-webkit-box-shadow)

The box-shadow property is used to apply a shadow to HTML elements without requiring external image resources—very nice. The property takes four parameters that allow you to specify how the shadow should appear:

Horizontal offset: This defines where the shadow should be positioned relative to the control in the horizontal direction. Positive values position the shadow to the right of the control, and negative values position it to the left.

Vertical offset: This works like the horizontal offset, but on the vertical axis. Positive values position the shadow below, and negative values position it above.

Blur radius: This specifies the radius for the blur effect. Basically, bigger numbers mean a larger shadow that fades out gradually; smaller numbers mean a smaller, crisper shadow.

Shadow color: This specifies the color of the shadow—pretty self explanatory, really. Most commonly, you’ll be using shades of gray here, but colors can be used to create glow effects.

gradient fill style (-webkit-gradient)

So far, we’ve used shadows and rounded corners in our form; now we’ll take a look at using gradients, which can help capture the visual appeal of many current mobile apps. Gradients in CSS3 are not implemented as a CSS3 property, but rather as a fill style— and they are very powerful and quite configurable. I’m sure there are whole chapters dedicated to gradients in a CSS3 book, so I won’t attempt to cover all the detail here. Essentially, there are two types of gradients: linear and radial. This chapter’s example uses a linear gradient, so I’ll cover that here. Specifying a linear gradient requires a minimum of five parameters (to actually make a gradient effect occur), but more can be used to specify additional color stops.

Gradient type: This is the type of gradient you are going to display— linear or radial.

Point 1: This is the starting point of the gradient. It’s a pair of space- separated values that specifies the position. We used names in our example (left top and left bottom), but additionally numeric values (in the range of 0.0 to 1.0) or percentages can be used.

Point 2: This is the ending point of the gradient.

CHAPTER 2: Building a Mobile HTML Entry Form

Stop 1: This is the starting color stop. Defining a color stop is done using the color-stop function. The function takes two arguments. The first specifies the relative position between point 1 and point 2 at which the color is used. You can use numbers or percentages to define the position. If using numbers,

0.0 equates to “at point 1” and

1.0 equates to “at point 2.” Using percentages, 0.0 is equivalent to 0 percent and

1.0 is equivalent to 100 percent. The second argument is used to define the color that will be used at the specified position.

Stop 2: This is the next color stop. To create a gradient effect, only two stops are required, but more can be specified.

This should start to make more sense when you look at the example in the preceding code sample. If it doesn’t, however, then I’d suggest that you just flip to the reference section and have a look at some gradient samples.