Your SlideShare is downloading. ×
CSS3 vs jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

CSS3 vs jQuery

1,236
views

Published on

The presentation was hold during the BarCamp Phnom Penh 2011.

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,236
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
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. CSS3 vs. jQueryPrak Sophy (@psophy)
  • 2. www.web-essentials.asia
  • 3. www.typo3cambodia.org
  • 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. 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. 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. Selectors...jQuery: :button, :even :empty :first-child :gt :has :last-child :parent ...
  • 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. CSS3.menu > li > ul { display: none;}.menu > li:hover > ul { display: block; }
  • 10. jQuery$(.menu > li).hover( function(){ $(ul, this).show(slow); }, function(){ $(ul, this).hide(slow); });
  • 11. :nth-child
  • 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. 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. FORM VALIDATION
  • 15. jQuery Validate Enginehttps://github.com/posabsolute/jQuery-Validation-Engine
  • 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. jQuery$("#form.id").validationEngine();//Demo http://www.position-relative.net/creation/formValidator/
  • 18. Using CSS3 and HTML5 /* A List Apart: Forward Thinking Form Validation (http://goo.gl/7d5yQ) */
  • 19. CSS3 UI pseudo-class:valid:invalid:required:optional:out-of-range:read-only:read-write
  • 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. 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. 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. ANIMATION
  • 24. jQuery Animation Methods.animate() .slideDown.fadeIn() .slideToggle().fadeOut() .slideUp.fadeToggle() .stop().fadeTo() .toggle().hide().show()
  • 25. jQuery Animate$("#example_box").animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 1500 );
  • 26. CSS3 Transitionstransition-property: background;transition-duration: 0.3s;transition-timing-function: ease;/* Dont forget vendors prefix */-moz-transition-webkit-transition-o-transition
  • 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. /* Understanding CSS3 Transitions */http://goo.gl/k9EcX/* Transition with Tranform */http://goo.gl/HB2mchttp://goo.gl/KvclU
  • 29. CSS3 Transform http://goo.gl/QZvVw http://goo.gl/xL2yv
  • 30. CSS3 Transformtransform: translate(100px, 100px);/* Dont forget vendors prefix */-moz-transform-webkit-transform-o-transform
  • 31. CSS3 Transformtransform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
  • 32. CSS3 Animation(@) http://goo.gl/c8QJB http://goo.gl/uv33G
  • 33. CSS3 Animation. The Keyframe @ Rule. animation-name. animation-duration. animation-timing-function. animation-iteration-count. animation-direction. animation-delay
  • 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. 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. TAG TEAM: jQuery with CSS3
  • 37. http://jquerymobile.com/
  • 38. THANK YOU! http://kooms.info