PreDevCampSF - CSS3 Tricks

4,586 views
4,458 views

Published on

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.

Published in: Technology, Education
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,586
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
63
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

PreDevCampSF - CSS3 Tricks

  1. 1. CSS3 Tricks Dan Kurtz - dan@selfawaregames.com
  2. 2. What is Word Ace?
  3. 3. What is Word Ace?
  4. 4. What is Word Ace?
  5. 5. Why is CSS3 a Secret? App coders don’t use CSS Web programmers use lowest-common-denominator CSS.
  6. 6. Holdovers from CSS2 Opacity display: inline-block;
  7. 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. 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. 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. 10. -webkit-transform It’s like CSS within CSS! Whooooooooa. Cosmic.
  11. 11. -webkit-transform: translate(20px, 20px); -webkit-transform: scale(.5, 1); (also: skew! and combos!) -webkit-transform: rotate(60deg);
  12. 12. -webkit-transition Automatically animate an element when its properties change. Specify which properties to animate, their duration, and the curve.
  13. 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. 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. 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. 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. 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. 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

×