Designing with cSS3

12. At this point you will want to save “menu.css” and preview your page.

You now have a 100% CSS menu structure. Again, you will see there is no JavaScript here.

The improvements in CSS3 give you more opportunities for creativity. This can be clearly seen in the final step of this project:

adding a timeline to your page. Each timeline item in the follow-ing figure will now change as your roll your cursor over it.

Figure 2.17Proj CSS3 techniques and advanced CSS class and element control were used to create this timeline.

Unlike the menu system created before, you will create the whole timeline using just HTML and CSS, as follows. No stinking images here!

1. Let’s start with creating a new web page. In the News folder, add a file named “timeline.html.” You can also save one of your files with a new name.

2. Open “timeline.html” and locate the ARTICLE element with the ID “article_one.” Delete any content in the ARTICLE so you have a clean page. Also remove any inline CSS style in the ARTICLE element. The HTML for the ARTICLE should look as follows.

4. At this point you have created the placeholder for your content.

The content itself is, as with the navigation, controlled using LI elements. The timeline is actually created using two lists. The first list is used for the highlighted elements and the second is used to show the different milestone markers. Both lists are placed within the SECTION element.

5. The first list uses the following code.

<ul>

122

ProjeCT 2: APPLying CSS3 To your Web DeSign

Notice that the TIME element is being used to highlight the months.

6. The second list is used to define the quarters. Following is the HTML code to create the second list below the first list.

<ul>

Figure 2.18Proj shows the lists currently. Now you are ready to crack open your CSS skills and turn the lists into art.

7. Start by creating a new CSS file named “timeline.css” and save it to your CSS folder.

8. Open “timeline.html” and add a reference to “timeline.css.”

You need to modify the link because the “timeline.html” file is in its own subfolder. The following code will point to the file.

You will see that there are leading “..” in front of the file. This tells the HTML to load a file from a folder above the folder you are currently in.

type=“text/css” />

type=“text/css”>

type=“text/css”>

9. The easiest section of the timeline to create is the markers along the bottom. You will see that the markers are all equally spaced. This is controlled through a class file called “inter-vals.” The intervals class modifies the UL element. The follow-ing removes the standard bullet point used in an unordered list.

10. The timeline code is extendable, so you can add it to any page.

For this reason, a percentage is used to control the width of the items. The width depends on the number of intervals. For example, 100/5 = 20%; then subtract a little bit of room for the borders. In this case you will see that the width is set to 19.5%. Many of the pages font settings identified in the CSS document “style.css” are inherited. For this reason, the font Figure 2.18Proj The lists do not

look like the timeline, yet!

SansationRegular is used as the default font-family. Other properties are overridden in the following definition.

ul.intervals li {

background: #fff;

border-right: 1px solid #ccc;

color: #999; display the CSS correctly. Below is the list with a reference to the intervals class. elements are equally spaced across the screen. What would tidy up the design, however, is a gray border on the left side of the first element. CSS allows you to inherit styles. Go ahead and add a class to the first element in the list; name the class “first.”

<li class=“first”>1st Quarter</li>

13. In your “timeline.css” file, add the following CSS definition.

ul.intervals li.first {

border-left: 1px solid #ccc;

}

14. It is very interesting what is happening here. You are referenc-ing a class called “first” that is associated with the LI element, but it must also be contained within the class called “ intervals”

in the UL element. Figure 2.19Proj shows you how it all looks when packaged together.

15. The next step is to create the items in the timeline. The items use two CSS techniques to define the content. The first is to create the general presentation of each item; the second is to finely tweak the presentation of each item. Let’s get started by adding a new class to the leading UL element in the list. Name the new class events as shown in the following.

124

ProjeCT 2: APPLying CSS3 To your Web DeSign presentation of the UL with the class name events to have no formatting. the page. It will come as no surprise that the border-radius is being used to create the rounded corners of the rectangles.

The text color, padding, and alignment are modified, but the font-family style is inherited from the main page.

ul.events li {

-webkit-border-radius: 11px;

-moz-border-radius: 11px;

border-radius: 11px;

background: #eee;

border: 1px solid #ddd;

Figure 2.19Proj The intervals defining each quarter are added to the bottom of the HTML.

color: #707070;

font-size: 1.2em;

font-weight: bold;

margin-bottom: 6px;

padding: 3px 0;

position: relative;

text-align: center;

}

18. Save your files. When you preview your web page you will see that each item now has rounded corners (Figure 2.20Proj).

19. Inline styles within each list item can be used to control the width and starting point from the left. The following HTML code now includes the inline style you can use to format each item (see also Figure 2.21Proj).

<li style=“width: 42%; left: 22%;”>New Grass Seed

<time>(April-August)</time>

</li>

<li style=“width: 55%; left: 18%;”>Lawn Care

<time>(March-November)</time>

</li>

Figure 2.20Proj each item in the timeline now has rounded corners.

Figure 2.21Proj The events in the timeline are now spaced correctly.

126

ProjeCT 2: APPLying CSS3 To your Web DeSign

<li style=“width: 404%; left: 28%;”>Harvest Tools

</li>

<li style=“width: 100%; left: 0%;”>Research

</li>

<li style=“width: 45%; left: 3%;”>New Sales

<time>(January-September)</time>

</li>

<li style=“width: 75%; left: 0;”>New Crop Cycle

<time>(January-November)</time>

</li>

20. There are a few minor CSS styles you can apply to format the content further. Each item listed contains a TIME element.

The following will format text in the TIME element.

ul.events li time { color: #aaa;

font-weight: normal;

font-size: 0.9em;

}

21. The final effect you can apply is some simple animation. As you move the cursor over each item in the timeline, you can transition the styles from one format to another. To do this you need to modify ul.events li and add a hover pseudo type by adding the transition property.

ul.events li {

-webkit-border-radius: 11px;

-moz-border-radius: 11px;

border-radius: 11px;

-webkit-transition: all 0.5s linear;

-moz-transition: all 1s linear;

transition: all 1s linear;

background: #eee;

border: 1px solid #ddd;

color: #707070;

22. The following is the hover pseudo class. Three properties are highlighted. The transition will happen over 0.5 seconds with just these properties, leaving the remainder intact.

ul.events li:hover {

background: #707070;

border: 1px solid #ddd;

color: #eee;

}

23. The final step is to place the whole timeline content onto the web page. The following HTML modifies the leading ARTICLE element to place everything on to the page.

<article id=“article_one” style=“position: absolute;

left: 300px; top: 100px; width: 500px; z-index: 2;”>

24. Save your content and view your cool, interactive timeline as shown in Figure 2.22Proj.

It is important to recognize that the effects you have accom-plished in this chapter do not require JavaScript. This is all 100%

CSS.

Summary

Cascading Style Sheets are a powerful way to control the pre-sentation of content in your web pages. HTML5 introduces CSS3 embedded fonts, rounded corners, transformation, and anima-tion. The project you have created here illustrates how you can easily add these complex technologies.

Advanced CSS solutions, such as the menu and timeline tool, do take more time to create, but illustrate how flexible CSS is becoming. You can, of course, extend the styles and create addi-tional styles to format specific areas of content. This is just a springboard to launch your creativity.

At this time you have all core styles needed for the site. Save your style sheet and view your web site. It looks different, doesn’t it?

Figure 2.22Proj you can now move the cursor over each item, triggering a subtle transition.

HTML5. doi: 10.1016/B978-0-240-81328-8.00009-4

177 HtML5 RicH Media

In document HTML5 Web Designer (Page 123-131)