Lostkore.es

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.

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:

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:

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.

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:

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.

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:

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.

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.

Post-rock, beyond imagination

There are musical genres that inspire you more than others. I am a big fan of a musical genre called “post-rock“. A type of music that makes you transport to other places or times, and creates its own story in your head through your ears.

According to wikipedia:

Post-rock is a term that was first used by Simon Reynolds in an edition of The Wire magazine (May 1994) to describe the sound of a few rock bands that use their own instruments of rock, but incorporating rhythms, harmonies, melodies, timbres and harmonic progressions that are not in the tradition of the genre. Most bands typically produce instrumental music. However, many argue that use of the term is not appropriate: for example, is used to talk about the music of Tortoise as well as that of Mogwai, two bands that have little in common (except that their music is mostly instrumental).

But post-rock is more than that, post-rock means using rock instrumentation for non-rock purposes: using guitars as facilitators of timbres and textures rather than riffs producing tools and chords. Increasingly, the post-rock groups are expanding the traditional guitar / bass / drums with digital technology: samplers, sequencers and midi devices. While some groups (Stereolab, Pram) prefer lo-fi or outdated technology, others are developing cyber-rock, virtualized technology.

The post-rock sound incorporates a variety of genres like ambient, jazz, electronic music, experimental music, and sometimes even rock. The approach, which includes emphasis on instrumental work and sound textures, is similar to the one which initially had the new age genre, which stemmed from the modern folk tradition. Another related genre is the math-rock, characterized by being more dissonant and with arrangements more influenced by progressive rock.

Here are some examples, to get you hooked:

Sigur Rós – Sæglópur

Explosions In The Sky – So Long Lonesome

Mogwai – Cody

Basic XHTML template, ready to be styled

When designing websites, time management is something really important to consider. We find ourselves writing the same code over and over again, so why waste all this time, when we can save little snippets that can improve our workflow.

In this case, I’ve built a sample .html website where you have the basic elements of a XHTML 1.1 document. As you probably know, the basic content of a website is divided into 5 general areas: header, navigation, content, sidebar and footer. So we made a div for each of this areas filling it with some usual dummy text that can be helpful for filling some of our information or even styling later.

Also taking some SEO (search engine optimization) in consideration, I’ve added some basic META tags that are normally used.

If you want to add, change or ask some questions about the code, feel free to use the comment form below.

Hope you find this useful. I’ve made a demo, if you want to see/download it.