Welcome to Part 2 of this review of the Pluralsight and Front End Masters course Introduction to HTML5 and CSS3 by Christopher Schmitt.

Christopher is Co-Lead of the Adobe Task Force for the Web Standards Project (WaSP), and is the author of numerous Web design and digital imaging books, including Adapting to Web Standards: CSS and Ajax for Big Sites and CSS Cookbook. He is also the co-host on the Non Breaking Space Show.

Empowering CSS3

CSS3 Color & Opacity

Christopher begins by explaining that CSS3 is built out of modules. What he means here is that the CSS3 specification is a set of modules, so that each area of Cascading StyleSheets can be specified independently from the other areas, allowing the specification to be developed more quickly.

There’s a detailed explanation of CSS3 modules from BoltClock on StackOverflow – What are CSS3 Modules, and even more detailed answer for the question Is CSS3 an official standard?

We get a quick look at some examples from various modules of CSS3 in this module, starting with Opacity on Background Colors (RGBA).

We learn that this is supported by Firefox 3+, Opera 10+, IE 9+and Safari, and Chris says we probably don’t need a fallback implementation to use it, but we see a solution for implementing opacity in ancient browser versions such as Internet Explorer 8 and below.

This fallback is clever and uses hexadecimal strings. This allows support from Firefox 1.5+, Opera 9+, Safari 1.2+ and all versions of Chrome.

CSS3 Text: Selection & Columns

This begins with a look at text-overflow, which uses and ellipsis to shorten long words that for example could not fit within a box boundary.

We see that this is widely supported in browsers including Internet Explorer 6.

Next up is text-selection, and we see an example using Pseudo Selectors.

Chris Coyier’s CSS Tricks article Overriding the default text selection color with CSS has a demo of this.

It’s supported in all modern browsers, e.g. IE9+

Text Columns: this uses column-gap, and you can find it in the W3C candidate recommendation here.

Christopher Schmitt answers an audience question explaining the idea of vendor prefixes. I don’t usually like to use vendor prefixes for the same reasons covered in David Walsh’s article Say Goodbye to Vendor Prefixes. Occasionally it is still necessary to use them though.

There’s a good question from a member of the audience on the practice of using vendor prefixes to make your site look more consistent across browsers, and two or three audience members discuss it. This is the only time I have seen the audience in a Front End Masters course.

There is also additional explanation from Christopher here. Next he mentions an old jQuery plugin, but I won’t link to that because I don’t recommend using it anymore.

CSS3 Text: @font-face & Shadows

This lesson is free for all from Front End Masters.

First up @font-face and we learn that the .eot format has been supported in Internet Explorer since version 4, but Microsoft refused to implement .ttf and .otf formats.

@font-face supports .eot and .woff formats.

WOFF stands for Web Open Font Format and at the time of writing .woff2 is at candidate recommendation status that is supported by the newest browsers.

In this clip Chris Schmitt is talking about the original WOFF which is a W3C recommendation since 2012 and widely support by browsers.

Paul Irish has an article called Bulletproof @font-face implementation syntax which should teach you everything you need to know.

Chris Schmitt mentions fontsquirrel.com and Google Fonts. Estelle Weyl also covers these in her course. Also mentioned is Typekit, which was bought by Adobe shortly before the course was recorded and still owned by them today.

Chris warns about use of italics with WOFF because you have to include a whole new font specifically for italics.

Text-shadow is introduced next, and Chris shows how multiple text-shadows can be used to create a flame effect. You can find this and a ton of other Text-shadow examples on sitepoint.

CSS3 Images

(links here point to MDN and caniuse.com)

Box-shadow – Like text shadow, but in a box.

border-image – This allows a completely custom look for your borders. Christopher says you can use a transparent png file, and that the image is scaled if the text is scaled. See MDN for full details.

border-radius – used for round corners. The example Chris gives is ugly with lots of vendor prefixes. Today, the standard is well supported.

CSS3 Effects

image masks: we see a bit on how to create one in Photoshop, and see that it can be used to create a glossy effect for images.

gradients – not much useful information here, but you can read all about it on MDN, and Estelle Weyl covers it in depth.

Christopher shows the colorzilla gradient editor, a very handy utility with extensions for Chrome and Firefox.

Also we see Lea Verou’s CSS3 Patterns, and that you can combine gradients with masks to create gradient masks.

Transform: Christopher explains img+img adjacent sibling selector.

Animating links: These use transitions and Christopher explains that you can accelerate and decelerate them with cubic-bezier curves.

Christopher also describes the transition-duration and transition-delay properties.

You can see a demo of the transition-timing-function on MDN.

Chris recommends Matthew Lein’s CEASER tool, an excellent utility for taking the hard work out of hand-crafting these transitions yourself

Again for much more detail on transitions Estelle Weyl has you covered. Even if you don’t have a Pluralsight or Front End Masters subscriptions you can benefit from her slide decks on Github.

Advanced CSS3 Animations

Under the heading Complex Animated Links we see an example from Faruk Ates, the creator of Modernizr, but unfortunately we can’t see it clearly due to the way it was recorded.

We see a slide showing Faruk’s CSS rules with a whole page full of vendor prefixes.

Next up is animating elements, and there’s a Birds of a Feather demo with moving cloud elements. All the rules use the webkit prefix. There has been unprefixed support since Chrome 43, Firefox 16 and Internet Explorer 10.

There’s another good question from an audience member, on whether you should use CSS or JavaScript to achieve these. Christopher says he asked Jonathan Snook this question and he subsequently received flak from some JavaScript fans for answering that you should use CSS whenever you can.

This ends by mentioning the books Christopher wrote, his website and that you can follow him on twitter.

Continue to Part 3 – CSS3 Workshop and course verdict

Related Courses

Introduction to CSS by Scott Allen

CSS3 by J. Micheal Palermo IV

CSS3 In Depth by Estelle Weyl