09 CSS3 1

Posted on by

Week 9
10/29

CSS3 part 1. An examination of new CSS3 properties: color, opacity, box shadow, border radius, multiple backgrounds, picture borders and gradients. Activity: Use these properties in class.

Homework

1) For the class: Use the CSS3 properties covered in a collateral piece for your project. It can be a sales poster, an online brochure, or an email advertisement. 2) For the final: Research, brand and position the final project in terms of its target audience, write the copy and develop a look that incorporates the CSS3 properties covered this week. Due: The following week.

Materials

Additional materials for this unit can be found by following these links (33 pages):

Goal

The goal of this unit is to:

  • Master the new CSS3 properties and use them.
  • I expect to see these new properties used in the final.
  • Encourage everyone to turn their vision into their final website. Don’t compromise, email me if you need help to reach that goal. That is what this class is about.

Outcomes

At the end of this unit, students will have:

  • Been exposed to how the most popular new CSS3 properties work.
  • Have practiced using these properties and can apply them to their own projects.
  • Understand graceful degradation in building their website using HTML5 and CSS3.

Step-by-Step

20 Review homework and answer questions.
10 Lecture: Graceful Degradation
40 Demo: CSS3 Basics.
10 Break
50 Demo: Background and Borders
10 Efficient use of background images

10 Lecture: Brand Development

Talking Points

Topics covered in the reading:

Chapter 14: Enhancements with CSS3

  1. Understanding Vendor Prefixes 373
  2. A Quick Look at Browser Compatibility 375
  3. Using Polyfills for Progressive Enhancement 376
  4. Rounding the Corners of Elements 378
  5. Adding Drop Shadows to Text 382
  6. Adding Drop Shadows to Other Elements 384
  7. Applying Multiple Backgrounds 388
  8. Using Gradient Backgrounds 390
  9. Setting the Opacity of Elements 394

Current Practices

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:

  • 39 Box Shadows for Chrome
  • Mule Design Holiday Party
  • Dangers of Fracking
  • Conservation Community
  • Caava Design
  • Frank Chimero
  • Blood, the Branding Agency
  • Women and Tech
  • Jeremy Holmes Studio

    News and External Resources

    Sources of information that will enrich your knowledge about web design and will help you to stay current now and in the future:

    1. List ApartSeminal Web Magazine.
    2. Smashing MagazineMajor Web Magazine
    3. Design FestivalDesign magazine from Sitepoint.
    4. CSS-TricksGood web resource.
    5. HTML5 DoctorHelps cure all that ails you with learning and using HTML5. I referenced their element definitions to help you get started.

    Definitions

    These are the terms that participants should be familiar with during this unit:

    Internet Marketing article from Wikipedia

    Internet marketing, also known as web marketing, online marketing, webvertising, or e-marketing, is referred to as the marketing (generally promotion) of products or services over the Internet. Internet marketing is considered to be broad in scope[citation needed] because it not only refers to marketing on the Internet, but also includes marketing done via e-mail and wireless media. Digital customer data and electronic customer relationship management (ECRM) systems are also often grouped together under internet marketing.

    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 customer engagement cycle through search engine marketing (SEM), search engine optimization (SEO), banner ads on specific websites, email marketing, mobile advertising, and Web 2.0 strategies.