關於 CSS3 的視覺效果

在 tossug 的 HTML5 讀書會中負責關於 CSS3 一些視覺效果的部份，這是我整理的一些重點

Transcript

1. CSS3 Visual Effects Eric Shangkuan (ericsk) ericsk@gmail.com
2. Outline •CSS Intro •Gradients •Mask •Reflection •Transition •Transform •Animation
3. The Histroy of CSS •CSS1 (1996) ◦ MSIE3 first (limited) supports CSS. ◦ Fully supported in Mac's IE5 (Mar. 2000) ◦ Opera supports in (Jun. 2001) ◦ BUGGY, no longer be maintained •CSS2 (1997) ◦ Published as W3C Recommendation (1998). ◦ CSS2.1 is only in candidate recommendation (2007) •CSS3 (1998) ◦still under development ◦modularized
4. CSS3: Browser Support •Ref: Web Designer's Checklist. ◦IE9 starts working on HTML5/CSS3 (slowly) ▪Or use filter/DXImage workaround. ◦Firefox 3.7 (4) supports more CSS3 (-moz prefix) ◦Safari/Chrome almost fully support CSS3 (-webkit prefix) ▪Mobile Safari (iPhone) ▪Android browser ▪Chrome ext/webapp ◦Opera focuses on CSS3 too (-o prefix)
5. Gradients
6. CSS3 Gradients •Spec: CSS3 Image Values (gradients section). •Linear and Radial gradients (fig) •WebKit-based and Gecko-based browsers. linear gradient radial gradient
7. Linear Gradients •Gradient grows in linear •How to create a gradient ◦ Start/End point (or angle) ◦ Color stops •CSS Property: ◦ -webkit-gradient(linear, ...) ◦ -moz-linear-gradient(...) -webkit-gradient(linear, left top, left bottom, from(#00abeb), to (#fff))
8. Mask & Reflection
9. Mask •Mask can be set by an image (gradient), or a SVG. • -webkit-mask-image/-webkit-mask-box-image property •Demo
10. Reflection •Use -webkit-box-reflect property: ◦ above, below, left, right ◦ offset ◦ mask -webkit-box-reflect: below 3px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.75, transparent), to(white));
11. Transitions
12. What's Transitions? •How CSS properties are made to smoothly change from one value to another over a given duration. •Browser capabilities: ◦ Safari 4+, Chrome 4+ (-webkit-transition-*) ◦ Firefox 3.7+ (-moz-transition-*) ◦ Opera 10.5+ (-o-transition-*) ◦ Mobile Safari (-webkit-transition-*) ◦ Android browser 1.6+ (-webkit-transition-*) ◦ IE9 ??
13. What's Transitions? •How CSS properties are made to smoothly change from one value to another over a given duration. •Browser capabilities: ◦ Safari 4+, Chrome 4+ (-webkit-transition-*) ◦ Firefox 3.7+ (-moz-transition-*) ◦ Opera 10.5+ (-o-transition-*) ◦ Mobile Safari (-webkit-transition-*) ◦ Android browser 1.6+ (-webkit-transition-*) ◦ IE9 ??
14. CSS Transition Properties • transition-property ◦ specify which property(-ies) to transite ◦ e.g. background-color, font-size, ... • transition-duration ◦ How long does the transition retain ◦ e.g., 0.5s, 2s, ... • transition-timing-function ◦ Provides a smooth curve/path for the transition. (Cubic Bezier curve) ◦ e.g., linear, ease, ease-in, ease-out, ease-in-oucubic- bezier().... • transition-delay ◦ when will the transition start ◦ e.g., 1s, 3s, 2.45s, ...
15. Transition Sample: Sliding •Move an element with sliding effect ◦ How to setup the transition properties ◦ Multiple css properties transition ◦ What are the effects among different arguments? •Demo •Evenwu's demo.
16. Binding `Transition End` Event •Bind the webkitTransitionEnd event. •Sample code: elem.addEventListener('webkitTransitionEnd', function(evt) { // do something while the transition ends. }, false);
17. Transforms
18. CSS3 Transform •Affine Transformations: scale, rotation, skew, and translation •Supports 2D and 3D transformations ◦ In 3D transformation, it's necessary to specify the perspective property. (-webkit-perspective) ◦ (Currently) Only Safari/Mobile Safari supports 3D transforms •Supported in Safari, Chrome, Mobile Safari, Android browsers. ◦ -webkit-transform: ... ◦ could be integrated with CSS transitions. ◦ In Firefox, use -moz-transform ◦ In Opera, use -o-transform
19. Transform Demo: Rotation •Rotate an object with 30deg ◦ -webkit-transform: rotate(30deg) ◦Demo •(3D) Rotate according Y-axis: ◦Set the perspective ◦ rotateY(40deg) ◦Demo •Other demos.
20. Transform Demo: Card Flip •Apple's HTML5 Sample. ◦Card Flip sample •Back-face visibility ◦ -webkit-backface-visibility: hidden/visible;
21. Transform Properties 2D Transform • rotate(30deg) • ... • translate(20px, 30px) • translateX(40px) • translateY(30px) • ... • scale(3) • scaleX(3) • scaleY(3) • ... • ... 3D Transform • rotateY(30deg) • ... • translate3D(10px, 20px, 30px) • translateZ(30px) • ..
22. Animations
23. CSS3 Animation Module •Specify how to change styles within a time frame. ◦ define the animation key frames ◦ apply the animation name to enable animating •Browser supports: ◦ Safari 4 ◦ Chrome 4 ◦ Mobile Safari (iphone 2.0) ◦ Android browser
24. CSS3 Animation Properties •-webkit-animation-name ◦ which animation is applied. ◦ declared in @-webkit-keyframes <name> •-webkit-animation-duration ◦ how long is the animation being executed. (an iteration) ◦ value: 1s, 0.5s, 3s, ... •-webkit-animation-iteration-count ◦ how many times is the animation being executed. ◦ an integer value or infinite.
25. CSS3 Animation Sample @-webkit-keyframes bounces { from { -webkit-transform: translateY(100px); -webkit-animation-timing-function: ease-out; } 25% { -webkit-transform: translateY(50px); -webkit-animation-timing-function: ease-in; } 50% { -webkit-transform: translateY(100px); -webkit-animation-timing-function: ease-out; } 75% { -webkit-transform: translateY(75px); -webkit-animation-timing-function: ease-in; } to { -webkit-transform: translateY(100px); } }
26. Binding `Animation End` Event •Bind the webkitAnimationEnd event. •Sample code: elem.addEventListener('webkitAnimationEnd', function(evt) { // do something while the transition ends. }, false);
27. References •Reference