This presentation was given at PreDevCampSF on August 10, 2009. It goes over some useful components of newer versions of CSS, as well as some proprietary webkit extensions that can make WebOS development much easier.

1. CSS3 Tricks
Dan Kurtz - dan@selfawaregames.com

2. What is Word Ace?

3. What is Word Ace?

4. What is Word Ace?

5. Why is CSS3 a Secret?
App coders don’t use CSS
Web programmers use lowest-common-denominator
CSS.

6. Holdovers from CSS2
Opacity
display: inline-block;

7. -webkit-border-image
<div class="border-image-demo1"><span>10</span></div>
-webkit-border-image: url(../
images/menus/dashboard-newitem-
badge.png) 0 12 0 12 repeat 12px 12px
stretch;
border-width: 0px 12px 0px
12px;
1px

8. color: #fff;
position: absolute;
top: 50px
min-width: 24px;
height: 28px;
-webkit-border-image: url(images/menus/dashboard-
newitem-badge.png) 0 12 0 12 repeat stretch;
text-align: center;
line-height: 30px;
border-width: 0px 12px 0px 12px;
/* All the above, plus: */
#border-image-demo2 span {
position:relative;
margin: 0 -6px;
font-size: 16px;
}

9. Working version
#border-image-demo3 {
color: #fff;
min-width: 24px;
height: 28px;
position: absolute;
top: 100px;
text-align: center;
line-height: 30px;
-webkit-border-image: url(images/menus/dashboard-
newitem-badge.png) 0 12 0 12 repeat stretch;
-webkit-box-sizing: border-box; /* !!! */
border-width: 0px 12px 0px 12px;
}
#border-image-demo3 span {
position:relative;
margin: 0 -6px;
font-size: 16px;
}

10. -webkit-transform
It’s like CSS within CSS!
Whooooooooa. Cosmic.

11. -webkit-transform: translate(20px, 20px);
-webkit-transform: scale(.5, 1);
(also: skew! and combos!)
-webkit-transform: rotate(60deg);

12. -webkit-transition
Automatically animate an element when its properties
change.
Specify which properties to animate, their duration, and
the curve.

13. Example 1: Sliding in.
#loading-screen {
width: 320px;
height: 480px;
position: absolute;
top: 0px;
right: -320px;
-webkit-transition-property: right;
-webkit-transition-duration: 1s;
-webkit-transtion-curve: ease-in;
background-image: url('../images/mainMenu/mainMenu-
background.png');
z-index: 10000;
}
#loading-screen.active {
right: 0px;
}

14. Example 2: Revealing cards
.card {
display: block;
width: 50px;
height: 70px;
position: relative;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: .5s;
-webkit-transform: scale(0, 1);
}
.card.active {
-webkit-transform: scale(1, 1);
}
myCard.addClassName(‘active’);

15. Example 2: Revealing cards
.card {
display: block;
width: 50px;
height: 70px;
position: relative;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: .5s;
-webkit-transform: scale(0, 1);
}
.card.active {
-webkit-transform: scale(1, 1);
}
myCard.addClassName(‘active’);

16. -webkit-transition-caveats: a-few;
No easy way to cancel animations.
Updates don’t happen until the interpreter is idle.
It’s “hardware-accelerated” but speed is still an issue.
Palm?
-webkit-transition-delay doesn’t work.

17. Other Goodies
text-overflow: ellipsis;
background-color: rgba(0, 0, 0, .7);
Makes the background 70% opaque.
Does not affect opacity of element contents.

18. References
Supported CSS properties in WebKit:
http://developer.apple.com/documentation/
appleapplications/Reference/SafariCSSRef/Articles/
StandardCSSProperties.html
CSS3 Showcase: http://css3.info
Me again: dan@selfawaregames.com