kremalicious

I’m thrilled to announce that kremalicious.com now uses an iPhone optimized theme. When you browse this website with your iPhone everything will automagically switch to the new kremalicious iPhone theme which is simply called kremalicious{iPhone}. See those hip brackets?

How does it work?

When the website detects an iPhone or iPod Touch it will automatically switch to another freshly created theme which is absolutely seamless to the user. This detection is done by the wonderful slim iPhone Wordpress plug-in from ContentRobot which was slightly modified by me.

The theme itself makes heavy use of the -webkit-border-radius css option to display all the round corners. That’s why there are just four images at work in the whole theme which makes it load in no time even on EDGE connections. And because just the theme is switching all the content remain the same so you don’t have just a shortened mobile version of this website.

Read the rest of this entry »

Discuss (0) | 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!

As you may know there’s a nice parallax effect implemented on this website. Just resize your browser window and you can see the black polaroids in my header flying on different layers. As I stated in an earlier post there is already some usage for it around the web while this effect seems to be first used by the guys from Silverback. If you don’t know what this effect is about head over to thinkvitamin to get to know what it is and how you can achieve it.

But now Marco Kuiper from marcofolio.net adds another usage for it. He created a cool optical illusion with just plain css/html and some pictures. You can see a demo of this effect in action on Marco’s website. Head over to the demo and resize your browser window. You should articulate something like “whoooot!” now. Marco has written some words about it too and you can download the demo. He has also done a nice tutorial how to achieve this optical illusion. Very cool!

(Via CSS-Tricks)

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

Sitepoint and 99Designs give you a free full Photoshop book called The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques. The book is intended to help Web-Designers in their workflow with Adobe Photoshop.

You can download a print quality pdf file of the book for a limited time. So head over fast to the book’s website and get your free copy.

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

They won’t stop with their cutting edge love. After having text-shadow implemented since many years and having a bunch of other cool stuff implemented like CSS gradients or CSS box-shadow the WebKit team freshly announced a new cool feature: CSS alpha masks.

From the Surfin’ Safari Blog:

WebKit now supports alpha masks in CSS. Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display. In other words, you can clip to complex shapes based off the alpha of an image.

It even can be applied to a video-element.

(Via Surfin’ Safari)

Discuss (0) | 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!

Writing right now on a longer article about text-shadow and it’s implementation in WebKit, the rendering engine which powers Safari and Konqueror. But now this exciting news popped up from Surfin’ Safari, the blog of the WebKit development team:

WebKit now supports gradients specified in CSS. There are two types of gradients: linear gradients and radial gradients.

Take a look at the entry on Surfin’ Safari to learn how those css-based gradients work and how they can be coded:

So what exactly is a gradient in CSS? It is an image, usable anywhere that image URLs were used before. That’s right… anywhere.

You can use gradients in the following places:

background-image
border-image
list-style-image
content property

Although the WebKit team is saying it is supported “now” a commenter on Surfin’ Safari states that it seems the whole function isn’t included in the latest nightly builds of WebKit.

So it will take some time, ’til it’s worth replacing the gradient images on my h3 and h4 headlines with just simple css code…

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

Nice article over at i love typography about what to have in mind when choosing a typeface for your project, whether it’s for web or print.

On choosing type - First principles:

Before we get to the nitty-gritty of choosing type, let’s briefly talk about responsibility. Fundamentally, the responsibility we bear is two-fold: first we owe it to the reader not to hinder their reading pleasure, but to aid it; second, we owe a responsibility to the typeface or typefaces we employ. Good typefaces are designed for a good purpose, but not even the very best types are suited to every situation. Personally, I’m always a little nervous about using a newly acquired typeface. A new typeface is something like a newborn baby (though it doesn’t throw-up on you): don’t drop it, squeeze it too hard, hold it upside-down; in other words, don’t abuse it, treat it respectfully, carefully.

(Via I love typography.)

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

An awesome creative idea for a blog post about Web-Design from Joshua Clanton6 Web Design Tips from Leonardo da Vinci:

Leonardo Da Vinci was one of the greatest artists of the Renaissance, leaving behind a legacy that continues to inspire artists, scientists and others. Here are six things we can learn from him about web design.

He also made two other articles in this creative style:
5 Web Design Tips from Michelangelo
What Medieval Philosophers can teach us about Web Design

(Via Joshua Clanton.)

Discuss (0) | 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!