Your SlideShare is downloading. ×
  • Like
Bling css3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

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

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

Published in Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
963
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

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