CSS3 User Interface Tutorial

Creating great website with standardized user friendly displays, designers currently have to rely on scripts like JavaScript and JavaScript libraries like jQuery. The CSS3 User Interface module introduces several new features that will enable web designers to enhance and standardize the user experience with little effort and no scripting.

Appearance

The appearance property allows you to change any element into one of several standard user interface elements. For example, it will let you convert any element into a menu or window.

Here is the syntax for the property.

Value	Description
normal	Default. Displays the element as it is.
icon	Displays the element as a small icon.
window	Displays the element as a viewport
button	Displays the element as a button
menu	Displays the element as a set of options for the user to choose from
field	Displays the element as an input field

At the moment, this property is not widely supported. Firefox supports this property with a –moz- prefix. Chrome and Safari support it with the –webkit- prefix. Even in these browsers, button is the only value they support.

Let us look at an example to see how this property works. In this example we will convert a set of six <a> tags to display like a calculator. Here is the html we will be styling.

Calculator <input type="text" value="" />

<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>

<a href="#">Seven</a>
<a href="#">Eight</a>
<a href="#">Nine</a>

Now we will apply a single style to all the <a> tags. We will set the appearance property to button. Since this property is only supported in Firefox, Safari and Chrome with prefixes, we will need to include those versions in the style sheet.

a
{
width:4%;
padding:3%;
color:#cd2626;
text-decoration:none;
text-align:center;
appearance:button;
-moz-appearance:button;
-webkit-appearance:button;
}

Here is what it looks like in the browser.

As you can see the browser treats these buttons like standard buttons. When you click on any of the links, the browser will display a button being pressed down.

Box-sizing

In the classic box-model, when you specify a height and width in the style sheet you are actually specifying the width and height of the content-box. The full width and height of the element rendered on the page will be larger if you add padding and border to your element.

For example, suppose you have the following style.

div {
width:250px;
border:10px solid black;
}

The actual width of your element will be 250px of the content-box, plus 10px of your left side border, plus 10px of your right side border for a total of 270px.

The new box-sizing property allows you to change how the browser calculates the size of the element box. This property has 3 values- inherit, content-box and border-box. Content-box is the default value. It is how all elements are rendered without the box-sizing property. The real change happens when you set the property’s value to border-box. When the value is set to border-box, the width you specify for the element will be the total width of the element when it is rendered in the browser. The browser will not add the border width outside the content-box as usual. Instead it will render the border within the specified width.

To get a clearer sense let us look at an example. We will style three boxes with their box-sizing property set to content-box. While this property is broadly supported in most browsers, we will need to include –moz- and –webkit- prefixes for Firefox and Safari .

#box1
{
width:270px;
height:150px;
border:10px solid white;
box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
font-size:110%;
font-weight:bold;
text-align:center;
}

#box2
{
width:250px;
height:150px;
border:10px solid white;
box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
font-size:110%;
font-weight:bold;
text-align:center;
}

#box3
{
width:250px;
height:150px;
border:10px solid white;
box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
font-size:110%;
font-weight:bold;
text-align:center;
}

Here is what it looks like in the browser.

When the box-sizing is set to content-box, the browser displays the elements in their default mode. As you can see in the above image, the borwser is adding the left and right borders to the width and displays an element with a larger width than was specified. Now let us change the box-sizing properties of box1 and box3 to border-box.

#box1
{
width:270px;
height:150px;
border:10px solid white;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
font-size:110%;
font-weight:bold;
text-align:center;
}

#box2
{
width:250px;
height:150px;
border:10px solid white;
box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
font-size:110%;
font-weight:bold;
text-align:center;
}

#box3
{
width:250px;
height:150px;
border:10px solid white;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
font-size:110%;
font-weight:bold;
text-align:center;
}

Here is what it looks like in the browser.

For boxes 1 and 3, the browser has now forced the border inside the specified width. The display size of each box has changed as result. The display width of these boxes are now the same as the specified width.

Resizing

The next property we will look at is probably one of the most fun new user interface properties. The resize property lets you give users control over the size display of any element on a webpage. The resize property has four values –none, both, horizontal and vertical. These values determine what the user is allowed to resize.

To see this property in action, we will create two boxes with identical content. We will then apply a specific style to one of these boxes. In the style resize property with be set to the value -both. To make the display clearer it will be helpful to set three of the box’s borders to rounded borders.

#resize_box
{
width:10%;
height:30px;
overflow:hidden;
border-top-right-radius:25px;
border-top-left-radius:25px;
border-bottom-left-radius:25px;
resize:both;
}

Here is what it looks like in the browser.

Browsers will display resizable elements with a visual hint on the lower right hand corner. In the image above, you can see the lines at the bottom right corner, indicating a resizable element. When a user clicks and drags out the element, the element will resize. As the element resizes it will displace all other elements around it. Here is what that process looks like in the browser.

Outline offset

The last property we will learn about from the User Interface module will be the outline-offset property. This is a very simple property to understand. The outline property is part of CSS2. An outline is rendered outside the border of an element. The outline property for an element can be styled just like the border property. However, it is not included as part of the box-model and therefore not added to the width of the element being displayed. The outline is typically rendered right outside the border with no space between the border and the outline.

The outline-offset property allows you to insert a space between the border and outline of an element. The value of this property is a length. Let us look at a simple example with two boxes of the same size content, border and outlines. For one of these boxes we will use the outline-offset property to create a space between the border and the outlines.

#offset_box { outline-offset:20px;}

Here is what it looks like in the browser.

For the box on the left, there is no space between the outline and the border. This is the default for the outline property. For the box on the right, there is now a 20px space between border and the outline.

CSS3 User Interface Tutorial

Leave a Reply