Gotta’ love HTML5 & CSS3

With the arrival of HTML5 & CSS3, web designers all over the world have had different reactions. Some see this as a great opportunity for creating “a better web”, but know that there is still some years to go for seeing it implemented completely, so they are sticking to good old xHTML & CSS 2.1. Others, however, can’t wait for the future and are developing (some pretty cool stuff, I have to say) using these latest technologies.

So, today, we are going to give some HTML5 & CSS3 features a try. We are going to create a tabbed image gallery but animated using some CSS transitions. All of this is going to be built with HTML5 & CSS3, there is going to be NO use of flash or javascript for this example (that’s the cool part!)

So to summarize, this is what we are going to do:

  • Build a complete HTML5 layout for our image gallery
  • Add some animated transitions, like a hover animated description for the images, using only CSS
  • Create a tabbed interface for different galleries using CSS3′s :target element

Just as a sneek peek, you can see a demonstration of what we are going to do. But I advise you to read the full article for a better comprehension.

demo

Building the HTML5 layout for the image gallery

Since this is the first article that I talk about building a HTML5 website, I’ll start with a simple code differentation between HTML5 and xHTML:

<!-- xHTML -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Page title</title>
</head>
<body>
  <div id="header">
    <h1>Page title</h1>
  </div>
  <div id="nav">
  <!-- Navigation -->
  </div>
  <div id="intro">
  <!-- Introduction -->
  </div>
  <div id="section">
  <!-- Main content area -->
  </div>
  <div id="aside">
  <!-- Sidebar -->
  </div>
  <div id="footer">
  <!-- Footer -->
  </div>
</body>
</html>

<!-- HTML5 -->

<!DOCTYPE html>
<html>
<head>
  <title>Page title</title>
</head>
<body>
  <header>
    <h1>Page title</h1>
  </header>
  <nav>
  <!-- Navigation -->
  </nav>
  <section id="intro">
  <!-- Introduction -->
  </section>
  <section>
  <!-- Main content area -->
  </section>
  <aside>
  <!-- Sidebar -->
  </aside>
  <footer>
  <!-- Footer -->
  </footer>
</body>
</html>

As you can see HTML5 is way more semantic coding, and the definitive way to stop having that urge for usings div’s for absolutely everything. So now we are going to build our HTML5 layout for the image gallery:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gotta' love HTML5 & CSS3 - Lostkore.es</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
* { margin:0; padding:0; border:0;}
/* Correct behavior for the HTML5 tags used */
figure, footer, header, nav, section, figcaption { display: block; }
</style>
</head>
<body>
  <header>
    <h1><a href="index.html">Gotta' love HTML5 & CSS3</a></h1>
    <p>Creating a tabbed animated image gallery with only HTML & CSS - by: <a href="http://lostkore.es/blog/">Lostkore</a></p>
  </header>
  <section id="imagegallery">
    <h4>Choose a gallery:</h4>
    <nav>
      <ul>
        <li><a href="#gal1">Bokeh</a></li>
        <li><a href="#gal2">Textures</a></li>
        <li><a href="#gal3">Macro</a></li>
      </ul>
    </nav>
    <section id="gal1">
      <h2>Bokeh Gallery</h2>
      <p>Hover one of the images in the gallery to see the CSS animated description.</p>
      <figure>
        <img src="images/bokeh/1.jpg"/>
        <figcaption>
          <h3>Bokeh 1</h3>
          <p>Here we see the image description.</p>    
        </figcaption>
      </figure>
      <figure>
        <img src="images/bokeh/2.jpg"/>
        <figcaption>
          <h3>Bokeh 2</h3>
          <p>Here we see the image description.</p>    
        </figcaption>
      </figure>
      <figure>
        <img src="images/bokeh/3.jpg"/>
        <figcaption>
          <h3>Bokeh 3</h3>
          <p>Here we see the image description.</p>    
        </figcaption>
      </figure>
    </section>
    <section id="gal2">
      <h2>Textures Gallery</h2>
      <p>Hover one of the images in the gallery to see the CSS animated description.</p>
      <figure>
        <img src="images/textures/1.jpg"/>
        <figcaption>
          <h3>Texture 1</h3>
          <p>Here we see the image description.</p>    
        </figcaption>
      </figure>
      <figure>
        <img src="images/textures/2.jpg"/>
        <figcaption>
          <h3>Texture 2</h3>
          <p>Here we see the image description.</p>    
        </figcaption>
      </figure>
      <figure>
        <img src="images/textures/3.jpg"/>
        <figcaption>
          <h3>Texture 3</h3>
          <p>Here we see the image description.</p>    
        </figcaption>
      </figure>
    </section>
    <section id="gal3">
      <h2>Macro Gallery</h2>
      <p>Hover one of the images in the gallery to see the CSS animated description.</p>
      <figure>
        <img src="images/macro/1.jpg"/>
        <figcaption>
          <h3>Macro 1</h3>
          <p>Here we see the image description.</p>    
        </figcaption>
      </figure>
      <figure>
        <img src="images/macro/2.jpg"/>
        <figcaption>
          <h3>Macro 2</h3>
          <p>Here we see the image description.</p>    
        </figcaption>
      </figure>
      <figure>
        <img src="images/macro/3.jpg"/>
        <figcaption>
          <h3>Macro 3</h3>
          <p>Here we see the image description.</p>    
        </figcaption>
      </figure>
    </section>
  </section>
</body>
</html>​

Basically it’s the layout of an image gallery with three different galleries to choose from (Bokeh, Textures, Macro). However, I want to give some emphasis on some parts of the code.

<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
* { margin:0; padding:0; border:0;}
/* Correct behavior for the HTML5 tags used */
figure, footer, header, nav, section, figcaption { display: block; }
</style>
</head>

This part of the code is what makes the HTML5 behave correctly in all browsers, even in IE thanks to http://code.google.com/p/html5shiv/.

But there is another part of the code that i want to discuss:

<figure>
  <img src="images/macro/1.jpg"/>
  <figcaption>
    <h3>Macro 1</h3>
    <p>Here we see the image description.</p>    
  </figcaption>
</figure>

If you try to validate the website we built with HTML5, it won’t validate because of those h3 and p tags inside of the figcaption tag. According to the W3C, the figcaption can only wrap flow content (text), but what do you do if you want to add a title for the caption (like I did for the image gallery) or simply make a part of the caption bolder. And here is where I wanna ask you, if you think this should be changed or not.

NOTE: If you want to make the code HTML5 valid, just remove the h3 and p tags inside the figcaption tags.

Adding hover animated captions for the images

TAKE IN CONSIDERATION: What we are going to do now is only going to be properly viewed & tested in modern browsers that have CSS Transitions implemented, that would be the latest versions of Mozilla Firefox, Google Chrome, Opera and Apple Safari.

First, let’s view the code, and then we’ll explain were the magic happens.

/* Gallery images with CSS animated captions */
#imagegallery section figure {
  position:relative;
  float:left;
  margin:20px;
  width:198px;
  height:198px;
  border:1px solid #333;
  overflow:hidden;
  background: #fff;
  padding: 1px;
}
#imagegallery section figure figcaption {
  position:absolute;
  bottom:0;
  left:0;
  opacity: .75;
  margin-bottom:-115px;  
  -webkit-transition: margin-bottom;
  -webkit-transition-duration: 400ms;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-property: margin-bottom;
    -moz-transition-duration: 400ms;
  -moz-transition-timing-function: ease-out;
  -o-transition-property: margin-bottom;
  -o-transition-duration: 400ms;
}
#imagegallery section figure:hover figcaption {
  margin-bottom:0px;
}
#imagegallery section figcaption {
  width:200px;
  height:115px;
  background:#111;
  color:#fff;
  font-family: Arial, Helvetica, sans-serif;
}

#imagegallery section figcaption h3 {
  margin: 15px 15px 6px 15px;
  text-shadow: #000 0px 2px 0px;
}
#imagegallery section figcaption p {
  margin: 0 15px;
  color: #ddd;
  line-height: 24px;
  font-size: 14px;
  text-shadow: #000 0px 2px 0px;
}

We’ve all seen those beautiful image hover description done with javascript, but why use javascript when we can use CSS3 to achieve the same cool effect. The code that makes the CSS animation work is this:

#imagegallery section figure figcaption {
  position:absolute;
  bottom:0;
  left:0;
  opacity: .75;
  margin-bottom:-115px;  
  -webkit-transition: margin-bottom;
  -webkit-transition-duration: 400ms;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-property: margin-bottom;
    -moz-transition-duration: 400ms;
  -moz-transition-timing-function: ease-out;
  -o-transition-property: margin-bottom;
  -o-transition-duration: 400ms;
}
#imagegallery section figure:hover figcaption {
  margin-bottom:0px;
}

As you can see, we make an animation of the figcaption’s margin-bottom value when you hover the figure (in this case, the image). All this is done in only 400ms with an ease-out effect. So, this is a pretty simple effect, but yet very stylish.

Tabbed interface using CSS3′s :target element

As done before, let’s view the code first, and then we’ll explain it.

/* CSS animated Tabs */
#imagegallery section {
  -webkit-transition: opacity;
  -webkit-transition-duration: 800ms;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-property: opacity;
  -moz-transition-duration: 800ms;
  -moz-transition-timing-function: ease-in;
  -o-transition-property: opacity;
  -o-transition-duration: 800ms;
    opacity:0;
    z-index: 9;
}
#imagegallery :target {
    opacity:1;
    z-index: 10;
}
#gal1, #gal2, #gal3 {
  position: absolute;
}

This code is also pretty simple, when one of the gallery’s is targeted (when a link with #gal1, #gal2, or #gal3 is clicked), that gallery will show up. This will mimic an ajaxed tabbed interface with a nice fade effect.

So that is it for today, you can see a demonstration of the code here or even grab the source code. If want to discuss the code, or simply ask some questions, just leave a comment below.

Show the love:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • DZone
  • Reddit
  • StumbleUpon
  • Twitter