09 CSS3 #1

Posted on by

Week 9
10/23

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 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. 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 properties used in the final.
  • Turn your vision into a final website. Don’t compromise, email me if you need help to reach that goal.

Outcomes

At the end of this unit, students will have:

  • Been exposed to how popular 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

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

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:

  • CSS Text Effects
  • Type Terms
  • 96 Elephants
  • Endless Night
  • More Sleep Design
  • Form Follows Function
  • Nolowene Nowak
  • Rainforest Protector
  • Shantell Martin
  • Women and Tech
  • fwa
  • awwards

    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 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.

    • Leave a Reply