Styling the Tabs View

Listing 29.8 shows the CSS code that is used to style the tabbed views defined in the sections above so that you can see why things look and act as they do. The code is compact to fit in the book. Notice that as you click on different tabs, the view changes. Figure 29.1 shows the different rendered views and gives you a preview of what is to come.

Listing 29.8 rich_ui_styles.css: Implementing the CSS styles for the tabbed views

Click here to view code image

01 .tab{display:inline-block; width:100px; cursor: pointer;
02   border-radius: .5em .5em 0 0; border:1px solid black;
03   text-align:center; font: 15px/28px Helvetica, sans-serif;
04   background-image: -webkit-linear-gradient(top, #CCCCCC, #EEEEEE) }
05 .activeTab{border-bottom:none;
06   background-image: -webkit-linear-gradient(top, #66CCFF, #CCFFFF) }
07 .pane{border:1px solid black; margin-top:-2px;
08   background-color:#CCFFFF; height:450px; width:700px;
09   padding:10px; }

Figure 29.1 The tabbed views allow you to quickly change content without reloading from the server.