lenoraporter / css3-notes

CSS3-Notes

Book: CSS3 for Web Designers

Before diving too deep into this book, I had to keep in mind that this book was published in 2015 (The Second Edition)

What have a learned so far?

June 2011, CSS3 was introduced to modern web browsers. According to the book, CSS3 is a series of modules that are designed to be implemented separately and independently from each other. This segmented approach has enabled portions of the spec to move faster for others and has encouraged browser vendors to implement the pieces that are further along before the entirety of CSS3 is considered finished.

CSS3 targets the experience layer. Previously, CSS focused on the critical aspects of UI (Layout, type, color, etc.) while CSS3 is introducing the experience layer to the game (animations, feedback, movement -- previously left to technologies like Flash and JavaScript)

Critical	Non-Critical
Branding	Interaction
Usability	Visual Rewards
Accessibility	Feedback
Layout	Movement

CSS3 properties that are usable today

• Border-radius
• text-shadow
• box-shadow
• box-sizing
• multiple background images
• opacity
• RGBA
• More at W3C.org

Creating delightful experiences with CSS3

Since CSS3 properties are not supported in all browsers, it may be a little difficult to support identifical experiences. http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/

There is a way to create faternal experiences with vendor prefixes and strategic CSS placement.

My favorite part about this chapter discussed the need to place vendor prefixes before any finalized property so that we create backup if a browser doesn't support it.

For example:

#nav li a {
  padding: 5px 15px;
  font-weight: bold;
  color: #ccc;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

For example, border-radius is placed at the bottom while the vendor prefixes for border-radius is above. We want our browser to use border-radius first, however, if there is no support, it falls back to the vendor prefixes. If the vendor prefixes are not available, nothing will show at all.

Same with RGBA color. If RGBA is not support, it falls back to the normal color: #ccc because all browsers support that.

Adding transitions

Always add the transition properties to the normal state of the elemt to be transitioned. Transtions are designed this way in order for the transition to happen not only on one experience (ex: :hover), but also :focus and :active states.

Example:

#nav li a {
  padding: 5px 15px;
  font-weight: bold;
  color: #ccc;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#nav li a:hover,
#nav li a:focus {
  color: #fff;
  background: rgba(255. 255, 255, 0.15);
}

Transforms and Translates