The document appears to be a presentation about using CSS3 for animations and user interfaces. It includes code snippets and demos of using CSS3 properties like transitions, transforms, and Webkit extensions to create animated effects like sliding and flipping flashcards. The presentation discusses techniques for visual indicators, animations, scaling, layouts, and interactions that can enhance user interfaces with CSS3. Demo code is provided for a sliding flashcard effect implemented with mouse events and CSS transitions/transforms.

1.  

Saturday, January 28, 2012

2. Bling with CSS3:
Effect and Animations
 :
  |  |  
Saturday, January 28, 2012

3. Early internet:
flaming logos
FTW!!!!!
Saturday, January 28, 2012

4. Flames, Really?!
• , .
•      
•  
•  - 
PRATIK PATEL | CTO
Saturday, January 28, 2012

5. DEMO:
FLAMES W/
CSS
PRATIK PATEL | CTO
Saturday, January 28, 2012

6. CSS3 magic
• -   
•     
•   
•     
•     -
   
PRATIK PATEL | CTO
Saturday, January 28, 2012

7. -
["0 0em 0em #7C0003", "0 -0.05em 0.05em #7C0003", "0 -0.1em 0.1em
#7C0003", "0 -0.2em 0.2em #C51105", "0 -0.25em 0.25em #C51105", "0
-0.3em 0.3em #C51105", "0 -0.35em 0.35em #DC3B06", ...
PRATIK PATEL | CTO
Saturday, January 28, 2012

8. 
$spans = $(this).find('span');
setInterval(function () {$spans.each(burn);}, 200);
PRATIK PATEL | CTO
Saturday, January 28, 2012

9.  
while (c < colors.length)
{
// random height
s = 2 + Math.round(Math.random() * 1);
while (s--)
{
// horz vert blur color
shadow = '0 ' + h + 'em ' + -h + 'em ' + colors[c];
// multiple shadows are supported!
textShadows.push(shadow);
// height of flame
h -= 0.05;
}
c++;
}
$(this).css({textShadow: textShadows.join(', ')});
PRATIK PATEL | CTO
Saturday, January 28, 2012

10. Hey isn’t this a preso on CSS3?
      
 
PRATIK PATEL | CTO
Saturday, January 28, 2012

11. “THE BEST TRICK ARE THE
OLD TRICKS.”
"ANONYMOUS
“NEW NEEDS NEED NEW
TECHNIQUES.”
"JACKSON POLLOCK
PRATIK PATEL | CTO
Saturday, January 28, 2012

12. CSS3
•     
     
•   
•     
•  ,  .   
  -  .
• ,   __  
PRATIK PATEL | CTO
Saturday, January 28, 2012

13.    
1. 
2. 
3. 
4. 
5. 
PRATIK PATEL | CTO
Saturday, January 28, 2012

14. Using CSS3 for
User Interfaces
Saturday, January 28, 2012

15. Animations
•  
•   
•  - 
PRATIK PATEL | CTO
Saturday, January 28, 2012

16. DEMO:
FLASHCARDS
PRATIK PATEL | CTO
Saturday, January 28, 2012

17. Webkit extensions
•--  :
• ---
•---
•---
•----
--: <> <> <_> <> , ...;
PRATIK PATEL | CTO
Saturday, January 28, 2012

18. -
#cf4 {
position:relative;
margin:0 auto;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transition: all 0.2s ease-in-out;
}
#cf4 div {
position:absolute;
-webkit-transition: all 0.5s ease-in-out;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
PRATIK PATEL | CTO
Saturday, January 28, 2012

19.   
var startXPosition = 0;
front.addEventListener('mousedown', function(data)
{
startXPosition = data.x;
});
front.addEventListener('mouseup', function(data)
{
processEnd(data.x);
});
function processEnd(finalXPosition) {
if (startXPosition > finalXPosition+5) {
// left swipe
nextCard();
PRATIK PATEL | CTO
Saturday, January 28, 2012

20.   
function slideLeft() {
console.log('slideLeft');
var card = document.getElementById("cf4");
card.style["left"] = "700px";
setTimeout(function () {
card.style["top"] = "-1000px";
}, 400);
setTimeout(function () {
card.style["left"] = "-700px";
}, 500);
setTimeout(function () {
card.style["top"] = "0px";
}, 600);
}
card.style["left"] = "0px";
PRATIK PATEL | CTO
Saturday, January 28, 2012

21. transition property
• |  | <>
• 
• 
•  -- 
•   
PRATIK PATEL | CTO
Saturday, January 28, 2012

22. Webkit exts in JS
•         

var front = document.getElementById("front");
front.style["WebkitTransform"] = "scale
(0,0)";
•      -   

•    :
. += " ";
PRATIK PATEL | CTO
Saturday, January 28, 2012

23. -
nction flipFront()
var front = document.getElementById("front");
var back = document.getElementById("back");
front.style["WebkitTransform"] = "scale(0,0)";
// reseting transition settings is quirky
// front.style["WebkitTransition"] = "all 1s ease-in-out;";
back.style["WebkitTransform"] = "scale(1,1)";
PRATIK PATEL | CTO
Saturday, January 28, 2012

24. transform
• 
• 
• 
•
•
•
PRATIK PATEL | CTO
Saturday, January 28, 2012

25. 
.rotatedY{
-webkit-transform: rotateY(30deg);
}
.rotatedX{
-webkit-transform: rotateX(30deg);
}
.translated{
-webkit-transform: translate(540px,200px);
}
PRATIK PATEL | CTO
Saturday, January 28, 2012

26. Web to Mobile
•  :
• : , 
• : , 
PRATIK PATEL | CTO
Saturday, January 28, 2012

27. DEMO:
RUNNING ON
IPAD
PRATIK PATEL | CTO
Saturday, January 28, 2012

28. Why doesn’t the
next & previous
gesture work on the
iPad?
Saturday, January 28, 2012

29. More CSS3
•  
•  
•  
•  
PRATIK PATEL | CTO
Saturday, January 28, 2012

30. DEMO: MORE
BLING
PRATIK PATEL | CTO
Saturday, January 28, 2012

31. Q&A
Saturday, January 28, 2012

32. AU REVOIR
PRATIK PATEL
@PRPATEL
PRPATEL@TRIPLINGO.COM
Saturday, January 28, 2012