はてなブックマーク

A while ago (I think it was around the release of the iPad), the Apple.com website got a new navigation menu on the top of the page. This menu bar was a lot darker than the previous, grey version, but looks just as great. One thing which I noticed about the navigation, is that the buttons are created out of images. That’s the moment I thought we could do better, using some nifty CSS3 techniques. S

Do you remember the Advanced jQuery background image slideshow I posted last year? Because of that tutorial, reader Evens sent me an e-mail, asking how the effect on the website from Climate Crisis could be recreated. It seemed liked an intersting thing to do, so I took the time to try to create the same effect. With the help of some small HTML, nifty CSS and loads of jQuery, we’re able to create

Although I didn’t like CSS animations at first, the more I work with it, the more I do like the way it’s implemented. A couple of days ago, I visited a website called Pubwich. The overall design of the website looks pretty good, but the part with the social media buttons attracted me even more. When you hover a icon, a small tooltip is displayed with the name of the social media. All other icons h

Do you remember the Wicked CSS3 3d bar chart that I placed online a couple of weeks ago? Paul Irish left a comment, requesting for an example with transitions. My reply was that I was already working on that, and today I’m proud to release the animated wicked CSS3 3d bar chart. The principle is the same as the previous version: Create a beautiful 3d bar chart. But this time, we don’t create a "sta

More and more CSS3 articles are popping up on Marcofolio and all across the web. Although CSS3 is just future talk (since not all browsers support it yet), it’s pretty cool to get a sneak peak on what the future will hold for us. While browsing the web, I came across a pretty cool 3d bar chart created with Flash. I was wondering if I could recreate the same neat effect using pure CSS3 and started

Today, we’re going to do a relatively simple jQuery tutorial. Rating systems are used a lot on websites, for example to rate how good a certain product, article or comment is. I slightly wanted to improve this idea, by making it more visually attractive. By using the jQuery Color plugin, we can animate colours. Simply use the animate() function from jQuery to have colours fade to another colour. W

A couple of days ago, somebody tweeted a great looking CSS3 example. I was absolutely stunned by the example And all that Malarkey created and was wondering how he was able to produce that kind of effect. I knew about the CSS3 transition property, but how to create that 3d effect? At that point, I started digging through the Safari Reference Library, where I eventually found the Safari CSS Visual

A couple of weeks ago, I received an e-mail from a guy named Patrick. He just visited the website from Philadelphia and wanted to know how to create the slideshow header that’s on top of the page. Since I was also impressed by the effect, I took the time to recreate this effect myself. Our focus is the background image slideshow (including the text), not the other things (like the dropdown menu).

Bokeh – In photography, bokeh is the blur, or the aesthetic quality of the blur, in out-of-focus areas of an image, or "the way the lens renders out-of-focus points of light." (from Wikipedia). I’m pretty sure you’ve seen this effect before, since there are loads of wallpaper roundups and tutorials using this technique. Currently, one of my favourite wallpapers has to be this bokeh effect from -ko