kremalicious

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!

Extremely useful post from Daniel Miessler about 9 Lesser Known Safari Features Worth Switching For:

Inline Dictionary:
Safari, being a Cocoa app (OS X), allows us to instantly define words we find. Simply highlight the word and hit the ctrl-cmd-d shortcut. So if I highlight the word ‘functionality’ in Safari and hit the shortcut, here’s what I get.

(Via dmiessler.com.)

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