http://html5advent2011.digitpaint.nlSat, 24 Dec 2011 09:08:26 GMTWe will demonstrate a new cool cutting-edge HTML5 and CSS3 technique every day in this HTML5 advent calender.http://html5advent2011.digitpaint.nl/24/We wish you all happy holidays and a happy new year. Today we've combined a lot of the tricks from the past month into one giant image (special thanks go out to Adrian from Il Meccanico for the awesome designs). The past 24 days have been a blast. We've tried to push the boundaries of what's possible when we could and stood on the shoulders of others that have been there before. Thanks for visiting us and maybe until next year...Sat, 24 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/24/Digitpainthttp://html5advent2011.digitpaint.nl/23/In recent weeks we've seen more and more examples which used input:checked. Since we've seen the possibilities of :checked, we've played with the idea of creating a CSS3-only Tic-Tac-Toe game. And here it is, fresh from the oven; and it uses no javascript at all!Fri, 23 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/23/Digitpainthttp://html5advent2011.digitpaint.nl/22/A long standing problem in CSS is that there is no way to do proper (page)layout. Sure we can hack around with float, display: table (and friends) and position but all of these were never really meant to be used for layout. But the future is bright as there are quite some exciting new layout mechanisms in the W3C specs (grids, regions, exclusions, etc.). Today we're going to focus on one that is somewhat useable: the Flexible Box Model (flex-box).Thu, 22 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/22/Digitpainthttp://html5advent2011.digitpaint.nl/21/In 2011 scrolling was the new black. We've seen all kinds of site that use some kind of cool way to scroll. The effect is called parallax scrolling and has been around since the days of Super Mario Bros (probably longer). The idea is pretty simple; you have multiple layers which you move at different speeds to give the illusion of depth.Wed, 21 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/21/Digitpainthttp://html5advent2011.digitpaint.nl/20/When you have a growing list of things that have a complex format you may want to make them smaller when there are more of them. This UI-pattern is especially useful if the general overview is more important than the details of a specific item in the list. In the examples below we demonstrate a CSS-only technique that allows you to style elements based on their number.Tue, 20 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/20/Digitpainthttp://html5advent2011.digitpaint.nl/19/Sometimes you want to give a box a special type of border that scales nicely with the size of the box. Until border-image we had to use the sliding door technique, some background-image hackery and sometimes unnecessary extra markup to achieve the desired effect. border-image relieves that pain and does exactly what it says: it lets you define an image for the border and it's quite smart about it too!Mon, 19 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/19/Digitpainthttp://html5advent2011.digitpaint.nl/18/In Firefox 4, Mozilla introduced an extension to background-image called -moz-element(). With this function you can use any element as a background for another image. You might think what's the big deal, but think about the followin use-case for a minute. You are working on this killer slideshow web-aplication where you want each slide to be built in HTML and you want to create previews of every slide. Until recently that would've been a very hard job, but with -moz-element() it's easy as pie.Sun, 18 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/18/Digitpainthttp://html5advent2011.digitpaint.nl/17/You've seen them on and off in a lot of our previous entries, but today we're going to dedicate a full entry to them: @keyframes. In combination with transform you can animate your heart out and it is n our opinion the feature that will be the last straw for Flash. Warning! these examples may overwhelm your browser as they use quite some resources.Sat, 17 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/17/Digitpainthttp://html5advent2011.digitpaint.nl/15/Nothing gives more depth to a design than shadows (or at least the illusion of one). That's why we sought some ways to find ways to exploit them. The best news in all of this is that dropshadows (box-shadow) are pretty widely supported (IE9+, Firefox, Chrome, Safari, Opera), even without vendor-prefixes.Thu, 15 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/15/Digitpainthttp://html5advent2011.digitpaint.nl/14/Oh, the good times, when all we had were 256 colors, table-layouts and of course the marquee tag and his friend blink. The tags have been made obsolete in HTML5, but the good news is that marquee has returned in CSS3 (Seriously, see the spec).Wed, 14 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/14/Digitpainthttp://html5advent2011.digitpaint.nl/13/Using tileable images as backgrounds in webdesign have been around since we built websites with tables. The available image formats have changed through the years and we got more control of how the background is placed by means of CSS. With the introduction of gradients in CSS3, in combination with multiple backgrounds, it became possible to create background patterns in pure CSS.Tue, 13 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/13/Digitpainthttp://html5advent2011.digitpaint.nl/12/There are a lot of situations where you want to give your headings just that little bit of extra. With wide support for text-shadow we are able to add all kinds of effects and best of all, they're very easy to implement.Mon, 12 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/12/Digitpainthttp://html5advent2011.digitpaint.nl/11/Using masks to partially reveal content is a pretty common practice in the design world but until now proved to be problematic in front-end development, especially if the masks needed to be dynamic or scalable. Thanks to SVG and a bit of cross-browser hackery we can now do masking in your browser.Sun, 11 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/11/Digitpainthttp://html5advent2011.digitpaint.nl/10/Two of our favourite pseudo-elements are the :before and :after elements. They are very usefull to add all kinds of visual gimmicks to your elements, especially if you don't want to clutter up your beautifully crafted HTML.Sat, 10 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/10/Digitpainthttp://html5advent2011.digitpaint.nl/9/Using blur within the browser was long not possible and in a way it still isn't, but using the technique below we can fake it to some amount. Try to click and play with the examples below, all the elements are interactive. There are no images involved whatsoever.Fri, 09 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/9/Digitpainthttp://html5advent2011.digitpaint.nl/8/A lot of designs use gradients these days and most of the times linear gradients are used. Linear gradients are gradients running from one point to another in a straight line. The CSS3 spec however defines radial (going from a centerpoint outward) too. Below are some effects you can achieve with them.Thu, 08 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/8/Digitpainthttp://html5advent2011.digitpaint.nl/7/Having the ability to implement a custom font is cool, but sometimes you need that extra edge (pun intended). With the text-stroke property you can achieve just that. This example currently only works in Chrome and Safari, it may work in another browser in the future... Not to be left out, we've added some screenshots.Wed, 07 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/7/Digitpainthttp://html5advent2011.digitpaint.nl/6/Audio? — you might think in horror — isn't that for those annoying websites from the nineties? That might be true, but with HTML5-gaming and online streaming audio is an important part of the web. The HTML5 <audio> tag allows us to embed audio without the need for any third-party plugins like Flash or Quicktime.Tue, 06 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/6/Digitpainthttp://html5advent2011.digitpaint.nl/5/The good old <ol> has been around a long time for creating numbered lists, but it has always been rather limited in its use. In CSS2.1 generated content has been added to the spec. With generated content you can define counters and add them (together with other content) to any element with the :before and :after pseudo-elements. So, today's entry isn't that cutting-edge, but as browser support has been lacking (we're looking at you IE!) it's not something you see in a lot of websites.Mon, 05 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/5/Digitpainthttp://html5advent2011.digitpaint.nl/4/Fragment identifiers in URLs (the part after the hash: index.html#position) are by no means a new feature, but their usefulness has a long time been limited to linking to a specific position within a longer document. With the adaptation of javascript, ajax and other fancy new technologies they got a lot more traction, but still, you need javascript to do something really useful. But no more! The :target pseudoselector allows us to style our content based on the fragment identifier in the URL.Sun, 04 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/4/Digitpainthttp://html5advent2011.digitpaint.nl/3/Setting a custom cursor for certain elements has been around for a while (some cursors worked even in IE 5.5). In CSS3 there are a couple of new cursor styles you can use. Most of them are very usefull, others not so much, but may still come in handy in some edge-cases.Sat, 03 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/3/Digitpainthttp://html5advent2011.digitpaint.nl/2/A lot of designs use icons these days, traditionally you would use images to place them within your design. Another approach we like to show you here is using unicode characters or a dedicated icon web-font.Fri, 02 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/2/Digitpainthttp://html5advent2011.digitpaint.nl/1/Of course you know about the css3 transition property. But did you know it works on borders too? These are some fancy effects you can create by transitioning the borders.Thu, 01 Dec 2011 11:00:00 GMThttp://html5advent2011.digitpaint.nl/1/Digitpaint