Adding Rich Graphics and media to Web Content in Safari

6/10/08 15:30

Adding sophistication to your UI

  • Transforms
  • Renaissions
  • Fonts and test

CSS in safari 3.1

CSS Transforms:Translate-Shifts the object

Translate and skew in CSS via a new -webkit-transform property. Transforms behave like position relative in that they don’t affect the layout of the page. You can also provide a full affine transform matrix as a shortcut

WebKit now supports the CSS3 box-shadow property (as -webkit-box-shadow). This property allows you to specify a shadow effect that will be applied to the border box of an object. The syntax of the shadow is identical to text-shadow.

Some fun facts about the feature:

(1) It works with table cells, so you can make a nice evenly spaced grid of shadowed cells.
(2) It works with first-letter and first-line, so you can create a nice raised effect on floating first-letter boxes now.
(3) It works on inline flows that span multiple lines.
(4) If you specify a border-radius, the box-shadow will respect the curvature of the border-radius.

Here’s an example of a table cell grid that has shadows on all the cells.



This is the code:

<style type="text/css">

div.fader img { -webkit-transition: all 1s ease-in-out; }
img.swap1, div.fader:hover img.swap2 { opacity: 1.0; }
div.fader:hover img.swap1, img.swap2 { opacity: 0; }


Here's another interesting effect - a progress bar that counts off 5 seconds in half-second intervals. To start the animation, put your mouse over the line of boxes and wait.

Again, this is achieved using no JavaScript and very little CSS. It's a bit of a hack, but surprisingly effective:

<style type="text/css">

table.fader2 td {
background-color: red;
-webkit-transition-property: background-color;
-webkit-transition-timing-function: cubic-bezier(1,0,1,0);
table.fader2:hover td { background-color: green; }


0 评论: