kremalicious

In this article I present you the finest icons of the fuel of a lot of designers and students (and other people too) available on the web. I’ve just released my own coffee cup icon but this beverage seem to have inspired a lot of other beautiful icons especially for Mac OS X.

Now just get your next coffee, sit back and enjoy this little showcase. Just click on the images to get to the icon sources. At the end of the article you’ll find links to some nice high quality coffee tutorials. And remember you will have more control over time itself if you reach your 100th cup of coffee.

Read the rest of this entry »

Discuss (4) | Digg This! | Save to Del.icio.us | Stumble It! | Float This!

Been so in love with the parallax effect that I have to post another article about it. For the non-geeks: I don’t mean measuring distances between objects in space, the parallax error in photography, any StarTrek episode, the movie Parallax View and definitely not DC Comic’s Parallax monster.

I mean Parallax Scrolling which is a technique often used in good ol’ arcade and video games like Moon Patrol or Sonic the Hedgehog. In such 2D games parallax scrolling was used to create an illusion of three dimensional depth.

Since our operating systems are mainly 2D too we can use this pseudo 3D technique to create the same illusion in our web browsers. Of course this was first done by flash designers and it’s a popular effect used in flash based websites or parts of it.

But with the rise of CSS this technique can now be done without the use of flash as Alex Walker and Paul Annett discovered. You see we are now very close to the Atari with Web-Design.

So it’s time for a first showcase of websites using this effect. At the end of this article you’ll find some tutorials for making this effect too. And as you can see there’s a parallax effect in the header of this website too so I will not include myself in this showcase list

Read the rest of this entry »

Discuss (16) | Digg This! | Save to Del.icio.us | Stumble It! | Float This!

The aim of this article is to give you a quick introduction of a css property named text-shadow which was first included in CSS2 (but it’s not implemented in all browsers yet). Nevertheless you can make some cool effects with it, which could only be done before by photoshopping text and rendering it as an image.

Because it’s included in Safari since version 1.1(!) Mac users should be aware of various effects done by this property. In fact, most companys and persons with mac users as their main target audience use this effect on their websites.

This article describes how text-shadow works, what you can do with it and which browsers currently support it. At the end of this article I’ve made up some examples and provide a list of useful resources.

Read the rest of this entry »

Discuss (7) | Digg This! | Save to Del.icio.us | Stumble It! | Float This!

If you resize your browser window while you are browsing this website you can see the black polaroids in my header fly and move at different speed on three layers. Pretty cool, huh?

I implemented the header effect of those flying black polaroids on kremalicious.com following the original idea by the folks of clearleft on their silverback teaser page

This effect draw much attention in the webdesign community and meanwhile there are some great articles about this effect. Over at thinkvitamin is a detailed explanation of the effect. Paul Annett from clearleft gives an in-depth-view how they created the parallax effect on their silverback teaser page.

A more common explanation gives Chris Coyier over at css-tricks.com. He uses three star layers to make a cool space-effect.

Discuss (0) | Digg This! | Save to Del.icio.us | Stumble It! | Float This!