Resources for CSS3

CSS3 is split up into “modules”

A few of the most important CSS3 modules are:

Box Model

This CSS module defines the box model for the elements it considers the differences between vertical and horizontal rendering. In the flex layout model, the container can be laid out in any direction, and can "flex" or resize itself either growing to fill the space or shrinking to avoid overflowing each other. Both horizontal and vertical alignment of the spaces can easily be manipulated. Nesting can be used to build layouts in two dimensions.

Read more »

CSS3 Flexible Box Layout Explained

Backgrounds and Borders

Read about CSS3 borders at W3schools.com

Multiple Backgrounds are the most fun and challenging. Just remember when layering the first image is on top and they go down from there. The box that is your base layer, the most opaque, list that one last. Older browser’s do not support multiple backgrounds so use Modernizr.

<bg-image> = <image> | none
this sets the background image(s) of an element. The Images are drawn with the first one on top (closest to the user) and each subsequent image behind the previous one. Think Photoshop layers!

A value of none will count as an ‘ image layer’ yet draws nothing. An image that is empty (missing) also counts as a layer but draws nothing.

Each image is positioned, sized, and tiled according to the value in the other background properties. They are matched up from the first value.

Places to learn more about this feature:

Quick note about Opacity

Text Effects

2D/3D Transformations

Animations

CSS3 keyframes explained

Media Queries

A web page may have different styles sheet depending on the device it is viewed with. Below are few articles that explain the concepts with examples.

  • “CSS Media Queries are a really nice way to target specific users of your website and give them their own custom look and feel! By splitting CSS into sections with queries, it allows you to do some pretty amazing things... ” by NUBLUE
  • Logic in Media Queries by Chris Coyier
  • How To Use CSS3 Media Queries To Create a Mobile Version of Your Website by Rachel Andrew

Selectors

There is no need for me to rewrite all of the great content you can find on selectors, here are some of the best I found:

  • Semantic CSS With Intelligent Selectors (This is a long read well worth your time) “In design, you should always lead with function, and allow form to emerge as a result”… Read this well written article on Semantic CSS With Intelligent Selectors »
  • Conbinators — A selector can contain more than one simple selector. Between the simple selectors, we must include a combinator—something that explains the relationship between the selectors. There are three different combinators in CSS2, and one extra in CSS3. Read about when to use them »
  • I thought this was interesting — An Introduction To Object Oriented CSS (OOCSS) — introducing you to the concept of object oriented CSS and how it can help improve both the performance and maintainability of your Web pages.

Fun Stuff

Animated Hover Over Effect with CSS3 Transitions

codrops has a nice tutorial for a simple CSS icon hover effect. The uses a subtle and stylish effect using CSS transitions + animation on the anchor and their pseudo-elements. There are a variety of effects complete with a demo and code download.

More Resources to Help with CSS3

What is it?

CSS3 is the latest version of CSS. “CSS” is an acronym for Cascading Style Sheets, a markup language that describes the rendering of structured documents telling the browser how to render the look and layout of a website. CSS3 offers a wonderful variety of new ways to display content with high visual impact to users across many devices.

Why use it?

  • CSS3 is becoming a new standard
  • Modern and clean
  • Faster and cheaper
  • Supports mobile devices
  • You can do things now that in the past were not possible — replacing some script
  • Everybody will be on the same page

What do you get?

  • Consistent structure and function
  • Easy to implement, plus it makes responsive design easier

What do you get?

  • Structure and function
  • Easy to implement the grid system and responsive design
  • CSS3
  • codrops CSS3 effects
  • jQuery
  • 10 CSS selectors you shouldn’t code without
  • HTML5

It’s pure joy!

Visit my HTML5 resources