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!

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!

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 (4) | 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!