Welcome to the review of the CSS3 In Depth course by Estelle Weyl.

Estelle Weyl

Estelle started her professional life in architecture and then managed teen health programs. In 2000, Estelle took the natural step of becoming a web standardista.

She is the Open Web and Performance Evangelist for Instart Logic and has consulted for Kodak Gallery, SurveyMonkey, Samsung, Yahoo, Visa and Apple, among others.

Estelle shares esoteric tidbits learned while programming and
detailed grids of CSS3 and HTML5 browser support in her blog.

She is a coauthor of Mobile HTML5, CSS3: The Definitive Guide, and HTML5 and CSS3 for the Real World.

While not coding, Estelle works in construction, de-hippifying her 1960s throwback abode.

About This Course

This course is available from both Frontend Masters and Pluralsight

On Pluralsight, it is part of the following learning paths:

• Programming in HTML5 with JavaScript and CSS3
• CSS
• Front End Web Development

Even if you don’t have a Pluralsight or Frontend Masters subscription, you can still learn from Estelle by visiting her online CSS Workshop:

CSS3: From Knowledgeable to Ninja

This Github guide is continually updated (roughly monthly) and also contains a lot of information that is not covered in this course. This set of slides now covers information about CSS Selectors Level 4, which is currently at draft stage.

In this review I will be referring to this resource and point out any differences for you.

Frontend Masters have also published a PDF summarizing this talk.

You can also watch Estelle’s CSS Specificity lesson for free on Frontend Masters, and the first 3o seconds of each lesson is free on Safari Books Online. And if you want to watch the whole course but don’t want a subscription, it is available to download for $49 from O’Reilly. My personal opinion is you’ll get better value for money out of a subscription, but of course it’s up to you.

Before you spend your money, be aware that this course is aimed at professional web developers, in other words you need to have at least intermediate level CSS skills to get the most out of this course.

CSS Beginners

If you are a CSS beginner, or familiar with older version of CSS but completely new to CSS3, here are some options for you to study before tackling this course:

Estelle has a slide deck called Intro to CSS. This actually contains some pretty powerful tricks so I’d say worth checking out even if you know CSS quite well.

About 5 years ago, I found the book “CSS: The Missing Manual” very useful. This book has since been updated for CSS3, and you can find the first chapter here.

Estelle has also produced several books on CSS and HTML. I have not yet read them but the amazon reviews are favorable.

Pluralsight subscribers: follow the CSS learning path and you’ll cover this course halfway through it.

Introduction

The second slide has the full list of CSS3 properties along with links to the relevant parts of the CSS3 specification and indicators to tell you which properties are also included in CSS 2.1 and earlier versions.

This course covers selectors, properties and values, pseudo-classes, pseudo-elements, prefixes, at rules and much more.

Selectors

Follow along with this using Estelle’s Selectors Slides

There are now a number of introductory slides added, which I recommend reading to check that you understand the basics.

There are interactive sections along the way for you to experiment and play with CSS. This is very important because we learn best by actively doing rather than passively watching.

Basic Selectors, Relational Selectors

In this clip, Estelle very briefly covers slide 6 – basic selectors and then explains Slide 8 – Relational Selectors.

Attribute Selectors

The relevant slides and files for this clip are:

• Slide 16 – Attribute Selectors
• Slide 17 – Older attribute selectors
• Slide 18 – Attribute Selectors
• Slide 19 – Attribute Selectors Recap
• Slide 20 – Using attribute selectors
• Try it yourself
• Slide 21 – Case Insensitivity
• Codepen on case insensitive attribute selector

Characters such as ^ $ * are regular expression characters.

Estelle answers a question from a member of the audience about the performance considerations of using attribute selectors.

UI Pseudo-Classes

The relevant slides and files for this clip are:

• Slide 22 – UI pseudo-classes
• Slide 23 – form related UI pseudo-classes
• Slide 24 – form related UI pseudo-classes
• UI Selectors
• Counting demo

Estelle shows how to change the style of a checkbox based on it’s state, i.e. change it’s color when it is checked (click on the checkbox in Slide 22 to see for yourself).

Click on the Slide 24 link for the number 5 to 7 range effect and also (not in the video) a number 0 to 10 range effect control.

Structural UI Pseudo-Classes

The relevant slides and files for this clip are:

• Slide 27 – Structural selectors
• Slide 28 – First, Last and Only
• Slide 29 – First Last and Only
• First Last and Only demo
• Slide 30 – nth pseudo-classes
• Slide 31 – Structural Selectors

Demo: Structural UI Pseudo-Classes

• Slide 32 – Structural Selectors
• Slide 33 – Structural Selectors
• Slide 34 – Flag with Structural Selectors
• Slide 35 – Simpler Flag with structural selectors

Estelle describes the example in Slide 33 as “completely useless stuff” but demonstrates it to let you know what’s possible.

Slide 34 is described as “even more useless”, adding “don’t do this, it’s really dumb!”

It’s interesting to see that this sort of thing can be done in CSS3 however.

Estelle also discusses alternative ways in which others such as Christopher Schmitt have produced the American Flag in CSS.

Navigation and Empty Pseudo-Classes

• Slide 37 – :not – negation pseudo class
• Slide 38 – experimental – :any (not actually in course, but check this out anyway)
• Slide 39 – :empty pseudo class

Pseudo-Elements

• Slide 40 – link pseudo classes
• Slide 47 – :root
• Slide 61 – Tips

In this clip Estelle explains the difference between em and rem and why rem is cool.

It’s not part of this course, but also take a look through slides 41-46 to learn more about new CSS4 features.

In this clip, Estelle recommends HTML5 bolierplate (as a good read). If you are not familiar with this, see Get Started with HTML5 Boilerplate.

Estelle mentions recommends selectivizr which emulates CSS3 pseudo-classes in IE6-8, if you still need to support them.

She also mentions that she has a guide to jQuery and CSS3 selectors.

Also briefly discussed in the shadow DOM: see her HTML5 form, or if you want to go deeper watch Cory House’s HTML5 Web Component Fundamentals course.

Specificity (SpeciFISHity)

Slides and files relevant to this clip:

• Slide 13 – Specificity
• Slide 50 – Specificity: The Less Than Obvious
• Original SpeciFISHity PDF
• SpeciFISHity PDF
• Advanced Selectors Exercise

In this clip Estelle explains the specificity cheat sheet known as SpeciFISHity.

I like the use of the BP oil tanker, and especially like the nuclear bomb used to represent the most brute force option of all, which is !important.

 

A lot of material has been covered already.

Before moving on, I recommend taking some time to complete the advanced selectors exercise, and then give yourself a well earned break.

Generated Content

Slides and files:

• Part 3 Generated Content – slides 1-8
• Selectors Slide 53 – Pseudo elements
• Selectors Slide 57 – ::before and ::after
• Slide 58 – Generated Content
• Generated Text – Try It Out
• copypastecharacter.com

You can style pseudo elements in all of the same ways as normal elements (except for animation which was only supported by Mozilla at the time of recording).

Estelle explains how you can use special characters (like snowmen and sad faces)

Other Values for Generated Content

Slides and files

• Generated Content Slides 9-11
• Blog post: Creating counters with Generated Content
• Generated Text: Try It Out

A member of the audience asks if you can use background image for spriting? You can!

Use-Cases for Generated Content

• Generate Content – Slides 12 – 16
• Generated Text – Try It Out

Estelle explains how to create triangles using generated content: this begins with creating a square and then making part of it transparent and setting the border color.

She shows that by changing the border widths, you can create a variety of different triangular shapes in CSS.

Estelle also explains how to create elliptic thought bubbles.

Generated Content Example By Chris Coyer

• Generated Content – Slides 17 – ??
• css-tricks.com – Shapes Of CSS
• css-tricks.com – All CSS content
• css-tricks.com pseudo-element-roundup

Shapes of CSS shows you how to produce tons of different shapes including trapezoid, parallelogram, pentogon, hexagon, octagon, various star shapes, heart, pac man and many more.

Estelle also explains a couple of his other articles. I encourage you to read through all of them!

Generated Content Example

This lesson contains the solutions to some of the coding exercises, and Estelle answers questions from the audience.

Media Queries

Excluding the introduction, this is the shortest module in the course. Media queries are an essential part of doing Responsive Web Design.

• Part 5 – Media Queries
• Estelle’s media queries fiddle

The Viewport

• Play with the presentation window size
• mediaqueri.es

In the first slide here, narrow the width of the screen to change the background-color from white to red to yellow.

Debugging

Slides and files

• Debugging Slides
• Weinre

This section is showing it’s age a bit. I haven’t used Firebug in a long time.

If you are interested in using the Opera debugger, see here for dragonfly info.

Weinre stands for Web Inspector Remote.

Adobe Edge Inspect is no longer supported by Adobe.

For a more in depth look at in browser debugging, Pluralsight subscribers can watch John Sonmez’s Using the Chrome Developer Tools course.

Colors

• Colors Formats
• Color Keywords
• RGB / RGBA
• HSL / HSLA
• HSLA / RGBA / HEX Conversion
• HSLA-Color-Converter on github

All of the color formats are codes for white.
Browsers now accept both spellings: grey and gray!
HSL stands for hue saturation luminance

I think Estelle’s color converter is pretty handy and deserving of more Github stars.

Transparency and Color Tips

• Opacity
• Alpha Transparency
• Color Tips
• Deprecated Color Names

Estelle explains the difference between Opacity and Alpha Transparency (something that has confused me in the past).

Fonts, Shadows and Text Effects

Slides:

• Fonts Slides

This begins with an explanation of font-face. Estelle then explains the difference between a font and a typeface.

Font Services

• Font Issues
• Google Fonts
• Font Squirrel

There are important, yet not very well known, legal issues around distributing fonts.

In this clip, Estelle introduces a couple of free font services: Google Fonts and Font Squirrel.

Estelle demonstrates how to use the Font Squirrel Generator. This is a useful performance tip: you can use a font containing just one character and only make users download that one character rather than the whole font.

Text Shadows and Box Shadows

• Text Shadows
• Mother Effing Text Shadow
• Box Shadows
• Box Shadow – Try It Out
• Text Stroke
• Peter Baverloo: vendor prefixed css property overview

Text-Shadow is demonstrated.

Mother Effing Text Shadow is created by Paul Irish.

There’s also a basic demo in w3schools that you can play with.

Holy Cow A Double Rainbow (a minute of your life that you’ll never get back)

I had not seen the spread effect used in box shadows before – really nice effect here.

See Can I Use for text-stroke browser support, and now use Text-Shadow instead!

Borders and Backgrounds

• Backgrounds and borders

Background Repeat, Attachment and Position

• Background Repeat
• Background Position – Try It Out

You’ll see that the background-position slide has been updated since the course recording: this is widely supported in browsers and you can use it.

Background Clip, Origin and Size

• Background Clip
• Background-Origin
• Background-Clip / Background-Origin
• Background position – Try it out
• Background Size Information
• Background-Size Example: click on a new property value to change the shark image

The default values are:

• background-clip : border-box
• background-origin: padding-box
• background-size: auto

Estelle explains why background-size is very important for mobile devices.

Border Properties

• Border Properties

The default values are:

• border-style: none
• border-width: medium

The pneumonic TRouBLe stands for Top Right Bottom Left, because borders can cause you a lot of trouble!

Gradients

http://estelle.github.io/gradients/index.html#slide10

The first few slides are interactive demos to play with. Then Estelle explains that there are four gradient types:

• linear-gradient
• radial-gradient
• repeating-linear-gradient
• repeating-radial-gradient

Slides and files:

• Gradients are supported from IE10 and up
• Old linear style try it out 

Prefixed, Linear Gradients

Try it out: http://estelle.github.io/gradients/files/prefixedlinearsyntax.html

W3C Standard Syntax

W3C Standard Linear Gradient Syntax

Angles != Keyterms

Scroll the bar up and down

Hard Color Stops

Color Stops

Stripes

Table cloth effect

Tips on Gradient

Estelle’s gradients library – dozens of free gradients

Radial Gradients

Radial Gradients

Size

Estelle warns this could crash some mobile browsers by eating up all the memory.

with Background size

Transforms

Transforms Transforming Elements

Transforming Elements

2D Transform Functions

2D Transform Functions

Estelle says that the plane icon transformation won’t make any sense to you now, but then explains how this works.

She says that only cyborgs code matrix transforms. This looks a lot like HTML5 Canvas matrix transforms to me?!?

Although Estelle had a problem on the day with demos not working quite right, I found the translate, rotate and scale plane demos  work fine on my PC (Chrome and IE11, didn’t work in Firefox) : just over the relevant piece of code to activate it. You may need to wait a second or two.

Slides:

• Rotate 
• Scale
• Skew

2D vs. 3D Transformations

Simple Transforms – Try It Out

transform-origin property

Transform Origin – Try It Out

Estelle explains that 3D transformations are hardware accelerated with there is an animation.

backface-visibility

Transitions and Animations

• Simplest Transition: over zero seconds
• CSS3 Transition (over 1 second)
• transitions description
• What can be transitioned?
• Transform Features and Limitations

Transitions in the Real World Animated navigation menus

http://estelle.github.io/CSS-Workshop/part_11_animations.html#slide12

The first 2 minutes of this clip is an explanation of the animated nav menu. Something that is no longer in the slide deck, but is very cool, is the pick a card demo: cards flip over to reveal themselves. No images are used, this is completely done with CSS.

Animations

Animation Features and limitations

Estelle recommend doing animation with CSS rather than with JavaScript. She explains that is because CSS has the lowest priority in the UI thread, meaning that the animation won’t block any other important process.

Keyframes

Hover over the plane for the animation

Animating CSS Transforms

Attaching animations to elements

Base CSS

Again there are similarities with CSS animations and HTML5 Canvas, both use Bezier Curves.

http://cubic-bezier.com/

Rachel Nabors – Flashless Animation

Animation Delay

Advanced Animation Properties

animation shorthand

There is an even more advanced card animation demonstrated in this clip, sadly also missing from the online slide deck 😦

animation-fill-mode

animation-play-state

Other Features

Other Features Part 1

We’ve come a long way, but there a still half a dozen topics left to discuss:

• CSS Exclusions
• CSS Regions
• CSS3 Multi-column Layout
• CSS3 Flexible Box (“Flexbox”) Layout
• CSS3 Grid Layout
• CSS Device Adaptation

Slides and files:

• List of remaining topics
• Columns
• box-sizing
• CSS Regions

• Old Flexible Box Model
• Newer Flexible Box Model
• grid layout
• Shaders
• Cursors
• text-overflow: ellipsis
• word-wrap: breakword
• pointer-events: none

Conclusion

Estelle mentions the books she has written, and her Mobile Web Performance slides.

This course then ends with a Christmas themed CSS quiz!

Summary / Verdict

There was one brief moment in the course when Estelle says she cannot cover everything in CSS3 because “I’m only here for today, not for a month and a half”. The topic of CSS3 is huge!

This course has made me realize how much other courses (and books) merely skim over the topic. The shorter modules cover content equivalent to chapters in a book, and the selectors coverage is equivalent to several chapters.

There is plenty of detail that could not be covered in this course, but it covers more ground in greater detail than any other CSS course I have seen.

Again I recommend CSS newbies watch another course or read another book before tackling this course.

The combination of Estelle’s updated online slides with the video helped me a lot and I sincerely hope that this article brings it all together for you and guides you further towards mastering CSS3.

You will need to spend a decent amount of time coding the examples yourself to fully understand them, so (regardless of the playback speed) altogether you will need more than 6 hours to learn all of this.

If like me you are watching the entire course outside of your day job, you should schedule yourself at least a week for digesting and processing all of this information.

Alternatively you can use this as a reference for the part of CSS3 that you are interested in using. I think I will come back occasionally to both this article the relevant course clip when I need refresh my memory on a CSS3 topic.

At the very minimum, I recommend looking through Estelle’s slide decks on Github – this is a real treasure trove of information for front end developers.

Pluralsight Users recommended speed: x1.5 with pauses for trying out the demos