CSS In-Depth, v2 Introduction
This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "Introduction" Lesson
>> Estelle Weyl: So for everyone the slides are going to be at estell.github.io/cssmastery. So let me just go to the first deck, and here is the link right there.
>> Estelle Weyl: So this talk has a few names, CSS for Novice to Ninja, CSS in Depth Version 2. I've kind of changed the name to CSS Mastery, I don't know what it says online.
[00:00:33] I'd like to talk a little about myself before I get started. My name is Estelle Weyl, I tweet at the handle estellevw, my blog is at standardista.com. It says early release, but the book has been released. I co-authored this. Erik Meyer is, he's not the godfather of CSS because godfather to me reminds me of the movie, and he hasn't murdered anyone.
[00:01:03] He's more of the Oprah, trying to encourage and share knowledge, so he's the Oprah of CSS. So this is available if you wanna read it, if you need a seat for your kid to be able to reach the table, if you need a door stop. And it is not actually the definitive guide, there is stuff we were not able to reach but we had a book that you could actually open.
[00:01:30] Okay, so in this deck that you've seen just now with the snowflakes, and the snowman, or snow person, we have used lot of CSS properties. There's selectors, I selected the snow flakes to make the drop. There's linear gradients, it goes from blue to white because it always snows when it's sunny out.
[00:01:54] There's opacity, some of the snowflakes were darker than the others. There's RGBA colors, a as in alpa transparency. I used border radius, those snowflakes were round. I used transforms, they spun. And I used transitions and animations. And I used a text shadow in the deck, this has text shadow, a few of them actually.
[00:02:24] And I actually removed the fonts, so I'm not using any special fonts in this deck. And in fact that snowman right there is one element, it's a div, and that is not an image. It is done with, it is an image, it's done with CSS images, I did not pull in anything else.
[00:02:46] And I'll cover that a little bit.