CSS3 technology in action: Design examples

CSS3 technology in action: Design examples

Takeaway: Highlights of some beautiful examples of CSS3 design projects by some individuals who are at the forefront in tinkering with the new code possibilities.

While CSS3 and HTML5 technologies are still fresh for most organizations, there are many trend-setting web developers who are taking the new tools by storm. This post will highlight several examples which utilize the full potential of CSS3 in delivering excellence in design, look, and feel. The first group includes several projects and experiments by individuals tinkering with CSS3.

10 beautiful examples of CSS3 design

CSS3 Analog Clock by Paul Hayes is his quick project and experiment that works in Safari and Google Chrome. Essentially the working analog clock is a series of four images, and using CSS3 to overlay, transform, and transition the hands’ movement, the time is obtained from a short JavaScript.

Figure A

Snow Flakes by Natalie Downe utilizes examples of CSS3 animation, text-shadow, transform, and keyframes to create a page of gently falling snow flakes. The snow flakes are called by a short script which controls the number of flakes, how fast they fall, and the duration of the snow fall. The animation is best viewed in Google Chrome.

Figure B

Matrix Effect by Girlie Mac embeds a Katakana font with CSS3 keyframes, transform, and animations using webkit prefixes to create this demonstration, again, best viewed in Google Chrome.

Figure C

Pure CSS Speech Bubbles by Nicolas Gallagher demonstrates the use of CSS3 backgrounds, linear gradients, border radius, and transform translate to create stunning speech bubbles in a selection of variants.

Figure D

Embossed Text Effect by Analog, a company of friends who make websites, uses a subtle 1px CSS3 text-shadow effect for their h2, h3, p, and li text, creating an embossed text effect.

Figure E

Polaroid’s with CSS3 by Zurb is a gallery display using CSS3 transform and rotate to turn images into a set of randomly selected Polaroid pictures.

Figure F

CSS3 Transitions Gallery by AlexandtheWeb demonstrates CSS3 transitions, transform, rotate, border radius, and masking to create this stunning example.

Figure G

CSS3 3D Butterfly by eletriq demonstrates the use of CSS3 perspective, transform-origin, and transform-style to create a 3D butterfly object in flight. Display is available in Safari only.

Figure H

3D geometry with 3D CSS3 transforms by Joe Lambert uses rotateX(deg), rotateY(deg) axis, transitions, and transformVector to create this 3D cube with rotation controls (displayed in Safari).

Figure I

CSS3 Time Machine by Joe Critchley utilizes CSS3 perspective, transform, and translate to create this image slide show similar to Apple’s Time Machine interface (displayed in Safari).

Figure J

10 things you should know about HTML5

10 things you should know about HTML5

Takeaway: HTML5 may not be a fully finalized standard yet, but it isn’t changing much — and adoption is on the rise. Some of the key aspects of the new specification.

A year or two ago, HTML5 seemed like a vague idea that only a few Internet wonks cared about. Now, it feels like HTML5 is everywhere. Thanks to rapid releases from Mozilla and Chrome, and the deployment of IE9 from Microsoft (and IE10 already in “tech preview” status), browser support for HTML5 is available to nearly everyone in a limited (or better than limited) amount. Developers are starting to take advantage of the widely implemented features. With full HTML5 support probably less than a year away, and the specification quickly reaching an unchanging state, this is a great time to look at some things you should know about HTML5.

1: XHTML is no more; long live HTML5 with XML syntax

XHTML was the choice of people who favored precision, particularly for parsing. HTML has always looked a lot like XML, but it never was quite exactly like XML, and as a result, trying to parse it like XML would fail. So a while ago, the XHTML spec was made, to take the HTML language and put it into the XML lingo. When HTML5 first got started, there was work on XHTML 2 as well, but that was eventually mothballed. Instead, the HTML5 spec is written so that you can write HTML5 with strict XML syntax and it will work. And if you send it with an XML MIME type, user agents will parse it as an XML document too. This gives developers the best of both worlds.

2: The 2022 myth, the 2011 reality

One of the persistent misconceptions around HTML5 is that “it won’t be done until 2022.” The typical supporting evidence for this is an interview conducted with Ian Hickson, the HTML5 specification editor, a few years ago. Ironically enough, even in that interview, he was clear about the 2022 date. But a few people got really worked up about it, and their angry articles got a lot more attention than the actual facts.

The truth is that 2022 is when Hickson expects the HTML5 spec to become a full W3Crecommendation, which means that there are two 100% complete, verifiable implementations. To get an idea of why that is both fairly meaningless and a huge leap at the same time, consider that no other version of the HTML spec has ever achieved that status, mainly because they were too vague for any implementation to be provably correct. The HTML5 specification is getting close to being solidified and unchanging, right now in 2011.

3: It is a Flash and Silverlight killer for many developers

While HTML5 does make numerous improvements in how it is used for marking up documents, the big focus is in applications. The number of features that HTML5 introduces to support application development is staggering. This isn’t to say that Flash and Silverlight are going away anytime soon. But Microsoft has already announced that it’s refocusing Silverlight on the out-of-browser experience. Flash and Silverlight still have capabilities that HTML5 does not have, but the gap is nonexistent for many common purposes now, thanks to HTML5’s new capabilities. It probably isn’t worth rewriting existing applications, but you should see whether HTML5 makes sense for new applications.

4: It is the basis of many new tools

With HTML5 becoming a full-blown application framework, toolmakers are now using it as the foundation technology for their products, particularly those designed to overcome cross-platform development issues. If you are looking to write an application that runs cross platform, and it is within the capabilities of an HTML5 application, you should consider one of these tools. This is especially important in the mobile space, where the alternative is to learn an entirely different language, API, and framework for each phone platform you want to target.

5: The <video> tag is important but controversial

My personal pick for “best new HTML5 feature” is the <video> tag. Before <video> (there is also an <audio> tag), you would find yourself having to turn to Flash or Silverlight to provide a media player on your site. With these new tags, those days are, in theory, over. Why only “in theory”? Sadly, the different browser makers can’t quite decide on which formats to support yet, due to patent concerns. When the dust settles on that, Flash and Silverlight both lose their #1 use case.

6: Google led the way

If it seems like the Chrome browser has a huge head start with HTML5, there is a good reason for that. The HTML5 specification process put a heavy premium and emphasis on written, deployed code. I’m not saying that they “rubber stamped” whatever browser vendors did. But it was hard to convince those involved to write specifications for unimplemented features, and implemented features were likely to become the basis of new items in the specification. Because Chrome seems to have a new version every few weeks, features that Google put into it had an excellent chance of making it into the HTML5 spec.

7: “Standards compliant” is finally provable

Whenever someone claims that a browser is or is not “standards compliant,” I have got to laugh. Before HTML5, it is literally impossible to be provably standards compliant. In many cases, the current specs are too vague or simply silent on important issues (like handling parsing errors) and the result is that different browsers can do wildly different things and still be either standards compliant or fall into the category of “not provably out of compliance.” Even the famous ACID test does not prove too much, since it tests only a subset of the HTML specification. With HTML5, the bar has been raised quite a bit, and it will finally be possible to prove that a user agent is standards compliant. Indeed, one of the reasons behind the 2022 date for “recommendation” status is the need to write full test suites.

8: “Standards compliant” still does not guarantee how it will look

Standards compliance in Web browsers does not do what people often think it does, and HTML5 does not change that fact. A big confusion with HTML is that many Web designers and developers believe that the HTML specification controls the look of items on the screen; it does not. For example, a Web browser can make the <strong> tag use a bigger or different colored font instead of a heavier font, if it likes and still be compliant. Many times, when designers say a browser is not standards compliant, what they are really encountering is the flexibility given to user agents in how to render tags. HTML5 does not change this fact. If you absolutely need a tag to be rendered in a precise way, do not count on the browser’s default behavior; specify your needs in CSS.

9: Parsing is more precise

The HTML5 specification finally introduces precise parsing rules and defines things like what the user agent should do when it encounters a parsing error. As a result, you can expect that some things that used to pass as acceptable or even “valid” HTML in the past will no longer cut the mustard. You will want to get familiar with HTML5’s parsing rules and make sure that your code adheres to them.

10: HTML5 goes far beyond the browser

In previous versions of HTML, there was an inherent assumption that a traditional Web browser was the user agent of choice. While other user agents and content types were supported, there was an implication that they were not as important. HTML5, on the other hand, has a good number of changes to put non-browser, non-desktop-size-screen user agents on more equal footing with traditional Web browsers. There have been a lot of advances with things like how well it works with screen readers and mobile phones. As a result, well-written HTML5 can be a “write-once, view anywhere” framework for developers who need it, and it can reach users (particularly those with a variety of disabilities) who otherwise would struggle with the Web.

***********************************************

HTML5: Using structural elements for header, footer, and navigation

HTML5: Using structural elements for header, footer, and navigation

Takeaway: The use of structural elements in the new HTML5 specification, specifically header, footer, and navigation elements, and examples of each.

The HTML5 specification has defined a set of sectional and structural elements that improves semantic markup within HTML coding for web developers. These new sectional and structural elements are a panacea for moving away from the common use of divisions or the <div> element that has taken over a large part of web page structures in recent years.

The sectional and structural elements include the header <header>, footer <footer>, and navigation <nav> elements which will be addressed in this segment. The article <article>, aside <aside>, section <section>, and headings group <hgroup> elements were explained in the previous post on HTML5: Using sectional elements.

The only rule for limiting the use of the <header> and <footer> elements is that they cannot be nested within another <header> or <footer> element. Other than that limitation, the use of these two elements is fairly open; examples of their utilization will be displayed for both.

Header <header>

This element represents a group of introductory or navigational aids for web pages. A <header> element is intended to contain the section’s heading such as an <h1-h6> element or an <hgroup> element, but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, sub headings, bylines, version history information, or any relevant logos.

The header element is not to be used for sectioning content as it is more of a structural element, and it does not introduce a new section. The <header> element can be used many times on a single web page; for example, it can be nested within each <article> element. Here are several examples of using the <header> element in HTML code.

<header> Example 1: The following snippet shows how the element is used to markup a page header.

<header>

  <hgroup>

    <h1>Gardening Times</h1>

    <h2>Getting started with flowers</h2>

  </hgroup>

</header>

<header> Example 2: In this example, the clip shows the <header> element nested within an <article> element.

<article>

  <header>

    <hgroup>

      <h1>Raising Roses</h1>

      <h2>The guide to a perfect rose garden</h2>

    </hgroup>

</header>

</article>

At this time, most browsers do not execute any display information via CSS for HTML5 elements, as is the case for the <header> element, and to be displayed as a block it will need to be specified in the style sheet as shown in the example below along with others:

address, article, aside, canvas,

figcaption, figure, footer, header,

hgroup, nav, section, summary {

display: block;

}

Footer <footer>

This element should be self explanatory at this point; however, the HTML5 <footer> element specification does state that it represents a footer for its nearest ancestor sectioning content or sectioning root element. The footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and social networking and sharing links, such as in a blog post. For this reason it is possible to have more than one <footer> element on a single web page document. The <footer> element does not introduce a new section, similar to the <header> element, but serves to add semantic meaning to the bottom of a <section> or <article>.

Several examples for use of the <footer> element are provided below:

<footer> Example 1: This example shows the <footer> element containing a published timestamp nested within an <article> element:

<article>

<header>

  <h1>Example of a footer nested in an article</h1>

</header>

  <p>This is the article content...</p>

  <p>...</p>

<footer>

  <p>Published: <time datetime="2011-07-22T13:59:47-04:00" pubdate>July 22, 2011 1:59 pm EDT</time></p>

</footer>

</article>

<footer> Example 2: This example shows a site wide <footer> element containing a navigation element:

<footer>

<nav>

<p><a href=”/blog.html”>Blog</a> -

<a href=”/archive.html”>Archive</a> -

<a href=”/index.html”>Home</a></P>

</nav>

<p>Copyright ©2011 Footer Examples</p>

</footer>

Navigation <nav>

This element, as the HTML5 specification requires, corresponds to a section of a web page that links to other web pages or to other parts within the web page; for example, a section with navigation links — which seems self explanatory. What this means is that the <nav> element replaces the idea of having a <div id=”nav”> element, with the new semantic element meant specifically as a navigation area. However, consider that not all groups of links on a web page need to be contained within a <nav> element; the element is primarily intended for sections that consist of major navigation blocks; in addition, the element can appear more than once on any given web page. A global site-wide navigation block and a secondary navigation block can be included on a single web page with individual attributes styled with an id or class designation.

The specification also notes that it is common for footers to have a short list of links to various pages of a site, such as the terms of service, a copyright or disclaimer page. The footer element alone is sufficient for such cases, and while a <nav> element can be used in such cases, it is usually unnecessary.

The specification goes on to state that user agents including screen readers that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use the <nav> element as a way to determine what content on the page to initially skip and/or provide on request.

Typically, the <nav> element can be found within the <header> structural element, which will be reviewed in the next installment on HTML5 coding practices. The contents of links within the <nav> element do not necessarily have to be presented in list form, but can also contain other kinds of content as well, including links within a paragraph block. Several examples of the <nav> element are presented below:

<nav> Example 1: Content linking presented within an unordered list

<h1>The Blog of Examples</h1>

  <nav>

   <ul>

     <li><a href="#">Home</a></li>

     <li><a href="#/events">Events</a></li>

     <li><a href="#/Blog">Blog</a></li>

     <li><a href="#/Products">Products</a></li>

   </ul>

</nav>

<nav> Example 2: Linking content within a paragraph block

<nav>

 <h1>Navigation</h1>

   <p>This is the home page, just below you will find <a href="/blog">The

  Blog</a>, where much ado about something can be found. Just to the right of

   that you will find the <a href="/wiki">Wiki</a>. And continuing

   the path to your left you will find the <a href="/wiki/papers">Wiki Papers</a>.</p>

</nav> 

*********************