 |
| HTML5-logo, wikipedia |
During my Christmas break I had some time to look at new things happening in the Web World. Although I spend most of my developer's time in native, windows, graphics and GPU area I thought it would be a good idea to take a glance at some completely different topic.
In the past I somehow managed to create my personal web site and I like "programming" in HTML and CSS. I have not so much professional experience with web design but I like to focus on final outlook of the page, its colours, animations, layout, etc. All in all creating a web page is not that far away from designing a nice looking animation in OpenGL and interesting GUI for application.
In this post I would like to describe some experiments that I did with new HTML5 and CSS3. Please note that I would not like to describe the full spec of those new "standards", you can read this somewhere else in the web.
Let us look on areas that I found interesting and fun to work with.
Let us look on areas that I found interesting and fun to work with.
Start
HTML5 is not finished yet and not all elements are fully implemented. Similar thing happens with CSS3. But those technologies are delivered using modules - there is no final specification yet, but we have a set of functionality that could be implemented separately. We will wait some more time to have full and coherent specification, but even now one can use some of already done (and well tested) features.
New HTML site template
New HTML code is much more simpler and cleaner than (X)HTML, here is a simple example:
<!DOCTYPE HTML> now we can remember the doctypeIsn't that a bit better and shorter?
<html>
<head>
<meta charset="UTF-8"> no need for closing tag!
</head>
<body>
</body>
</html>
Sections like navigation bar, menu bar, footer, article, header were implemented as divs with some proper class or id name. But since such elements appear in most of pages it would be convenient to create something better. And here it is: a set of new elements introduced. Now we got <header>, <article>, <nav>, <footer> and lot more. That way your classes can be more expressive and the markup has more semantics.
CSS3 Animations
Lot of people believe that HTML5 adds new cool features about the graphical side of a web. But actually HTML introduces only <canvas> element and ability to use SVG. The rest of power comes actually from CSS3 effects and animations. For instance instead of using third party JS library (or writing our own code) we can do great looking animations quite easily.
p
{
transition: color 0.5s linear;
}
p:hover
{
color: red;
}
Above code speaks for itself: change color of text in "p" when mouse is over, do this in 0.5 second and use linear timing function. Transition is symmetric of course. Unfortunately not all browsers support this property and we need to use browser's extension. To work with most of browsers we need to write:
p
{
-o-transition: color 0.5s linear;
-moz-transition: color 0.5s linear;
-webkit-transition: color 0.5s linear;
transition: color 0.5s linear;
}
Transitions should have better performance than custom JS effects. Such animations can be implemented in native code for instance. Probably we do not see any benefit for simple cases, but for advanced examples there should be an improvement. Another thing is that it is much easier to write it in the code, moreover it is more expressive.
CSS3 Effects
A lot of nice features comes with new standard. Some of them are quite simple (and implemented some time ago actually by most browsers): border-corner, border image, multiple backgrounds. And some more advanced like: box-shadow and text-shadow. Using those properties with animation module you can create pretty impressive things.
One effect module that particularly caught my eye is "filter".
img
{
transition filter 0.5s linear
filter: grayscale(100%);
}
img:hover
{
filter:none;
}
Now it is easy to create a smooth animation from grey scale to colourful image. This is not working with all browsers (works in Chrome, but not in Firefox and IE), but has some potential and hope to see more of it soon. On the official site there is even a paragraph about custom filters than can be written in GLSL (as fragment shaders!). Filters can be placed on images but on other elements as well.
Experiments
It was not able to use all features of new standards. But I've implemented some nice looking things on my web site. Actually is was quite addictive to play with those things, there is always something you would like to change and improve.
- Top menu now uses transition, so when you hover mouse above item there is a smooth animation: one for background and one for text color. I've added the same effect on this blog as well.
- The gallery for my projects. There is a grey to color transition combined with box-shadow and opacity effect. Below there is a picture showing this effect. Works only with chrome so far.
.thumbnail img {
margin: 4px;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity:0.5;
}
.thumbnail img:hover {
-webkit-filter: none;
filter: none;
opacity:1.0;
box-shadow: 0px 0px 8px 2px #aaaaaa;
}
- I am thinking about some effect for links in the top of pages docs and teaching.
- html code simplification
- I am still testing border-radius if this fits my style of page.
Other stuff
What else is interesting and might be worthy to try?
- CSS3 variables - it would be nice to store colors of page in one place and then reference it in other places in the CSS file. There are some implementations available but we need to wait some more time for better standard.
- HTML5 Canvas and combination with SVG drawing or WebGL. The simple <canvas> element enables you to insert full WenGL app inside.
- CSS3 Advanced animations (3D and 2D) - With new CSS you can create elements that have 3D positioning, there is a perspective projection, rotation and even full 4x4 matrix multiplication. You can combine this with animations and create stunning effects. But it is important to be careful with that. 3D is cool but sometimes it can spoil the final outlook of a page.
- jQuery - a very powerful JS library that can speed up your production time and gives a lot of features needed in today's web sites. This lib is very popular and even Google and Facebook use it.
- Modernizr - although HTML5 and CSS3 are very cool not all browsers have full support of those standards. If you want to have the same functionality in different rendering engines then it could be quite hard to do. Modernizr is a library that helps with that.
Links
- new elements - new elements in html5, at w3school
- css3 filter and here say-hello-to-css3-filters
- http://www.apple.com/html5/
- http://modernizr.com/