CSS3 and jQuery for Designers
-
Upload
lomalogue -
Category
Technology
-
view
1.876 -
download
3
description
Transcript of CSS3 and jQuery for Designers
CSS3 & jQuery for Designers
Tuesday, 3 April 12
Hello!
Tuesday, 3 April 12
What I’ll be teaching today
Tuesday, 3 April 12
Why this is important to learn
...and why you are awesomer than other web designers
Tuesday, 3 April 12
How I’ll be teachingthis class
Tuesday, 3 April 12
First of all...HTML5?
Tuesday, 3 April 12
How to create a HTML5 site in one line of code...
Tuesday, 3 April 12
<!DOCTYPE html>
Tuesday, 3 April 12
A collection of new features for HTML
Tuesday, 3 April 12
HTML5’s new features• New semantic tags, e.g. <nav>, <article>, <footer>
• Audio and video capacity
• Canvas
• Geolocation
• Drag and drop
• History APIs
• Offline mode
• Data storage and File APIs
Tuesday, 3 April 12
Do I reeeeally need to know this stuff though?
Tuesday, 3 April 12
So, this CSS3 business.
Tuesday, 3 April 12
What you’ll learn about CSS3
• Colours
• Text shadow
• Border radius
• Gradients
• Box shadow
• Fonts
• Transforms
• Transitions
• Animation
Tuesday, 3 April 12
What you won’t learn
• Generated content
• Multi-backgrounds
• Image borders
• Background sizing
• Re#ections
• Masking
• New measurement units
• Improved text #ows
• Multi column layouts
• Responsive design
Tuesday, 3 April 12
Beware:Experimental Stuff
Tuesday, 3 April 12
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;
Tuesday, 3 April 12
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;
Tuesday, 3 April 12
-webkit-box-sizing: border-box;
Tuesday, 3 April 12
But don’t do this on live sites, okay???
Or someone may kill ki$ens.
Tuesday, 3 April 12
Let’s begin!
Tuesday, 3 April 12
Colours
Tuesday, 3 April 12
Text shadow
Tuesday, 3 April 12
Box shadow
Tuesday, 3 April 12
Border radius
Tuesday, 3 April 12
Gradients
Tuesday, 3 April 12
Fonts
Tuesday, 3 April 12
Transitions
Tuesday, 3 April 12
Transforms
Tuesday, 3 April 12
Animations
Tuesday, 3 April 12
Pu$ing it together
Tuesday, 3 April 12
A commerical break
Tuesday, 3 April 12
jQuery?
Tuesday, 3 April 12
jQuery stops you writing a lot of code for simple things
all the time
Tuesday, 3 April 12
How to add a class in pure Javascript
Tuesday, 3 April 12
$(“a”).addClass(“hello”);
Tuesday, 3 April 12
What’s in jQuery?
• Selecting
• A$ributes
• Traversing
• Manipulation
• Events
• Animation
• Ajax
• JS Utilities
Tuesday, 3 April 12
Bo Selector.
Tuesday, 3 April 12
$Tuesday, 3 April 12
Just a function.%e $ doesn’t mean anything special.
Tuesday, 3 April 12
What does it mean?Double rainbow?
Tuesday, 3 April 12
Uses CSS engine to pick elements from the HTML
Tuesday, 3 April 12
#header ul li { background: #eee;}
$(“#header ul li”)
Tuesday, 3 April 12
#header ul li { background: #eee;}
$(“#header ul li”)
Tuesday, 3 April 12
#header ul > li a:nth-child(2n) { background: #eee;}
$(“#header ul > li a:nth-child(2n)”)
Tuesday, 3 April 12
$(“#header ul li”).addClass(“selected”);
$(“h1”).css(“color”, “black”);
$(“img”).attr(“src”, “cat.jpg”);
Tuesday, 3 April 12
$(“h1”).css(“color”, “black”) .addClass(“selected”) .fadeIn(500);
Tuesday, 3 April 12
$(“h1”).parent() .next() .find(“li”) .addClass(“selected”);
Tuesday, 3 April 12
$(“h1”).on(“click”, function () { // Do something when clicked});
Tuesday, 3 April 12
Examples
Tuesday, 3 April 12
Tools worth using
Tuesday, 3 April 12
body.rgba h1 { color: rgba(...);}
body.no-rgba h1 { color: #000;}
if (Modernizr.rgba) { // has rgba} else { // no rgba}
Tuesday, 3 April 12
h1 { color: #f00;}
h1 a { color: #000;}
h1 { color: #f00; a { color: #000; }}
Tuesday, 3 April 12
Coffeescripth$p://coffeescript.org/
Tuesday, 3 April 12
$(“h1”).on(“click”, function () { $(this).addClass(“selected”);})
$(“h1”).on “click”, -> $(@).addClass “selected”
Tuesday, 3 April 12
Codekith$p://incident57.com/codekit/
Tuesday, 3 April 12
In closing
Tuesday, 3 April 12
%anks!
Tuesday, 3 April 12
Email: [email protected]: @riklomas
Tuesday, 3 April 12