{"id":718,"date":"2012-10-05T03:57:40","date_gmt":"2012-10-05T03:57:40","guid":{"rendered":"http:\/\/a.parsons.edu\/~dejongo\/12-fall\/?p=718"},"modified":"2025-08-21T16:46:46","modified_gmt":"2025-08-21T16:46:46","slug":"10-css3-2","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/10-css3-2\/","title":{"rendered":"10 CSS3 #2"},"content":{"rendered":"<h2><a href=\"10-css3-2#materials\">Week 10<\/a><br \/>10\/29<\/h2>\n<p><strong>CSS3 part 2.<\/strong> More CSS3 properties:  2-D transforms, transitions, animations, multicolumn layout and Compositing and Blending properties.<br \/>\n<strong>Activity:<\/strong> Use these properties in class.<br \/>\n<strong>Activity:<\/strong> In-class Workshop.<\/p>\n<h2 class=\"hw\"><a href=\"10-homework\/\">Homework<\/a><\/h2>\n<\/p>\n<p class=\"close\">1) For class:  Use the new CSS3 properties to create a simple animatic for your final project. Animate elements created in the previous homework.  2) For final:  Finish wireframe and Photoshop Comp for Final. <strong>Read<\/strong> chapter 14. <strong>Due:<\/strong> The following week.<\/p>\n<h2 id=\"materials\">Materials<\/h2>\n<\/p>\n<p>Additional materials for this unit can be found by following these links (14 pages):<\/p>\n<ul>\n<li><a href=\"10-css3-transitions\/\"> Transitions<\/a>\n<\/li>\n<li><a href=\"10-2d-transform\/\">2D &#038; 3D Transforms<\/a>\n<\/li>\n<li><a href=\"10-animation\/\"> Animation<\/a>\n<\/li>\n<li><a href=\"10-compositing-and-blending\/\"> Compositing and Blending<\/a>\n<\/li>\n<li><a href=\"12-scalable-vector-graphics-svg\/\"> SVG Graphics<\/a>\n<\/li>\n<li><a href=\"10-responsive-images-and-video\/\"> Responsive Images and Video<\/a>\n<\/li>\n<li><a href=\"10-css-variables\/\"> CSS Variables<\/a>\n<\/li>\n<li><a href=\"10-css-calc\/\"> CSS Calculations<\/a>\n<\/li>\n<li><a href=\"https:\/\/24ways.org\/2018\/clip-paths-know-no-bounds\/\">Clip Paths<\/a> Article and <a href=\"https:\/\/bennettfeely.com\/clippy\/\"> Clippy<\/a>. Custom generator for CSS shapes.\n<\/li>\n<li><a href=\"https:\/\/css-doodle.com\"> CSS Doodle<\/a> Cool web component for drawing CSS patterns. Check out <a href=\"https:\/\/yuanchuan.dev\/polygon-shapes\"> polygon shapes<\/a>.\n<\/li>\n<li><a href=\"https:\/\/h5bp.github.io\/Effeckt.css\/\"> canned CSS Effeckts<\/a>\n<\/li>\n<li><a href=\"http:\/\/youmightnotneedjs.com\"> CSS replacement for jQuery.<\/a> <a href=\"https:\/\/webkit.org\/blog\/17101\/a-guide-to-scroll-driven-animations-with-just-css\/\">How to implement page scroll explained<\/a>\n<\/li>\n<li><a href=\"https:\/\/www.bram.us\/2020\/01\/10\/smooth-scrolling-sticky-scrollspy-navigation\/\"> Smooth Scrolling Sticky ScrollSpy Navigation<\/a>\n<\/li>\n<li><a href=\"10-putting-it-all-together\/\"> CodePens using CSS3<\/a>\n<\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/10-demo-instructions.html\"> In Class Demonstration<\/a>\n<\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/10-exercise\"> In Class Exercise<\/a>\n<\/li>\n<li><a href=\"10-homework\/\"> Homework<\/a>\n<\/li>\n<\/ul>\n<h2>Goal<\/h2>\n<\/p>\n<p>The goal of this unit is to:<\/p>\n<ul>\n<li>Master the new CSS3 properties and use them.\n<\/li>\n<\/ul>\n<h2>Outcomes<\/h2>\n<\/p>\n<p>At the end of this unit, students will have:<\/p>\n<ul>\n<li>Been exposed to how these new properties work\n<\/li>\n<li>Have practiced using these properties and are able to apply them to their own projects.\n<\/li>\n<li>Have an understanding of sprites to more efficiently use images.\n<\/li>\n<\/ul>\n<h2>Step-by-Step<\/h2>\n<table>\n<tr>\n<td style=\"width: 20px; text-align: right;\">20<\/td>\n<td>Review homework and answer questions. <\/td>\n<\/tr>\n<tr>\n<td>30<\/td>\n<td>Demo: <a href=\"10-2d-transform\/\">2D Transforms<\/a> with a quick look at 3D transforms. <\/td>\n<\/tr>\n<tr>\n<td>30<\/td>\n<td>Demo: <a href=\"10-css3-transitions\/\">Transitions<\/a> <\/td>\n<\/tr>\n<tr>\n<td>30<\/td>\n<td>Demo: <a href=\"10-animation\/\">Animation<\/a><\/p>\n<tr>\n<td>10 <\/td>\n<td>Break<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<tr>\n<td>60<\/td>\n<td> In-class Workshop &#038; Review.\n<\/td>\n<\/tr>\n<\/table>\n<h2>News and External Resources<\/h2>\n<\/p>\n<p>Sources of information that will enrich your knowledge about web design and will help you to stay current:<\/p>\n<ol>\n<li><a href=\"http:\/\/www.pentagram.com\/work\/#\/websites\/all\/newest\/\">Pentagram<\/a> A Seminal Design Agency. Look through their web portfolio for web design inspiration.\n<\/li>\n<li><a href=\"http:\/\/happycog.com\/#work\">Happy Cog<\/a>Jeff Zeldman&#8217;s Design Company. The design agency of a well known standards compliant web design advocate.\n<\/li>\n<li><a href=\"http:\/\/www.webbyawards.com\/webbys\/current.php?season=16\">Webby Awards<\/a>award for excellence on the Internet.\n<\/li>\n<\/ol>\n<h2>Work done In Class<\/h2>\n<ul>\n<li><a href=\"http:\/\/b.parsons.edu\/~drosh851\/parsons\/typography\/typography.html\">Type Poster<\/a>\n<\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~devof330\/parsons\/final\/other-assignments\/w2worksheet\/w2worksheet.html\">Worksheet for midterm<\/a>\n<\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~devof330\/parsons\/final\/finalworksheet.html\">Worksheet for Final<\/a>\n<\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~yehy828\/parsons\/\">Yvonne&#8217;s Landing Page<\/a>\n<\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~yehy828\/06\/\">Type Poster<\/a>\n<\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~yehy828\/portfolio\/\">Portfolio<\/a>\n<\/li>\n<li><a href=\"http:\/\/www.figmentsdesign.com\/SophieLo\/class.html\">CSS3 Backgrounds<\/a>\n<\/li>\n<li><a href=\"http:\/\/www.figmentsdesign.com\/SophieLo\/assignment5\/index.html\">Portfolio<\/a>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Week 1010\/29 CSS3 part 2. More CSS3 properties: 2-D transforms, transitions, animations, multicolumn layout and Compositing and Blending properties. Activity: Use these properties in class. Activity: In-class Workshop. Homework 1) For class: Use the new CSS3 properties to create a &hellip; <a href=\"https:\/\/b.parsons.edu\/~dejongo\/10-css3-2\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[],"_links":{"self":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/718"}],"collection":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=718"}],"version-history":[{"count":62,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/718\/revisions"}],"predecessor-version":[{"id":6461,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/718\/revisions\/6461"}],"wp:attachment":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}