kremalicious

Personally I blog everything with RedSweater’s awesome application MarsEdit. MarsEdit has a cool preview window included where you can see your writing live while you type. The formatting of this preview is based on simple HTML and CSS so the style is pretty customizable.

A while ago I’ve made a custom style for the blog on kremalicious.com and would like to share this style with you. The style is based on the colors used on kremalicious.com with a black background and light grey text on top of it. The links have the same blueish hover style as on my website:

Read the rest of this entry »

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

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!

Apple released a developer preview of the upcoming version of its web browser Safari to registered Developers. The Safari 4 Developer Preview is available for Mac OS X Tiger/Leopard and Windows. While the main changes are not visible to the user the most significant visible new feature is the overhauled Web Inspector.
Read the rest of this entry »

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

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!

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!