6 Webkit Tricks to Easily Create Stunning iPhone Web Designs

Webkit is the display engine created by Apple to render pages in Safari on OS X and the iPhone. Like Firefox, it has a series of specific CSS properties you can use to design pages for Mac or iPhone. Unfortunately, though, there isn’t much documentation on the web about Webkit. So, here’s a list of six Webkit properties you can use for your next iPhone or Mac website. Remember, these don’t work on any other browser, so I wouldn’t recommend using them for a PC-oriented website without CSS hacks or IE fallbacks.

Webkit Tricks for iPhone Sites

1. Create Simple Reflections Without Javascript

-webkit-box-reflect: direction offset mask-box-image;

For direction, you can specify what side of the box you want the reflection to show up on. Valid options are above, below, left, or right. Offset is the distance between the beginning of the reflection and the end of the box. It can be a percentage or a measurement (like 5px). The mask-box-image property refers to an image used to mask the reflection.

2. Rounded Corners Without Images

I mentioned this in my post about reducing images with CSS.

-webkit-border-radius: 10px;

3. Easily Shadow Anything

You can add drop shadows to boxes, text, and images with the following Webkit property:

-webkit-box-shadow: hoff voff blur color;

hoff and voff refer to the offset of the shadow. Change the width and opacity of the shadow with the blur setting.

4. Bring Back the <marquee>

Yes, you can bring back the class and sophistication of the scrolling marquee. Here’s the CSS property:

-webkit-marquee: direction increment repetition style speed;

• direction specifies the direction of the marquee. left and right are valid directions.
• increment is defined in measurements, and it tells Webkit how far to move the object each iteration.
• repetition refers to how many times to repeat the marquee.
• style describes how the marquee should move. You can use commands like alternate, none, scroll, or slide.

speed is how fast the marquee should move.

5. Outline Text with Webkit

-webkit-text-stroke: width color;

6. Create Crazy Tap Colors on iPhone

You can easily change the tap color of your buttons on the iPhone to create a nice custom effect. Here’s the code:

-webkit-tap-highlight-color: color;

Be sure to subscribe to Cherrysave for free by RSS or email to keep up with the latest design tips and tutorials.

Bookmark this on Delicious