http://www.developer.com/lang/css/using-css3-to-jazz-up-your-web-forms.html

Back to article

Using CSS3 to Jazz up your Web Forms


November 14, 2011

Introduction

A Cascading Style Sheet (CSS) is one of the most popular ways to apply a consistent look and feel to your website. CSS3 adds some useful features making it even more appealing for web designers and developers. In this article you will learn some new features introduced in CSS3 viz. table layout, non-standard fonts, transforms, transitions, corners and shadows. Though these features are applicable to any HTML page we will use ASP.NET web forms to demonstrate these features.

Table Layout using Master Pages

Many websites present their content in columnar fashion. Have a look at the following figure:

Image 1

In order to get the above layout developers either use HTML tables or CSS floating behavior. Both of these techniques have pros and cons of their own. CSS3 makes creating such a columnar layout easy by introducing display of type table, table row and table cell. Let's see how these display properties can be used.

Begin by creating a new ASP.NET website. Then add a themes folder to the website. Further, add a CSS file to themes folder and place the following CSS classes to the style sheet file.

.table 
{
    display: table;
    width:100%;
}

.row 
{
    display: table-row;
    width:100%;
}

.cellSideColumn
{
    display: table-cell;
    border: 1px solid #666666;
    padding: 10pt;
    width: 15%;
    height:200px;
}

.cell
{
    display: table-cell;
    border: 1px solid #666666;
    padding: 10pt;
}

.cellHeader
{
    display: table-cell;
    border: 2px solid #666666;
    width: 100%;
}

.cellFooter
{
    display: table-cell;
    border: 2px solid #666666;
    width: 100%;
    text-align:center;
    font-weight:bold;
    padding: 10pt;
}

Notice the display CSS property marked in bold letters. CSS3 introduces several new values for display property (see Visual Studio intellisense below) including table, table-row and table-cell.

Image 2

As you might have guessed, the values table, table-row and table-cell indicate table, table row and table cell respectively. Remember that these are merely display property values and not HTML markup. So, value of table doesn't mean <table> tag but merely indicates that the HTML element under consideration will have tabular layout.

Once you add the above CSS classes, add a Master Page to the website and key-in the following markup to it.

<%@ Master Language="C#" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <title>Three Column Layout using CSS3</title>
</head>
<body>
    <div class="table">
        <div class="row">
            <div class="cellHeader">
            <asp:Image ID="imgLogo" runat="server" ImageUrl="~/images/logo.png" ></asp:image>
            </div>
        </div>
    </div>
    <div class="table">
	    <div class="row">
		    <div class="cellSideColumn sideColumn">This is first column</div>
            <div class="cell mainColumn">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

                </asp:ContentPlaceHolder>
            </div>
	    <div class="cellSideColumn sideColumn">This is third column</div>
	    </div>
    </div>
    <div class="table">
        <div class="row">
            <div class="cellFooter">
            Copyright (C) 2011. All rights reserved.
            </div>
        </div>
    </div>
</body>
</html>

Notice, the above markup carefully. It uses <div> tags to define the columnar layout. The <div> tags have CSS classes table, row, cell and so on. To test the columnar layout in action, add a new web form and set its MasterPage and Theme properties to appropriate values.

<%@ Page Title="" Language="C#" MasterPageFile="~/CSS3/TableLayout.master" Theme="DefaultTheme" %>

The following figures shows how the web form looks like in the browser.

Image 3

Non-standard Fonts

Using fancy non-standard fonts always poses problems for web designers and developers. Non-standard fonts used on a web page render differently in the client browser if the client machine doesn't have them installed. Though alternate techniques such as allowing the users to download fonts and font embedding are possible they create problems of their own. As a result developers tend to stick with a standard set of fonts which are guaranteed to be present on the client machine. Luckily CSS3 offers an elegant solution by allowing you to create a custom font definition. The font, if not present, is then downloaded at the client end automatically. Let's see how this works.

Add the following font definition to the CSS file you created in the previous example.

 @font-face 
{
  font-family: MyFont;
  src: url('Calligraffiti-webfont.woff');
}

Here, you are creating a new font using @font-face definition. The font family name MyFont is any custom name assigned by you to this definition. You will be using this name further in the style sheet. The src property points to the .woff file of the font so that the client browser knows where the font resides. Once the @font-face definition is ready you can use it as shown below:

.myHeaderFont 
{
  font-family: MyFont;
  font-size: 60px;
}

The following figure shows a <div> tag with myHeaderFont class attached.

Image 4

Transforms and Transitions

CSS3 transforms allow you to apply certain effects to an element thus transforming its appearance. Common transforms include Rotate, Skew and Scale. Let's see how these transforms can be applied to a <div>. Place a FormView control and SQL data source control on the content web form and configure it to fetch records from Employees table of Northwind database. Part of the FormView markup is shown below:

 <div class="div rotate">
  <asp:FormView ID="FormView1" runat="server" AllowPaging="True" 
        DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1">
   ...
  </asp:FormView>
</div>

As you can see the <div> acts as a container to the FormView control and has two CSS classes - div and rotate. These CSS classes are as follows:

.div
{
    padding:10pt;
    border:thick #666666 solid;
    width:300px;
}

.rotate 
{
  -ms-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
}

Have a look at the rotate CSS class. It uses CSS3 transforms and specifies rotation angle of 7 degrees. This way the <div> element will appear to be rotated by the specified angle. Note that we have used browser specific CSS properties (-ms for IE, -moz for FireFox etc.). Depending on your browser one of them will be in effect and the others will be ignored. The following two figures show how the FormView looks like at run time:

Image 5

Notice how the <div> and its contents appears to be rotated. On the same lines you can apply skewing to an element. The following CSS class does just that and the figure that follows shows the resultant FormView.

.skew 
{
  -ms-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
}

Image 6

CSS transitions allow you to add fancy effects on elements when, say, mouse is hovered over them. Consider the following CSS classes.

.transition 
{
    transition: transform .5s ease-in;
    -moz-transition: -moz-transform .5s ease-in;
    -o-transition: -o-transform .5s ease-in;
    -webkit-transition: -webkit-transform .5s ease-in;
}

.transition:hover 
{
    -ms-transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
}

The transition class uses transition property that specifies three things - property to be transitioned (transform property in this case), duration of the transition and type of transition. If you run the web form again and hover over the FormView you will find that it rotates by 7 degrees due to transition applied to the container <div> element.

Corners and Shadows

Another welcome addition to CSS is the ability to have rounded corners for bordered elements and shadows for text and elements. Consider the following CSS class. 

.roundedcorners 
{
  border: 10px solid #666666;
  border-radius: 25px 0px 25px 0px;
  -moz-border-radius: 25px 0px 25px 0px;
  border-color:#666666;
}

.shadow
{
  box-shadow: 11px 11px 11px #777;
  -moz-box-shadow:11px 11px 11px #777;
  text-shadow: 2px 2px 7px black;
  font-size:12px;
}

The roundedcorners CSS class specifies border-radius property. You can specify radius for all the four corners of the border starting in clockwise direction i.e. top left, top right, bottom right and bottom left. The shadow CSS class uses box-shadow and text-shadow properties to specify shadow for entire box and text respectively. The first two values are shadow size in X and Y directions, third value is feathering and the last value is shadow color. The following figure shows how a <div> with roundedcorners and shadow class applied.

Image 7

Summary

CSS3 introduces new ways to jazz up your HTML markup. New tabular display property values make it easy to design a columnar layout without using HTML tables or CSS floating. You can use non-standard fonts without worrying about client machine not supporting them. The @font-face definition provides the necessary details to the browser about the location of the font file. Using transforms, transitions, shadows and rounded corners you can make your web pages more interactive and animated without using any client side script. Though not all browsers support these features in a standard way, you can make use of browser specific CSS properties. We can expect standardization and enhanced support in the future as CSS3 specifications mature.

Sitemap | Contact Us