Professional Documents
Culture Documents
The <!DOCTYPE> Element The <header> Element The <nav> Element The <article> Element The <time> Element The <aside> Element The <section> Element The <footer> Element
3 5
7 7 8 8 9 10 10 11
INTRODUCING CSS3
The border-radius Property The box-shadow Property The text-shadow Property The @font-face Declaration The transition Property
12
13 14 15 15 16
19
19 19 20 21
22
22 23 23 23 24
25 30
There are two things that are special about this page: 1) Its written in HTML5 and CSS3, and 2) It will work in any current browser. Thats right you can start using this new technology today! Over the next two chapters, well walk you through the steps we took to make this page. By the time you finish this guide, you will be able to create simple page designs using HTML5 and CSS3. Lets get started
Now, lets take a look at the code that makes it possible. Weve included the full code for this page in Appendix A (Page 25), so you can take a look at it in its entirety. Youll notice a lot of familiar HTML elements in that block of code old pals like <div>, <ul>, <h1>, and the rest of the gang but there are a few new faces there too. Everything we cover in this example can be used in current browsers
including Internet Explorer, just as long as you paste this code into the <head> section of your document: <!--[if IE]> <script src=http://html5shim.googlecode.com/svn/trunk/html5.js></script> <![endif]--> This link, a handy piece of JavaScript called HTML5 Shim, helps translate HTML5 for IE so it can render pages correctly. Well spare you the technical details about how it works, but as long as you remember to post this just before your </head> tag, your new designs will work just fine in IE.
<!DOCTYPE html>
Thats right, with just two words, you achieve the same effect as the <!DOCTYPE PUBLIC -//blah blah blah> mess weve all grown to know and loathe. The best part? Its totally backwards-compatible, which means that you can use this code to specify the DOCTYPE even if youre using HTML 4.01 or XHTML 1.0. Why would you want to do that? Well, if youre going to be switching over to HTML5 eventually anyway, you may as well start here. So go ahead, what are you waiting for?
The <header> element is a good example of how HTML5 strives for more semantic markup. See, browsers, search engines, and assistive devices interpret header elements as text, but theres no special meaning there to set them apart from any of the other text on the page. With HTML5, they know that anything inside the <header> elements is, well, a header. This means they can interpret them more appropriately. That idea of appropriate interpretation is the driving force behind HTML5.
There are actually a few different ways to format the datetime attribute value (the bit between the quotation marks): <time datetime=2010-06-08>June 8, 2010</time> <time datetime=2010-06-08T09:00Z>9 a.m. on June 8, 2010</time> <time datetime=2010-06-08T09:00+06:00>9 a.m. on June 8, 2010 in Asturias, Spain</time> Dates are always written out in YYYY-MM-DD format, and you can append them with the specific time, if you want. To do this, put a T right after the date, followed immediately by the time, formatted like so: HH:MM:SS. (Note: Seconds are optional. If you dont want to include them, just omit the :SS bit.) Finally, append the whole kit and kaboodle with either: Z: This sets the time to Coordinated Universal Time (UTC). +HH:DD or -HH:DD: This allows you to set time-zone offsets from UTC. Using +HH:DD format adds the amount of time you specify to your current time; using -HH:DD format subtracts the specified time.
10
11
INTRODUCING CSS3
For years, designers have used images and JavaScipt to create basic design elements like boxes with rounded corners or simple gradients. Although these methods work, they often require a lot of coding to pull off and result in long download times for the user. CSS3 aims to eliminate this less-than-ideal situation. Using the magic of CSS3, you can add text and box shadows, create gradients, and use custom fonts. At this time, most browsers support CSS3; in fact, the only exception is Internet Explorer, which wont support it until mid-2011. Fortunately, theres an easy work-around for those who want to start using CSS3 right away. Just create two separate style sheets, one in the current version of CSS and the other in CSS3. (The former is for IE, and the latter is for all the other browsers.) Next, just put this code in the <head> section of your HTML document: <link rel=stylesheet href=css3style.css type=text/css media=screen charset=utf-8 /> <!--[if IE]> <link rel=stylesheet href=style.css type=text/css media=screen charset=utf-8 /> <![endif]--> This code tells the browser to use the CSS3 style sheet (css3style.css), unless its IE, in which case it should use the current CSS style sheet (style.css). Now, lets start learning about CSS3! We included the full CSS3 code for our sample webpage in Appendix B (Page 30). For the rest of this section, well take a closer look at some of the new CSS3 properties we used to achieve this style, as well as a couple others that you should know about.
Browser
Firefox Safari Google Chrome
Prefix
-moz-webkit-webkit-
Example
moz-border-radius: 10px; webkit-border-radius: 10px; webkit-border-radius: 10px;
Heres an example of how a CSS3 property, box-shadow, would look in a style sheet:
12
Creating that effect with old-timey technology is surprisingly technical, and it involves four images and about a page and a half worth of code. But with CSS3, you can do the same thing using the borderradius property. Heres the style we used in our sample webpage: #intro a { color: #fff; background-color: #333; font: normal bold 14px/44px arial, Helvetica, sans-serif; padding: 10px; margin-right: 40px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-align: center; } Basically what the border-radius property does is allow you to specify the radius, measured in pixels, of the slope of the corner. There are a couple different ways you can specify the roundness of your corners. In our example, we set all the corners to 5 pixels at once. If for whatever reason you wanted your corners to have different radii, youd list the different pixel measurements in the following order: top, right, bottom, and left (you can remember this using the mnemonic trouble TRBL): nav { -moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; } To set the radius of a single corner, use one of these versions of the border-radius property: 13 border-radius-topleft
And heres the code we used to create it in our sample style sheet: #intro #photo { background-color: #fff; float: right; margin-top: -170px; -moz-box-shadow: 0 1px 10px #333; -webkit-box-shadow: 0 1px 10px #333; -moz-border-radius: 4px; -webkit-border-radius: 4px; width: 400px; height: 300px; } Now, lets deconstruct that CSS a bit.
14
Horizontal offset, or how far to the right or left of the box the shadow appears. A positive value places the shadow to the right of the box, and a negative value places it to the left. Enter a value of 0 if you do not want a horizontal offset. Vertical offset, or how far to the top or bottom of the box the shadow appears. A positive value places the shadow below the box, a negative value places it above the box, and a value of 0 creates no vertical offset. Blur. The higher the number, the more the shadow will be blurred. The color of the shadow.
The name of your typeface. The path to the .eot version of the font file. A backup font located on the users computer. If you dont want to use any of the standard fonts on a users computer, enter a character you wouldnt find on a normal keyboard, like a smiley face or an n with a tilde (). The paths to the .woff and .otf versions of the font file. 15 The path to the .svg version of the font file. This is slightly different because you need to append the path with #filename, where filename is the name of the file.
Now, lets talk a little bit about how this all works. Youll notice that the code contains links to different file types of the same font. What happens is that the browser actually downloads and installs these files. How do you obtain these different types of fonts? You can easily convert any font using a free service like Font Squirrel: http://www.fontsquirrel.com/fontface/generator. Once you have converted your fonts, upload them to your server, and then add this code to your style sheet, substituting the parts in pink with paths to and names of your own font files. @font-face { font-family: MyFancyFont; src: url(type/filename.eot); src: local(), url(type/filename.woff) format(woff), url(type/filename.otf) format(opentype), url(type/filename.svg#filename) format(svg); } Next, add some style rules for text elements, like so: h1 { font-family:MyFancyFont,helvetica,sans-serif; } Congratulations: With just a few lines of code, youve successfully used a cool, non-web-safe font on your webpage.
Example
-webkit-transitionproperty: padding opacity; webkit-transitionduration: 1s; -webkit-transitiontiming-function: ease-in;
transition-property What CSS property will be animated transition-duration How long the transition will last transition-timingfunction The timing of the animation (e.g. slow at first, slow at the end, a consistent speed, etc.)
[time] (in seconds) ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)
16
Property
transition
Description
A shorthand property that can be used for all three transition properties
Values
[property] [duration] [timingfunction]
Example
-webkit-transition: opacity 3s ease;
The transition-timing-function property is a little tough to grasp, but theres a great animation at theart-of-web.com that illustrates how it works. You can check it out here: http://www.the-art-of-web. com/css/timing-function/ We tried to keep our sample webpage simple, so we omitted transitions, but heres a sample style rule to show you transitions in action: header nav a { margin-top:3px; margin-left:5px; margin-right:5px; padding:.5em 0; color: #3399FF; background-color:transparent; -webkit-transition: all 0.9s linear; } header nav a:hover { color:#CC0066; -webkit-transition: all 0.9s linear; } That first style rule sets the margins, padding, and color for links in a header. The transition property tells the browser to make all the properties of links take effect over the course of 0.9 seconds in a linear way. This means that when the page loads, the space between the links will steadily increase to the specified distance over the course of 0.9 seconds. The second style rule sets the color of header links in the hover state. With the addition of the transition property, the color changes slowly and steadily from blue to pink. To see this transition in action, put that code in a CSS file called style.css, create an HTML file containing this code, and then open it up in a browser: <!DOCTYPE html> <html> <head> 17 <link rel=stylesheet href=style.css type=text/css media=screen>
</head> <body> <header> <nav> <a href=#>Link 1</a> <a href=#>Link 2</a> </nav> </header> </body> </html> Pretty neat, huh? And thats just a basic example. Transitions have several other uses, including making page elements spin, grow, and shrink. And with that, weve concluded the CSS3 portion of our program! Next up, youll learn how to weave these two languages together into beautiful webpages using CoffeeCup HTML Editor.
18
Fig. 4.1. The DOCTYPE drop-down list contains a list of HTML DOCTYPES, including HTML5.
This automatically inserts the HTML5 DOCTYPE, as well as some other code, onto your page to get you started. Once youve declared your DOCTYPE, you can use these helpful tools to whip up a website.
Tag List
On the left-hand side of the HTML Editor workspace, youll see the Code tab. Click it to see a comprehensive list of HTML5 elements.
Fig. 4.2. The Code tab contains a comprehensive list of HTML5 elements.
Code Completion
When you type an element in the HTML Editor, a handy window containing HTML5 elements appears just over your cursor. This is the Code Completion window, and you can use it to make sure your code is error-free. 19
Fig. 4.3. Code completion helps make sure your tags are formatted properly.
Heres how it works: Start typing the element you want to include in your code, and then browse through the suggestions for the one you want. When you select one, the opening and closing tag will automatically be inserted into your document. This way, you never have to worry about forgetting to close a tag or mistyping the name of an element.
To browse the HTML5 themes and layouts, just go to File > New From Theme/Layout. This opens the Theme/Layout Chooser, which allows you to browse all our great themes and layouts, including five written in HTML5 and CSS3.
20
Fig. 4.4. The Theme/Layout Chooser allows you to browse our great HTML5 themes and layouts.
21
HTML5 Forms
With HTML5, Web forms are about to get a lot easier to create. Sure, new input types and more streamlined, intuitive markup are exciting, but what really has designers in a tizzy is the fact that they dont have to mess around with scripts anymore. Thats right: Using only HTML5, you can enable functions like auto-completion, validation, and required fields. Lets start with the new input types. Remember how we said the driving force behind HTML5 is more semantic, meaningful markup? The new HTML5 input types, listed below, embody this idea: email Creates an e-mail address field. number Creates a field that allows the user to enter a number. color Creates a color picker box. search Adds a search box. tel Creates a telephone number field. range Adds a number range/slider. datetime, date, month, week, time, and datetime-local Creates a calendar/date picker that allows a user to select a date. url Create a URL field. HTML5 also has new form attributes that narrow down what users can enter in a given field. They are: list Allows you to specify a list of options for an input field. placeholder Displays placeholder text in a field. max and min Sets the minimum and maximum date/time or number values. pattern Allows you to use a regular expression to validate an input field. Now, whats the big deal about these new attributes and input types? Well, lets say you want a user to enter their phone number in your form. With the current version of HTML, youll probably use a text field, but with HTML5, you can use the tel input type. Not only is this more meaningful, but it also makes form validation easier. Lets talk a little bit about form validation. Right now, its handled using JavaScript and a request of your server. This is a pain on two counts: First, it takes a long time, and second, its actually remarkably difficult to verify an e-mail address using JavaScript. With HTML5, form validation will happen inside the browser. Its quicker and more accurate, and with all these new input types, it can be very specific, validating URLs, telephone numbers, and more. Pretty nice, right? If youre stoked about playing with HTML5 forms, download Opera (http://www. opera.com/) its the only browser that currently offers HTML5 form support.
22
Data Storage
The last new HTML5 technology were going to talk about here is HTML5 Storage, which is a way for webpages to store data within the browser. This new technology is kind of like cookies, with one important distinction: Unlike cookies, HTML5 Storage never transmits information back to the server. Instead, the information about 5MB is saved in something like a database in the browser itself. There are two different storage options: sessionStorage Sets fields in the browser window, which means that when the window or tab is closed, the data is lost.
23
localStorage Sets fields on the domain, which means that the window or tab can be closed and reopened and the data will still be there. Another cool thing about localStorage is that if you have two windows open to the same page and something changes on one of the pages, it automatically changes on the other page. One of the most exciting potential applications for HTML5 Storage is the ability to work with interactive web applications even when youre not online. And since it reduces the number of requests to a server, it also has the potential to create a faster experience for the user.
24
<h2>Do you love HTML5 as much as we do?</h2> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p> <a href=/>Read More!</a> <div id=photo> <div> <h3>Photo</h3> </div> </div> </section> <div id=main class=clear> <section id=articles> <article class=blogPost> <header> <h2>Article Title</h2> <p>Posted on <time pubdate datetime=2009-06-29T23:31:45-09:00>June 29th 2009</time> by <a href=#>Joe Blow</a> - <a href=#comments>3 comments</a></p> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> <article class=blogPost> <header> <h2>Article Title</h2> 26
<p>Posted on <time pubdate datetime=2009-06-29T23:31:45-09:00>June 29th 2009</ time> by <a href=#>Joe Blow</a> - <a href=#comments>3 comments</a></p> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </article> </section> <aside> <section> <header> <h3>Categories</h3> </header> <nav id=categories> <ul> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> </ul> </nav> </section> <section> <header> 27 <h3>Archives</h3>
</header> <nav id=archives> <ul> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> </ul> </nav> </section> </aside> </div> <footer> <div class=clear> <section id=about> <header> <h3>About</h3> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <a href=/>laboris nisi ut aliquip</a> ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </section> <section> <header> <h3>Blog Roll</h3> </header> 28 <nav id=blogRoll>
<ul> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> </ul> </nav> </section> <section> <header> <h3>Site Map</h3> </header> <nav id=siteMap> <ul> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> <li><a href=/>Menu Link</a></li> </ul> </nav> </section> </div> </footer> </body> 29 </html>
body { line-height: 1; }
/* tables still need cellspacing=0 in the markup */ table { border-collapse: collapse; 31 border-spacing: 0;
/* tells browsers that dont read HTML5 tags to render like divs */ header, footer, aside, nav, article, section { display: block; margin: 0; padding: 0; }
/* Layout ----------------------------------------------------------------------------------------------------*/
body { background: #f0f0f0; border: none; color: #333; margin: 0 auto; font: 14px/24px Helvetica, Arial, sans-serif; width: 960px; } 32
nav#global { padding: 10px 0; position: absolute; left: 0; width: 100%; 34 background-color: #333;
nav#global ul li a { color: #777; background-color: #222; border: 2px solid #222; font: normal bold 14px/44px Arial, Helvetica, sans-serif; padding: 10px; margin-right: 40px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-align: center; }
#intro { background-color: #ccc; margin-top: 100px; padding: 40px; -moz-border-radius: 15px; -webkit-border-radius: 15px; }
#intro header h2 { font-weight: normal; line-height: 30px; padding: 0 0 15px 0; width: 370px; }
#intro a { color: #fff; background-color: #333; font: normal bold 14px/44px Arial, Helvetica, sans-serif; padding: 10px; margin-right: 40px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-align: center; }
#intro #photo { background-color: #fff; float: right; margin-top: -170px; -moz-box-shadow: 0 1px 10px #333; -webkit-box-shadow: 0 1px 10px #333; -moz-border-radius: 4px; -webkit-border-radius: 4px; width: 400px; 37 height: 300px;
#photo div { background-color: #333; margin: 10px auto 0 auto; -moz-border-radius: 2px; -webkit-border-radius: 2px; width: 380px; height: 260px; text-align: center; }
#photo div h3 { color: #fff; font-size: 25px; line-height: 25px; padding: 115px 0 0 0; }
#main #articles { float: left; margin-left: 40px; width: 600px; 38 border: none;
aside section { background-color: #F5F5F5; margin-bottom: 30px; padding: 20px 40px 20px 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
footer div { margin: 0 auto; padding: 40px 0 20px 40px; width: 920px; border: none; }
footer div section { color: #777; float: left; margin-right: 25px; width: 230px; border: none; }
41