Your SlideShare is downloading. ×
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

PreDevCampSF - CSS3 Tricks

4,096

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 …

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,096
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
63
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×