{"id":437,"date":"2012-09-11T18:22:21","date_gmt":"2012-09-11T18:22:21","guid":{"rendered":"http:\/\/a.parsons.edu\/~dejongo\/12-fall\/?p=437"},"modified":"2025-08-21T16:45:35","modified_gmt":"2025-08-21T16:45:35","slug":"09-css3-1","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/09-css3-1\/","title":{"rendered":"09 CSS3 #1"},"content":{"rendered":"<h2><a href=\"09-css3-1#materials\">Week 9<\/a><br \/>10\/22<\/h2>\n<p><strong>CSS3 part 1. <\/strong>An examination of CSS3 properties: color, opacity, box shadow, border radius, multiple backgrounds, picture borders and gradients. <strong>Activity:<\/strong> Use these properties in class.<\/p>\n<h2 class=\"hw\"><a href=\"09-homework\/\">Homework<\/a><\/h2>\n<\/p>\n<p class=\"close\">1) For class:  Use CSS3 properties for a collateral piece promoting your project. It can be a sales poster, an online brochure, or an email advertisement. 2) For final:  Research, brand and position for the final project, its target audience, write the copy and develop a look that incorporates the CSS3 properties covered this week.  <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 (33 pages):<\/p>\n<ul>\n<li><a  class=overview href=\"09-browser-design-strategies\/\">Browser Design Strategies<\/a><\/li>\n<li><a class=read href=\"09-the-basics\/\">CSS3 Basics<\/a><\/li>\n<li><a class=read href=\"09-backgrounds-and-borders\">Background and Borders<\/a>\n<\/li>\n<li><a href=\"09-call-to-action\/\">Call to Action.<\/a>\n<\/li>\n<li><a href=\"09-background-image-strategy\/\">Efficient use of background images.<\/a>\n<\/li>\n<li><a href=\"09-brand-development\/\">Positioning Your Final <\/a>\n<\/li>\n<li><a href=\"01-history-of-the-web\/\">History of the Web <\/a>\n<\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/09-demo-instructions.html\"> In Class Demonstration<\/a>\n<\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/09-exercise.html\">Demonstration<\/a>\n<\/li>\n<li><a href=\"09-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<li>I expect to see these properties used in the final.\n<\/li>\n<li>Turn your vision into a final website. Don\u2019t compromise, email me if you need help to reach that goal.\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 popular CSS3 properties work.\n<\/li>\n<li>Have practiced using these properties and can apply them to their own projects.\n<\/li>\n<li>Understand graceful degradation in building their website using HTML5 and CSS3.\n<\/li>\n<\/ul>\n<h2>Step-by-Step<\/h2>\n<table>\n<tr>\n<td>15<\/td>\n<td>Review homework and answer questions. <\/td>\n<\/tr>\n<tr>\n<td>15<\/td>\n<td>Lecture: <a href=\"09-css3-web-design-strategies\">Graceful Degradation<\/a><\/td>\n<\/tr>\n<tr>\n<td>50<\/td>\n<td>Demo: <a href=\"09-the-basics\/\">CSS3 Basics<\/a>. <\/td>\n<\/tr>\n<tr>\n<td>10 <\/td>\n<td>Break<\/td>\n<\/tr>\n<tr>\n<td>50<\/td>\n<td>Demo: <a href=\"09-backgrounds-and-borders\">Background and Borders<\/a> <\/td>\n<\/tr>\n<tr>\n<td>10<\/td>\n<td> Efficient use of <a href=\"09-background-image-strategy\/\"> background images<\/a><\/td>\n<\/tr>\n<\/table>\n<h2>Talking Points<\/h2>\n<\/p>\n<p>Topics covered in the <a href=\"http:\/\/instructors.coursesmart.com\/9780133064070\/371\">reading:<\/a><\/p>\n<p><strong>Chapter 14: <\/strong>Enhancements with CSS3<\/p>\n<ol>\n<li>Understanding Vendor Prefixes 373\n<\/li>\n<li>A Quick Look at Browser Compatibility 375\n<\/li>\n<li>Using Polyfills for Progressive Enhancement 376\n<\/li>\n<li>Rounding the Corners of Elements 378\n<\/li>\n<li>Adding Drop Shadows to Text 382\n<\/li>\n<li>Adding Drop Shadows to Other Elements 384\n<\/li>\n<li>Applying Multiple Backgrounds 388\n<\/li>\n<li>Using Gradient Backgrounds 390\n<\/li>\n<li>Setting the Opacity of Elements 394\n<\/li>\n<\/ol>\n<h2>Current Practices<\/h2>\n<\/p>\n<p>CSS3 is all over the web. Many of these sites also make use of jQuery, which is all the rage. We will learn more about that in a few weeks:<\/p>\n<li><a href=\"http:\/\/codepen.io\/collection\/DamKJW\/\">CSS Text Effects<\/a>\n<\/li>\n<li><a href=\"https:\/\/www.supremo.tv\/typeterms\/\">Type Terms<\/a>\n<\/li>\n<li><a href=\"http:\/\/www.96elephants.org\">96 Elephants<\/a>\n<\/li>\n<li><a href=\"http:\/\/endlessnight.fr\/\">Endless Night<\/a>\n<\/li>\n<li><a href=\"http:\/\/www.moresleep.net\">More Sleep Design<\/a>\n<\/li>\n<li><a href=\"http:\/\/fff.cmiscm.com\/#!\/section\/spiral\">Form Follows Function<\/a>\n<\/li>\n<li><a href=\"http:\/\/www.nolowenenowak.com\">Nolowene Nowak<\/a>\n<\/li>\n<li><a href=\"http:\/\/rainforest.arkivert.no\/\">Rainforest Protector<\/a>\n<\/li>\n<li><a href=\"http:\/\/shantellmartin.art\">Shantell Martin<\/a>\n<\/li>\n<li><a href=\"http:\/\/womenandtech.com\/archive\/\">Women and Tech<\/a>\n<\/li>\n<li><a href=\"https:\/\/thefwa.com\">fwa<\/a>\n<\/li>\n<li><a href=\"https:\/\/www.awwwards.com\">awwards<\/a><br \/>\n<h2>News and External Resources<\/h2>\n<p>Sources of information that will enrich your knowledge about web design and will help you to stay current now and in the future:<\/p>\n<ol>\n<li><a href=\"http:\/\/www.alistapart.com\/\">List Apart<\/a>Seminal Web Magazine.\n<\/li>\n<li><a href=\"http:\/\/www.smashingmagazine.com\/\">Smashing Magazine<\/a>Major Web Magazine\n<\/li>\n<li><a href=\"http:\/\/designfestival.com\/\">Design Festival<\/a>Design magazine from Sitepoint.\n<\/li>\n<li><a href=\"http:\/\/css-tricks.com\/\">CSS-Tricks<\/a>Good web resource.\n<\/li>\n<li><a href=\"http:\/\/html5doctor.com\/article-archive\/\">HTML5 Doctor<\/a>Helps cure all that ails you with learning and using HTML5. I referenced their  <a href=\"htlm5-doctor-element-index\/\"> element definitions<\/a> to help you get started.\n<\/li>\n<\/ol>\n<h2>Definitions<\/h2>\n<\/p>\n<p>These are the terms that participants should be familiar with during this unit:<\/p>\n<dl>\n<dt><a href=\"http:\/\/en.wikipedia.org\/wiki\/Internet_marketing\">Internet Marketing article from Wikipedia<\/a><\/p>\n<dd>\n<p><b>Internet marketing<\/b>, also known as <b>web marketing<\/b>, <b>online marketing<\/b>, <b>webvertising<\/b>, or <b>e-marketing<\/b>, is referred to as the <a href=\"http:\/\/en.wikipedia.org\/wiki\/Marketing\" title=\"Marketing\">marketing<\/a> (generally promotion) of products or services over the <a href=\"http:\/\/en.wikipedia.org\/wiki\/Internet\" title=\"Internet\">Internet<\/a>. Internet marketing is considered to be broad in scope because it not only refers to <a href=\"http:\/\/en.wikipedia.org\/wiki\/Marketing\" title=\"Marketing\">marketing<\/a> on the <a href=\"http:\/\/en.wikipedia.org\/wiki\/Internet\" title=\"Internet\">Internet<\/a> but also includes <a href=\"http:\/\/en.wikipedia.org\/wiki\/Marketing\" title=\"Marketing\">marketing<\/a> done via e-mail and wireless media. Digital customer data and electronic customer relationship management (<a href=\"http:\/\/en.wikipedia.org\/wiki\/ECRM\" title=\"ECRM\">ECRM<\/a>) systems are also often grouped together under internet marketing.\n<\/p>\n<p>Internet marketing ties together the creative and technical aspects of the Internet, including design, development, advertising and sales. Internet marketing also refers to the placement of media along many different stages of the <a href=\"http:\/\/en.wikipedia.org\/wiki\/Customer_engagement\" title=\"Customer engagement\">customer engagement<\/a> cycle through <a href=\"http:\/\/en.wikipedia.org\/wiki\/Search_engine_marketing\" title=\"Search engine marketing\">search engine marketing<\/a> (SEM), <a href=\"http:\/\/en.wikipedia.org\/wiki\/Search_engine_optimization\" title=\"Search engine optimization\">search engine optimization<\/a> (SEO), <a href=\"http:\/\/en.wikipedia.org\/wiki\/Web_banner\" title=\"Web banner\">banner ads<\/a> on specific websites, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Email_marketing\" title=\"Email marketing\">email marketing<\/a>, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Mobile_advertising\" title=\"Mobile advertising\">mobile advertising<\/a>, and <a href=\"http:\/\/en.wikipedia.org\/wiki\/Web_2.0\" title=\"Web 2.0\">Web 2.0<\/a> strategies.<\/p>\n<\/dd>\n<\/dt>\n<\/dl>\n<\/li>\n","protected":false},"excerpt":{"rendered":"<p>Week 910\/22 CSS3 part 1. An examination of CSS3 properties: color, opacity, box shadow, border radius, multiple backgrounds, picture borders and gradients. Activity: Use these properties in class. Homework 1) For class: Use CSS3 properties for a collateral piece promoting &hellip; <a href=\"https:\/\/b.parsons.edu\/~dejongo\/09-css3-1\/\">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":[12],"tags":[],"_links":{"self":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/437"}],"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=437"}],"version-history":[{"count":73,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/437\/revisions"}],"predecessor-version":[{"id":6460,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/437\/revisions\/6460"}],"wp:attachment":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}