• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS3 and jQuery for Designers
 

CSS3 and jQuery for Designers

on

  • 2,070 views

Code: http://cl.ly/FYus

Code: http://cl.ly/FYus
Handout: http://f.cl.ly/items/420d0j2c0f022J0v3V1X/handout.pdf

Statistics

Views

Total Views
2,070
Views on SlideShare
2,070
Embed Views
0

Actions

Likes
1
Downloads
40
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS3 and jQuery for Designers CSS3 and jQuery for Designers Presentation Transcript

    • CSS3 & jQuery for DesignersTuesday, 3 April 12
    • Hello!Tuesday, 3 April 12
    • What I’ll be teaching todayTuesday, 3 April 12
    • Why this is important to learn ...and why you are awesomer than other web designersTuesday, 3 April 12
    • How I’ll be teaching this classTuesday, 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 HTMLTuesday, 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 APIsTuesday, 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 • Fonts • Text shadow • Transforms • Border radius • Transitions • Gradients • Animation • Box shadowTuesday, 3 April 12
    • What you won’t learn • Generated content • Masking • Multi-backgrounds • New measurement units • Image borders • Improved text flows • Background sizing • Multi column layouts • Reflections • Responsive designTuesday, 3 April 12
    • Beware: Experimental StuffTuesday, 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 kittens.Tuesday, 3 April 12
    • Let’s begin!Tuesday, 3 April 12
    • ColoursTuesday, 3 April 12
    • Text shadowTuesday, 3 April 12
    • Box shadowTuesday, 3 April 12
    • Border radiusTuesday, 3 April 12
    • GradientsTuesday, 3 April 12
    • FontsTuesday, 3 April 12
    • TransitionsTuesday, 3 April 12
    • TransformsTuesday, 3 April 12
    • AnimationsTuesday, 3 April 12
    • Putting it togetherTuesday, 3 April 12
    • A commerical breakTuesday, 3 April 12
    • jQuery?Tuesday, 3 April 12
    • jQuery stops you writing a lot of code for simple things all the timeTuesday, 3 April 12
    • How to add a class in pure JavascriptTuesday, 3 April 12
    • $(“a”).addClass(“hello”);Tuesday, 3 April 12
    • What’s in jQuery? • Selecting • Events • Attributes • Animation • Traversing • Ajax • Manipulation • JS UtilitiesTuesday, 3 April 12
    • Bo Selector.Tuesday, 3 April 12
    • $Tuesday, 3 April 12
    • Just a function. The $ 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 HTMLTuesday, 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
    • ExamplesTuesday, 3 April 12
    • Tools worth usingTuesday, 3 April 12
    • Modernizr http://modernizr.com/Tuesday, 3 April 12
    • body.rgba h1 { color: rgba(...); if (Modernizr.rgba) { } // has rgba } else { body.no-rgba h1 { // no rgba color: #000; } }Tuesday, 3 April 12
    • SASS http://sass-lang.com/Tuesday, 3 April 12
    • h1 { h1 { color: #f00; color: #f00; } a { h1 a { color: #000; color: #000; } } }Tuesday, 3 April 12
    • Coffeescript http://coffeescript.org/Tuesday, 3 April 12
    • $(“h1”).on(“click”, function () { $(this).addClass(“selected”); }) $(“h1”).on “click”, -> $(@).addClass “selected”Tuesday, 3 April 12
    • Codekit http://incident57.com/codekit/Tuesday, 3 April 12
    • In closingTuesday, 3 April 12
    • Thanks!Tuesday, 3 April 12
    • Email: rik@lomalogue.com Twitter: @riklomasTuesday, 3 April 12