Post on 01-Nov-2014
description
CSS3 vs. jQueryCSS3 vs. jQueryPrak Sophy (@psophy)Prak Sophy (@psophy)
www.web-essentials.asiawww.web-essentials.asia
www.typo3cambodia.orgwww.typo3cambodia.org
CSS3?CSS3?CSS3 contains just about everything that’s included in CSS3 contains just about everything that’s included in CSS2.1CSS2.12000-04-14 2000-04-14 First Public DraftFirst Public Draft 2001-01-19 2001-01-19 Working DraftWorking DraftCurrent Working DraftCurrent Working Draft
jQuery?jQuery?
An open source JavaScript library An open source JavaScript library Created by John Resig in 2005 Created by John Resig in 2005 Release in January 14th, 2006 at BarCampNYCRelease in January 14th, 2006 at BarCampNYCCurrent Version Current Version jQuery v1.6.4jQuery v1.6.4
SelectorsSelectorsCSS3:CSS3:
:first-child:first-child:last-child:last-child:nth-child(n):nth-child(n):nth-of-type:nth-of-type:first-of-type:first-of-type:last-of-type:last-of-type:only-child:only-child:only-of-type:only-of-type:root:root:empty:empty
:empty:empty:target:target:enable:enable:display:display:not(S):not(S)::first-line::first-line::first-::first-letterletter......
Selectors...Selectors...
jQuery:jQuery::button, :button, :even:even:empty:empty:first-child:first-child:gt :gt :has :has :last-child :last-child :parent:parent......
HTMLHTML
<ul class="menu"><ul class="menu"> <li><a href="/a/1">Menu</a> <li><a href="/a/1">Menu</a> <ul> <ul> <li><a href="/a/a">Sub-menu A</a></li> <li><a href="/a/a">Sub-menu A</a></li> <li><a href="/a/b">Sub-menu B</a></li> <li><a href="/a/b">Sub-menu B</a></li> <li><a href="/a/c">Sub-menu C</a></li> <li><a href="/a/c">Sub-menu C</a></li> </ul> </ul> </li> </li> </ul> </ul>
CSS3CSS3
.menu > li > ul {.menu > li > ul { display: none; display: none; } } .menu > li:hover > ul { .menu > li:hover > ul { display: block; display: block; } }
jQueryjQuery
$('.menu > li').hover($('.menu > li').hover(function(){function(){
$('ul', this).show('slow');$('ul', this).show('slow');},},function(){function(){
$('ul', this).hide('slow');$('ul', this).hide('slow');}}
););
:nth-child:nth-child
CSS3CSS3.student-list tbody .student-list tbody tr:nth-child(2n) tr:nth-child(2n) {{
background: #7CEAE1;background: #7CEAE1; }} .student-list tbody .student-list tbody tr:nth-child(2n + 1)tr:nth-child(2n + 1) { {
background: #fcfcfc;background: #fcfcfc; }}
.student-list tbody .student-list tbody tr:nth-child(odd)tr:nth-child(odd) {{background: #7CEAE1;background: #7CEAE1;
}} .student-list tbody .student-list tbody tr:nth-child(even)tr:nth-child(even) { {
background: #fcfcfc;background: #fcfcfc; }}
Or...Or...
jQueryjQuery$(".student-list tbody $(".student-list tbody tr:oddtr:odd").css('background', '").css('background', '#7CEAE1#7CEAE1');');$(".student-list tbody $(".student-list tbody tr:eventr:even").css('background', '#f5f5f5');").css('background', '#f5f5f5');
$(".student-list tbody $(".student-list tbody tr:nth-child(2n)tr:nth-child(2n)").css('background', ").css('background', ''#7CEAE1#7CEAE1');');
$(".student-list tbody $(".student-list tbody tr:nth-child(2n+1)tr:nth-child(2n+1)").css('background', ").css('background', '#f5f5f5');'#f5f5f5');
Or..Or..
FORM VALIDATIONFORM VALIDATION
jQuery Validate EnginejQuery Validate Engine
https://github.com/posabsolute/jQuery-Validation-Enginehttps://github.com/posabsolute/jQuery-Validation-Engine
HTMLHTML<input value="2010-12-01" <input value="2010-12-01" class="validate[required,custom[date]]"class="validate[required,custom[date]]" type="text" name="date" id="date" />type="text" name="date" id="date" />
<input value="too" <input value="too" class="validate[required,custom[onlyLetclass="validate[required,custom[onlyLetterNumber]]"terNumber]]" type="text" name="special" type="text" name="special" id="special" />id="special" />
jQueryjQuery$("#form.id").validationEngine();$("#form.id").validationEngine();
//Demo//Demo http://www.position-relative.net/creation/formValidator/http://www.position-relative.net/creation/formValidator/
Using CSS3 and HTML5 Using CSS3 and HTML5 /* A List Apart: Forward Thinking Form Validation (http://goo.gl/7d5yQ) */
CSS3 UI pseudo-classCSS3 UI pseudo-class
:valid:valid
:invalid:invalid
:required:required
:optional:optional
:out-of-range:out-of-range
:read-only:read-only
:read-write:read-write
HTMLHTML……
<label for="email">Email *</label> <label for="email">Email *</label> <input type="email" id="email" name="email" <input type="email" id="email" name="email" placeholder="e.g. ryan@example.net" placeholder="e.g. ryan@example.net" title="Please enter a valid email" title="Please enter a valid email" requiredrequired /> /> <p class="validation01"><p class="validation01">
<span class="invalid">Please enter a valid <span class="invalid">Please enter a valid email address e.g. ryan@example.com</span> email address e.g. ryan@example.com</span><span class="valid">Thank you for entering a <span class="valid">Thank you for entering a valid email</span> valid email</span>
</p></p>
……
CSS3CSS3.validation01 {.validation01 { background: red;background: red; color: #fff;color: #fff; display: none;display: none; font-size: 12px;font-size: 12px; padding: 3px;padding: 3px; position: absolute;position: absolute; right: -110px;right: -110px; text-align: center;text-align: center; top: 0;top: 0; width: 100px;width: 100px;}}
CSS3CSS3input:focus + .validation01 {input:focus + .validation01 { display: block;display: block;}}
input:focus:required:valid + .validation01 {input:focus:required:valid + .validation01 { background: green;background: green;}}
input:focus:required:valid + .validation01 .invalid input:focus:required:valid + .validation01 .invalid {{ display: none;display: none;}}
input:focus:required:invalid + .validation01 .valid input:focus:required:invalid + .validation01 .valid {{ display: none;display: none;}}
ANIMATIONANIMATION
jQuery Animation jQuery Animation MethodsMethods
.animate().animate()
.fadeIn().fadeIn()
.fadeOut().fadeOut()
.fadeToggle().fadeToggle()
.fadeTo().fadeTo()
.hide().hide()
.show().show()
.slideDown.slideDown
.slideToggle().slideToggle()
.slideUp.slideUp
.stop().stop()
.toggle().toggle()
jQuery AnimatejQuery Animate
$("#example_box").animate({$("#example_box").animate({
width: "70%",width: "70%",
opacity: 0.4,opacity: 0.4,
marginLeft: "0.6in",marginLeft: "0.6in",
fontSize: "3em",fontSize: "3em",
borderWidth: "10px"borderWidth: "10px"
}, 1500 );}, 1500 );
CSS3 TransitionsCSS3 Transitionstransition-property: background;transition-property: background;
transition-duration: 0.3s;transition-duration: 0.3s;
transition-timing-function: ease;transition-timing-function: ease;
/* Don't forget vendors prefix *//* Don't forget vendors prefix */
-moz-transition-moz-transition
-webkit-transition-webkit-transition
-o-transition-o-transition
CSS3 TransitionsCSS3 Transitions/* Shortcut *//* Shortcut */
transition: background 0.3s ease;transition: background 0.3s ease;
/* Multiple properties *//* Multiple properties */
transition: background 0.3s ease, transition: background 0.3s ease, width 0.3s linear; width 0.3s linear;
/* All properties *//* All properties */
transition: all 0.3s ease;transition: all 0.3s ease;
/* Understanding CSS3 Transitions *//* Understanding CSS3 Transitions */
http://goo.gl/k9EcXhttp://goo.gl/k9EcX
/* Transition with Tranform *//* Transition with Tranform */
http://goo.gl/HB2mchttp://goo.gl/HB2mc
http://goo.gl/KvclUhttp://goo.gl/KvclU
CSS3 TransformCSS3 Transform
http://goo.gl/QZvVw
http://goo.gl/xL2yv
CSS3 TransformCSS3 Transformtransform: translate(100px, 100px);transform: translate(100px, 100px);
/* Don't forget vendors prefix *//* Don't forget vendors prefix */
-moz-transform-moz-transform
-webkit-transform-webkit-transform
-o-transform-o-transform
CSS3 TransformCSS3 Transformtransform: translate(80px, 80px) transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg); scale(1.5, 1.5) rotate(45deg);
CSS3 Animation(@) CSS3 Animation(@)
http://goo.gl/c8QJB http://goo.gl/uv33G
CSS3 Animation CSS3 Animation . The Keyframe @ Rule. The Keyframe @ Rule
. animation-name. animation-name
. animation-duration. animation-duration
. animation-timing-function. animation-timing-function
. animation-iteration-count. animation-iteration-count
. animation-direction. animation-direction
. animation-delay. animation-delay
CSS3 Animation CSS3 Animation @keyframes resize {@keyframes resize {
0% {0% {
padding: 0;padding: 0;
}}
50% {50% {
padding: 0 20px;padding: 0 20px;
background-color:rgba(255,0,0,0.2);background-color:rgba(255,0,0,0.2);
}}
100% {100% {
padding: 0 100px;padding: 0 100px;
background-color:rgba(255,0,0,0.9);background-color:rgba(255,0,0,0.9);
}}
}}
CSS3 Animation CSS3 Animation #box {#box {
animation-name: resize;animation-name: resize;
animation-duration: 1s;animation-duration: 1s;
animation-iteration-count: 4;animation-iteration-count: 4;
animation-direction: alternate;animation-direction: alternate;
animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;
}}
/* Don't forget vendors prefix *//* Don't forget vendors prefix */
-moz-transition-moz-transition
-webkit-transition-webkit-transition
-o-transition-o-transition
TAG TEAM: jQuery with CSS3TAG TEAM: jQuery with CSS3