CSS3 and jQuery

4,626 views

Published on

A simple way that you can start with CSS3 from the beginner.

===
https://acoollist.com/

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
4,626
On SlideShare
0
From Embeds
0
Number of Embeds
1,984
Actions
Shares
0
Downloads
41
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

CSS3 and 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-letter :only-of-type ... :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

×