CSS3 vs jQuery

1,544 views

Published on

The presentation was hold during the BarCamp Phnom Penh 2011.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

CSS3 vs jQuery

  1. 1. CSS3 vs. jQueryPrak Sophy (@psophy)
  2. 2. www.web-essentials.asia
  3. 3. www.typo3cambodia.org
  4. 4. CSS3? CSS3 contains just about everything that’s included in CSS2.1 2000-04-14 First Public Draft  2001-01-19 Working Draft Current Working Draft
  5. 5. jQuery? An open source JavaScript library Created by John Resig in 2005  Release in January 14th, 2006 at BarCampNYC Current Version jQuery v1.6.4
  6. 6. SelectorsCSS3: :first-child :empty :last-child :target :nth-child(n) :enable :nth-of-type :display :first-of-type :not(S) :last-of-type ::first-line :only-child ::first- :only-of-type letter :root ... :empty
  7. 7. Selectors...jQuery: :button, :even :empty :first-child :gt :has :last-child :parent ...
  8. 8. HTML <ul class="menu"> <li><a href="/a/1">Menu</a> <ul> <li><a href="/a/a">Sub-menu A</a></li> <li><a href="/a/b">Sub-menu B</a></li> <li><a href="/a/c">Sub-menu C</a></li> </ul> </li></ul>
  9. 9. CSS3.menu > li > ul { display: none;}.menu > li:hover > ul { display: block; }
  10. 10. jQuery$(.menu > li).hover( function(){ $(ul, this).show(slow); }, function(){ $(ul, this).hide(slow); });
  11. 11. :nth-child
  12. 12. CSS3.student-list tbody tr:nth-child(2n) { background: #7CEAE1; } .student-list tbody tr:nth-child(2n + 1) { background: #fcfcfc; } Or....student-list tbody tr:nth-child(odd) { background: #7CEAE1; } .student-list tbody tr:nth-child(even) { background: #fcfcfc; }
  13. 13. jQuery$(".student-list tbody tr:odd").css(background, #7CEAE1);$(".student-list tbody tr:even").css(background, #f5f5f5);Or..$(".student-list tbody tr:nth-child(2n)").css(background,#7CEAE1);$(".student-list tbody tr:nth-child(2n+1)").css(background,#f5f5f5);
  14. 14. FORM VALIDATION
  15. 15. jQuery Validate Enginehttps://github.com/posabsolute/jQuery-Validation-Engine
  16. 16. HTML<input value="2010-12-01"class="validate[required,custom[date]]"type="text" name="date" id="date" /><input value="too"class="validate[required,custom[onlyLetterNumber]]" type="text" name="special"id="special" />
  17. 17. jQuery$("#form.id").validationEngine();//Demo http://www.position-relative.net/creation/formValidator/
  18. 18. Using CSS3 and HTML5 /* A List Apart: Forward Thinking Form Validation (http://goo.gl/7d5yQ) */
  19. 19. CSS3 UI pseudo-class:valid:invalid:required:optional:out-of-range:read-only:read-write
  20. 20. HTML…<label for="email">Email *</label><input type="email" id="email" name="email" placeholder="e.g. ryan@example.net" title="Please enter a valid email" required /> <p class="validation01"> <span class="invalid">Please enter a valid email address e.g. ryan@example.com</span> <span class="valid">Thank you for entering a valid email</span> </p>…
  21. 21. CSS3.validation01 { background: red; color: #fff; display: none; font-size: 12px; padding: 3px; position: absolute; right: -110px; text-align: center; top: 0; width: 100px;}
  22. 22. CSS3input:focus + .validation01 { display: block;}input:focus:required:valid + .validation01 { background: green;}input:focus:required:valid + .validation01 .invalid{ display: none;}input:focus:required:invalid + .validation01 .valid{ display: none;}
  23. 23. ANIMATION
  24. 24. jQuery Animation Methods.animate() .slideDown.fadeIn() .slideToggle().fadeOut() .slideUp.fadeToggle() .stop().fadeTo() .toggle().hide().show()
  25. 25. jQuery Animate$("#example_box").animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 1500 );
  26. 26. CSS3 Transitionstransition-property: background;transition-duration: 0.3s;transition-timing-function: ease;/* Dont forget vendors prefix */-moz-transition-webkit-transition-o-transition
  27. 27. CSS3 Transitions/* Shortcut */transition: background 0.3s ease;/* Multiple properties */transition: background 0.3s ease, width 0.3s linear;/* All properties */transition: all 0.3s ease;
  28. 28. /* Understanding CSS3 Transitions */http://goo.gl/k9EcX/* Transition with Tranform */http://goo.gl/HB2mchttp://goo.gl/KvclU
  29. 29. CSS3 Transform http://goo.gl/QZvVw http://goo.gl/xL2yv
  30. 30. CSS3 Transformtransform: translate(100px, 100px);/* Dont forget vendors prefix */-moz-transform-webkit-transform-o-transform
  31. 31. CSS3 Transformtransform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
  32. 32. CSS3 Animation(@) http://goo.gl/c8QJB http://goo.gl/uv33G
  33. 33. CSS3 Animation. The Keyframe @ Rule. animation-name. animation-duration. animation-timing-function. animation-iteration-count. animation-direction. animation-delay
  34. 34. CSS3 Animation@keyframes resize { 0% { padding: 0; } 50% { padding: 0 20px; background-color:rgba(255,0,0,0.2); } 100% { padding: 0 100px; background-color:rgba(255,0,0,0.9); }}
  35. 35. CSS3 Animation#box { animation-name: resize; animation-duration: 1s; animation-iteration-count: 4; animation-direction: alternate; animation-timing-function: ease-in-out;}/* Dont forget vendors prefix */-moz-transition-webkit-transition-o-transition
  36. 36. TAG TEAM: jQuery with CSS3
  37. 37. http://jquerymobile.com/
  38. 38. THANK YOU! http://kooms.info

×