                Saturday, January 28, 2012
Bling with CSS3:                             Effect and Animations                              :            ...
Early internet:                              flaming logos                                    FTW!!!!!Saturday, January 28,...
Flames, Really?!  • , .  •        •    •  -                             ...
DEMO:                        FLAMES W/                           CSS                               PRATIK PATEL | CTOSatur...
CSS3 magic  • -     •       •     •  ...
-  ["0 0em 0em #7C0003", "0 -0.05em 0.05em #7C0003", "0 -0.1em 0.1em  #7C0003", "0 -0.2em 0.2em #C51105", "0 -0....
  $spans = $(this).find(span);  setInterval(function () {$spans.each(burn);}, 200);                              ...
                while (c < colors.length)          {               // random height               s = 2 + Math...
Hey isn’t this a preso on CSS3?                                                      ...
“THE BEST TRICK ARE THE                     OLD TRICKS.”                    "ANONYMOUS                   “NEW NEEDS NEED N...
CSS3  •                                                       ...
          1.        2.        3.        4.        5.                  ...
Using CSS3 for                             User InterfacesSaturday, January 28, 2012
Animations  •    •     •  -                                 ...
DEMO:              FLASHCARDS                             PRATIK PATEL | CTOSaturday, January 28, 2012
Webkit extensions  •--  :  • ---  •---  •--...
-          #cf4 {          	 position:relative;          	 margin:0 auto;          	 -webkit-tap-highlight...
              var startXPosition = 0;            front.addEventListener(mousedown, function(data)          	...
                 function slideLeft() {               	console.log(slideLeft);                  var card = ...
transition property  • |  | <>  •   •   •  --   •      ...
Webkit exts in JS  •             var front = document.getElementById("front");  fro...
-nction flipFront()var front = document.getElementById("front");var back = document.getElementById("back");...
transform  •   •   •   •  •  •                             PRATIK PATEL | CTOSaturda...
  .rotatedY{    -webkit-transform: rotateY(30deg);  }  .rotatedX{    -webkit-transform: rotateX(30deg);  }  .tra...
Web to Mobile  •  :  • : ,   • : ,                               PRATIK...
DEMO:             RUNNING ON                IPAD                             PRATIK PATEL | CTOSaturday, January 28, 2012
Why doesn’t the          next & previous          gesture work on the          iPad?Saturday, January 28, 2012
More CSS3  •    •    •    •                               PRATIK PATEL...
DEMO: MORE               BLING                             PRATIK PATEL | CTOSaturday, January 28, 2012
Q&ASaturday, January 28, 2012
AU REVOIR                                  PRATIK PATEL                                      @PRPATEL                     ...
Upcoming SlideShare
Loading in …5
×

Bling css3

1,051 views

Published on

This is the presentation I gave for the Atlanta HTML5 Meetup on January 26, 2012. Enjoy!

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

  • Be the first to like this

No Downloads
Views
Total views
1,051
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Bling css3

  1. 1.   Saturday, January 28, 2012
  2. 2. Bling with CSS3: Effect and Animations  :   |  |  Saturday, January 28, 2012
  3. 3. Early internet: flaming logos FTW!!!!!Saturday, January 28, 2012
  4. 4. Flames, Really?! • , . •       •   •  -  PRATIK PATEL | CTOSaturday, January 28, 2012
  5. 5. DEMO: FLAMES W/ CSS PRATIK PATEL | CTOSaturday, January 28, 2012
  6. 6. CSS3 magic • -    •      •    •      •     -     PRATIK PATEL | CTOSaturday, January 28, 2012
  7. 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 | CTOSaturday, January 28, 2012
  8. 8.  $spans = $(this).find(span); setInterval(function () {$spans.each(burn);}, 200); PRATIK PATEL | CTOSaturday, January 28, 2012
  9. 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 | CTOSaturday, January 28, 2012
  10. 10. Hey isn’t this a preso on CSS3?          PRATIK PATEL | CTOSaturday, January 28, 2012
  11. 11. “THE BEST TRICK ARE THE OLD TRICKS.” "ANONYMOUS “NEW NEEDS NEED NEW TECHNIQUES.” "JACKSON POLLOCK PRATIK PATEL | CTOSaturday, January 28, 2012
  12. 12. CSS3 •            •    •      •  ,  .      -  . • ,   __   PRATIK PATEL | CTOSaturday, January 28, 2012
  13. 13.     1.  2.  3.  4.  5.  PRATIK PATEL | CTOSaturday, January 28, 2012
  14. 14. Using CSS3 for User InterfacesSaturday, January 28, 2012
  15. 15. Animations •   •    •  -  PRATIK PATEL | CTOSaturday, January 28, 2012
  16. 16. DEMO: FLASHCARDS PRATIK PATEL | CTOSaturday, January 28, 2012
  17. 17. Webkit extensions •--  : • --- •--- •--- •---- --: <> <> <_> <> , ...; PRATIK PATEL | CTOSaturday, January 28, 2012
  18. 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 | CTOSaturday, January 28, 2012
  19. 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 | CTOSaturday, January 28, 2012
  20. 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 | CTOSaturday, January 28, 2012
  21. 21. transition property • |  | <> •  •  •  --  •    PRATIK PATEL | CTOSaturday, January 28, 2012
  22. 22. Webkit exts in JS •           var front = document.getElementById("front"); front.style["WebkitTransform"] = "scale (0,0)"; •      -     •    : . += " "; PRATIK PATEL | CTOSaturday, January 28, 2012
  23. 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 | CTOSaturday, January 28, 2012
  24. 24. transform •  •  •  • • • PRATIK PATEL | CTOSaturday, January 28, 2012
  25. 25.  .rotatedY{ -webkit-transform: rotateY(30deg); } .rotatedX{ -webkit-transform: rotateX(30deg); } .translated{ -webkit-transform: translate(540px,200px); } PRATIK PATEL | CTOSaturday, January 28, 2012
  26. 26. Web to Mobile •  : • : ,  • : ,  PRATIK PATEL | CTOSaturday, January 28, 2012
  27. 27. DEMO: RUNNING ON IPAD PRATIK PATEL | CTOSaturday, January 28, 2012
  28. 28. Why doesn’t the next & previous gesture work on the iPad?Saturday, January 28, 2012
  29. 29. More CSS3 •   •   •   •   PRATIK PATEL | CTOSaturday, January 28, 2012
  30. 30. DEMO: MORE BLING PRATIK PATEL | CTOSaturday, January 28, 2012
  31. 31. Q&ASaturday, January 28, 2012
  32. 32. AU REVOIR PRATIK PATEL @PRPATEL PRPATEL@TRIPLINGO.COMSaturday, January 28, 2012

×