CSS3 and jQuery for Designers
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

CSS3 and jQuery for Designers

on

  • 2,215 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,215
Views on SlideShare
2,215
Embed Views
0

Actions

Likes
1
Downloads
42
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 Presentation Transcript

  • 1. CSS3 & jQuery for DesignersTuesday, 3 April 12
  • 2. Hello!Tuesday, 3 April 12
  • 3. What I’ll be teaching todayTuesday, 3 April 12
  • 4. Why this is important to learn ...and why you are awesomer than other web designersTuesday, 3 April 12
  • 5. How I’ll be teaching this classTuesday, 3 April 12
  • 6. First of all... HTML5?Tuesday, 3 April 12
  • 7. How to create a HTML5 site in one line of code...Tuesday, 3 April 12
  • 8. <!DOCTYPE html>Tuesday, 3 April 12
  • 9. A collection of new features for HTMLTuesday, 3 April 12
  • 10. 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
  • 11. Do I reeeeally need to know this stuff though?Tuesday, 3 April 12
  • 12. So, this CSS3 business.Tuesday, 3 April 12
  • 13. What you’ll learn about CSS3 • Colours • Fonts • Text shadow • Transforms • Border radius • Transitions • Gradients • Animation • Box shadowTuesday, 3 April 12
  • 14. 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
  • 15. Beware: Experimental StuffTuesday, 3 April 12
  • 16. -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
  • 17. -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
  • 18. -webkit-box-sizing: border-box;Tuesday, 3 April 12
  • 19. But don’t do this on live sites, okay??? Or someone may kill kittens.Tuesday, 3 April 12
  • 20. Let’s begin!Tuesday, 3 April 12
  • 21. ColoursTuesday, 3 April 12
  • 22. Text shadowTuesday, 3 April 12
  • 23. Box shadowTuesday, 3 April 12
  • 24. Border radiusTuesday, 3 April 12
  • 25. GradientsTuesday, 3 April 12
  • 26. FontsTuesday, 3 April 12
  • 27. TransitionsTuesday, 3 April 12
  • 28. TransformsTuesday, 3 April 12
  • 29. AnimationsTuesday, 3 April 12
  • 30. Putting it togetherTuesday, 3 April 12
  • 31. A commerical breakTuesday, 3 April 12
  • 32. jQuery?Tuesday, 3 April 12
  • 33. jQuery stops you writing a lot of code for simple things all the timeTuesday, 3 April 12
  • 34. How to add a class in pure JavascriptTuesday, 3 April 12
  • 35. $(“a”).addClass(“hello”);Tuesday, 3 April 12
  • 36. What’s in jQuery? • Selecting • Events • Attributes • Animation • Traversing • Ajax • Manipulation • JS UtilitiesTuesday, 3 April 12
  • 37. Bo Selector.Tuesday, 3 April 12
  • 38. $Tuesday, 3 April 12
  • 39. Just a function. The $ doesn’t mean anything special.Tuesday, 3 April 12
  • 40. What does it mean? Double rainbow?Tuesday, 3 April 12
  • 41. Uses CSS engine to pick elements from the HTMLTuesday, 3 April 12
  • 42. #header ul li { background: #eee; } $(“#header ul li”)Tuesday, 3 April 12
  • 43. #header ul li { background: #eee; } $(“#header ul li”)Tuesday, 3 April 12
  • 44. #header ul > li a:nth-child(2n) { background: #eee; } $(“#header ul > li a:nth-child(2n)”)Tuesday, 3 April 12
  • 45. $(“#header ul li”).addClass(“selected”); $(“h1”).css(“color”, “black”); $(“img”).attr(“src”, “cat.jpg”);Tuesday, 3 April 12
  • 46. $(“h1”).css(“color”, “black”) .addClass(“selected”) .fadeIn(500);Tuesday, 3 April 12
  • 47. $(“h1”).parent() .next() .find(“li”) .addClass(“selected”);Tuesday, 3 April 12
  • 48. $(“h1”).on(“click”, function () { // Do something when clicked });Tuesday, 3 April 12
  • 49. ExamplesTuesday, 3 April 12
  • 50. Tools worth usingTuesday, 3 April 12
  • 51. Modernizr http://modernizr.com/Tuesday, 3 April 12
  • 52. body.rgba h1 { color: rgba(...); if (Modernizr.rgba) { } // has rgba } else { body.no-rgba h1 { // no rgba color: #000; } }Tuesday, 3 April 12
  • 53. SASS http://sass-lang.com/Tuesday, 3 April 12
  • 54. h1 { h1 { color: #f00; color: #f00; } a { h1 a { color: #000; color: #000; } } }Tuesday, 3 April 12
  • 55. Coffeescript http://coffeescript.org/Tuesday, 3 April 12
  • 56. $(“h1”).on(“click”, function () { $(this).addClass(“selected”); }) $(“h1”).on “click”, -> $(@).addClass “selected”Tuesday, 3 April 12
  • 57. Codekit http://incident57.com/codekit/Tuesday, 3 April 12
  • 58. In closingTuesday, 3 April 12
  • 59. Thanks!Tuesday, 3 April 12
  • 60. Email: rik@lomalogue.com Twitter: @riklomasTuesday, 3 April 12