Introduction

Hi, I'm Nick Pettit. 0:00 We're going to design and develop a web-based photo gallery using CSS3 0:02 as the primary driving technology. 0:07 Before we get started, let's go ahead and take a look 0:09 at the project that we'll be creating. 0:12 [?music?] 0:14 [Master Class: CSS3 with Nick Pettit] 0:28 [My Photos] 0:36 So here we have our CSS3-based photo gallery 0:38 and you can hover over these photos 0:43 and they'll have a nice box shadow underneath them, 0:45 and when we click on them, the photos will enlarge--just like that-- 0:49 and they'll rotate a little bit, 0:54 and we have some pretty nifty effects going on here. 0:57 All of this code is reusable to a certain extent 1:02 because in a real world project, 1:06 not all of the code will be 100 percent flexible, 1:09 reusable, plug and play ready. 1:12 Projects like this typically have tighter specifications, 1:15 so what we lose in flexiblity 1:18 we get back in speed of development and ease of maintainability. 1:21 So for example, these pictures are a specific size, 1:25 so you can't use a bunch of differently-sized photos 1:29 in this particular gallery. 1:33 So let's go ahead and take a look at the code 1:35 that is driving this page. 1:38 We'll switch over to our text editor. 1:40 Here, you can see that we have some pretty clean and simple HTML. 1:42 All that's on this page is a container, 1:47 a first-level headline, 1:52 an unordered list, 1:54 and a bunch of photos inside of the unordered list. 1:57 Down here at the bottom, 2:01 we have a second-level headline 2:03 and a paragraph just describing the gallery. 2:06 This project is using CSS3 all over the place, 2:09 so let's go ahead and take a look at our style sheet. 2:13 For the background of the page, we're using CSS3 gradients, 2:17 and we're also using multiple backgrounds, 2:22 which is a new feature in CSS3. 2:24 Additionally, we're using CSS3 fonts, and we're downloading fonts from the web. 2:29 We are using text shadows, as you can see right there. 2:37 We're using a few more web fonts. 2:46 We're using the multi-column layout module. 2:48 We have a few box shadows on the photos, 2:56 and for the animations, we're also using webkit-transitions and transforms. 3:04 So if we scroll down here just a little bit, 3:10 you can see that we're rotating our photos when they are made larger. 3:13 Finally, what I'd like to show you is some of the JavaScript that we're using. 3:18 This photo gallery is rather flexible, 3:25 and so for the behavioral stuff and the interaction of actually clicking on the photos, 3:28 we're using jQuery, 3:33 and this gives us a clean separation of structural information with the HTML, 3:35 presentational information with the CSS, 3:41 and behavioral information with the JavaScript. 3:43 We're still using CSS3 for the actual animations. 3:47 jQuery is only used for the act of clicking on the photos. 3:51 This project looks simple on the surface; it has some wow factor 3:58 and under the hood, there are lots of interesting challenges and problems 4:02 that we'll solve along the way. 4:06 [?music?] 4:08 [Technology] 4:10 So, you might be wondering, "Why use CSS3?" 4:14 Well, web standards are really important for the preservation 4:17 and availability of information now and in the future. 4:20 There are many reasons to use CSS3, 4:24 but fundamentally, CSS3 allows for faster load times and more semantic markup. 4:26 These are really important concepts to understand, 4:32 so let's go ahead and talk about each one. 4:35 There are three umbrella technologies that comprise web standards, 4:38 and in most web projects, you're going to use all of them. 4:41 HTML is the structural layer, 4:45 CSS is the presentational layer, 4:47 and JavaScript is behavioral. 4:50 These three technologies provide us with just about everything we need 4:52 to build a website. 4:56 The HTML can hold the content, the CSS describes what it looks like, 4:58 and the JavaScript makes it interactive. 5:02 If that seems confusing, 5:05 it might help to compare a website to something in the real world. 5:06 Take a building, for example. 5:09 HTML would be the steel beams and concrete that form the foundation and infrastructure. 5:11 By itself, HTML is enough, but it's kind of plain. 5:16 You can think of CSS as the paint, the carpeting, and the facade of the building. 5:21 Basically, CSS is just a way of enhancing your HTML 5:26 so that the information is more easily interpreted by people. 5:30 Going one step further with this analogy, 5:35 JavaScript might be all the internal wiring and plumbing. 5:37 When you flick on a light switch, some sort of magic happens 5:41 and the light turns on. 5:44 This is how JavaScript should be used on a web page. 5:46 When the user clicks or interacts with something on the page, 5:49 JavaScript events get fired and execute code 5:52 that typically makes something happen on the page and gives the user feedback. 5:55 Each one of these layers--HTML, CSS, and JavaScript-- 5:59 have a specific purpose. 6:03 In a real-world project, there's almost always going to be some overlap, 6:05 but ideally, you should try to maintain a clean separation between each layer 6:09 as much as possible. 6:14 For example, if you start including too many presentational class names in your HTML, 6:16 suddenly, your HTML is not only describing the structure of the document-- 6:21 it's also describing what it should look like. 6:25 That's bad. 6:27 Another nice thing that CSS3 allows for is animation. 6:29 Using transforms, transitions, and animation, 6:33 you can cut out tons of complex JavaScript 6:36 that used to animate all of the stuff manually. 6:39 CSS3 can do a lot of things like curved borders and shadows 6:42 that until now had to be done with images. 6:46 For example, if you wanted to add curved borders, you had to create curved images 6:50 for all four corners, or make two images for a top or bottom, 6:55 or something ugly like that. 6:59 This isn't ideal because not only does it mean that the page takes longer to load; 7:01 it also means that you have to do more work any time you want to change something 7:06 or even experiment. 7:11 With CSS3, it's fast to try out new borders and shadows. 7:13 There's a lot more to it than that, though. 7:17 As I mentioned previously, you can use CSS3 for animations 7:19 rather than relying on JavaScript to do the heavy lifting. 7:23 Any time that you can make the browser do all of the hard work 7:27 as opposed to JavaScript, it's a huge performance win. 7:30 This is especially true in some browsers, like mobile Safari on IOS 7:34 where transforms and transitions are hardware-accelerated by the GPU. 7:38 As you're probably aware, CSS3 is still an evolving standard, 7:44 so you might be wondering if CSS3 is ready to use on a real website 7:49 and the answer is "Absolutely!" 7:53 CSS3 support is getting better all the time. 7:55 Safari, Chrome, Firefox, and Opera 8:00 are all continuously improving their CSS3 support 8:02 and they already have really good CSS3 support right now. 8:06 Currently, Internet Explorer really isn't all that great, 8:10 but IE9 includes CSS3 selectors, 8:13 rounded corners, and lots more to be excited about. 8:17 In fact, lots of properties come from older versions of browsers, 8:20 including Internet Explorer. 8:24 For example, the font face property comes from a really early version of Internet Explorer. 8:26 Something else I should mention is the controversy 8:32 surrounding the inclusion of transitions and animations in the CSS3 specification. 8:35 Basically, a lot of people think that transitions and animations 8:41 should be left to the behavioral layer, which is JavaScript, 8:45 and not included in the presentational layer, which is CSS. 8:48 In my opinion, it's just time to modernize our definition of what's presentational 8:53 and what's behavioral. 8:57 If you think about it, transitions and animations 8:59 are really quite similar to interactions we already have-- 9:02 namely, the hover pseudo class. 9:05

You need to sign up for Treehouse in order to set up Workspace

Sign up