Contenu connexe Similaire à Bling css3 (20) Bling css32. Bling with CSS3:
Effect and Animations
:
| |
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
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
32. AU REVOIR
PRATIK PATEL
@PRPATEL
PRPATEL@TRIPLINGO.COM
Saturday, January 28, 2012