Learn Code by Creating Art: Developing CSS Skills in CodePen

1. Introduction: Hey everyone. My name's Christina Gorton and I am a remote front-end developer. I'm also a self-taught developer, and one of the ways that I learned to code was through creative coding. In this course, we're going to be going over a lot of advanced and intermediate CSS properties, but we'll be applying them in a fun way throughout the course in a CSS image project. We'll be working on CodePen together, and at the end of the course you'll have both an image and animation to share. Let's get started. 2. Class Project: In this video I'd like to briefly describe what CSS images are and then we're going to talk about what our project is going to be in this class. CSS images are any image that you create with CSS and HTML. As you can see here on CodePen, there are a lot of CSS images and a lot of things that you can do with CSS. You can even create a CSS image with a single div element that allow CSS properties like you see here on Lynn Fisher site at singlediv.com. I'm going to be sharing several links to sites and CodePen profiles with inspiring images in our classroom source document. Now for this course, we're going to be creating this CSS image. At each lesson I'll introduce a new CSS concept, we'll then apply what we just learned to our class project. By the end of the course you'll have learned and applied several new CSS properties and we'll have this completed CSS image with animation to share. I would love if you guys shared your work throughout the course in our class projects section. For those of you who would like I'll be collecting and sharing the final projects in a class CodePen collection. You can even get creative and change up colors, shapes, box shadow, whatever you want to do or even just create a completely different image and I'd still love to share that, both in our class CodePen collection, and on my Twitter account. Let's get started. 3. Getting Sassy: In this video, we're going to do a brief introduction to Sass. I'm not going to get into everything on Sass. There is a lot to do with Sass. But for our project we are going to be using Sass for a few things like variables and nesting. So I would like to go over those. They're really useful. They're a good introduction to Sass, and from there you can move on and learn partials and mixins and loops and all kinds of fun stuff that Sass offers. A CSS preprocessor just allows you to take one language and compile it into CSS so that you can use the features that are in that language, in this case, Sass. There's also less stylists, but Sass seems to be the more popular preprocessor to use in web development right now. Sass has two different syntaxes, actually. The one that you'll see more commonly now is SCSS, which you can see up here, and CodePen, you can just, go to settings and you can choose your preprocessor. They're Sass, SCSS, Stylus, PostCSS. We're going to be using SCSS and that's because it's most closely resembles regular CSS. If you're using regular Sass and not Sassy CSS, which is SCSS, you don't have to do brackets, but you have to worry about indention. There's certain ways you have to indent and you can't just take any CSS code that you have and start using it. With Sass, you would have to go back and reformat all of your CSS. So here's some examples of Sass that you might see in our project. So we're going to go through and just a few minutes in our next video, and we're going to pick out colors and create variables with them. So variables are useful because you can write the code once up here I have my color. These are different blues, and I can put it throughout my project. In this small project it might not seem like a big deal to have to write out the color each time. But when you are doing a huge project, if you change that color at all, a designer comes back and says, "Hey, I want this color to be red instead of blue." It's so much easier just right here to write, red, and then anywhere I've put that blue color that will change throughout my whole project. So if I had titles, [inaudible] borders, if I had anything that was that color blue, they would all change to red now. Super useful. You'll also see people use it for things like headings or breakpoints. Anywhere where you're going to be writing something multiple times where you might be using the same type of heading font or the same breakpoints on different media queries. You want to put that in a variable so that you only have one place to change it and you're not having to go through all of your style sheets and look for it. One of the other things you'll see in our project is nesting. Nesting is really useful. When you think of HTML, you have clear nested and visual hierarchy of your HTML elements. CSS doesn't really offer that. But with nesting, something like a nav where you would have a UL and LI and anchor link. You can now see that here, they're all together, they make sense. This is very easy to maintain, whereas here you're repeating yourself, nav ul, nav li, nav a. When really it's just easier to keep them all together. You can over nest things, this can become complicated to override and to maintain, so you have to be careful with that, but with something like a nav, it makes sense to keep all of your stuff together in nesting. Another cool thing you can use with Sass is operators, and I often use operators a lot. I'll do some math to figure out my widths depending on what I'm doing, but I use them a lot with colors. So if I have a color that is the same, these two colors are both at Brown, and I want one to be a little bit lighter and one to be a little bit darker. I will multiply them. If you go up, pass one that makes it lighter. If you go down under one that makes it darker and that's just an easy way, and sort of having to go and search for another color and put that in, you can just multiply it. So that's pretty cool. In the next video, I'll show you how I typically generate colors, how I find a color palette, and then we'll add some of our colors using the Sass variables, and then throughout our project we'll be using some more Sass, so you'll see it in the rest of the project. Let's get started. In this video I'm going to talk about how I might generate colors if I don't have a program like Sketch or Adobe products. So this is just a free site that I use a lot. It's pretty cool. It's called coolers dot com, and I will have a link for this in our class resources. What this does is, it allows you to generate color palettes. If I just click this space bar on my keyboard, I can go through and see bunch to the color palettes. I can walk them in, find color palettes that go with that. But what I usually do with my CSS images is I find an image that I might want to recreate online, and then I can go here, and if I have a screenshot of it or if I have the URL, I can drop that in and I can get the color palette this way. So if I move this around, I got the blue. I can click on this one and then I can put it where I want. I can get a brown color and click this one. I can get this little accent color in here. It's really cool. At this point you can then generate the colors, that I got my color palette here. Super useful. You can export this if you want. You can grab the colors, you can do this. You can copy them and put the colors over. You can even export them and they will export them as variables for you. This is a free site. You don't have to sign up. If you sign up, it just saves color palettes for you. I use this all the time. It's just super useful and I wanted to share that with you guys. So let's go ahead and start adding some of our colors into our project using Sass variables. If this was a project where I was working at work, I probably wouldn't be naming things sky and wood or things like that for my variables, I would be naming them like main text, things that make sense for other developers to come in and use as well, but when you're creating CSS images, you can name them, whatever makes sense to you. So for us, we have our sky color. We're going to add, we have our wood color. We have a white color. We have a black hole here. We have the accent color, we have the spot, and then we have a border, and these are going to be our colors that we're going to be using for all of our projects. You'll see we'll be adding them later on, and I can show you how to do that if you want to start with one of the colors, we can go ahead and add it to our background, background sky. Don't worry about this stuff yet. The frame or the HTML here, we're going to be doing that in our next video with positioning. So for right now just sketch your variables in and then put your background as Sky, and then we'll get to our positioning video up next. 4. Framing it In: Whenever I start a new CSS image, the first thing I usually do is I set up a frame for that image. Framing the imaging gives us a good opportunity to go over positioning in CSS. So there are six values for the position property, they are static, relative, absolute, fixed, sticky and inherit. Then this class we're going to be going over relative and absolute positioning. Some of the tricky things to know about relative and absolute positioning are, is if we have a child element with a position absolute, the parent element will ignore it. So in order to make the child element positioned absolute based on the parent element, we need to first set the parents position to relative. I'll show you an example here. In this example we have two parent and two child elements. One of the parents has the position relative applied to it and the other does not. So when we add the positioning of top 0 to this child element, it's positioned relative to its parent, while this one is ignored by its parent and its positioned relative to the body of the document. So if we uncomment out this code here, we'll see that the child element is now positioned relative to its parent home. So for our project, we want all of the contents to be positioned relative to the frame we added and not to the body of the document. So we add the position relative to the class frame. So let's do that now here in our project. Some of the other stuff here are just things I typically do in each project. I give our frame a width and a height. I said overflow hidden if I don't want to show anything outside of the frame and I do margin 0 auto so that it's in the center here. So for our project, the first few things we're going to be doing are these circles here. In our project there called border_1, border_2, border three, and then a hole. Let's go ahead and add the first border_1 to our project. Just a quick note on code-pen. There's a built-in plugin which you can also get on a lot of text editors called emit. I'll be using it throughout the course. It just greatly improves the HTML and CSS workflow. It makes it a lot easier. So when you see me doing a few things, I'll point it out in the beginning, but we'll be using it throughout the course. So with him at all I have to do if I want another div is I can do dot and then I can put the class name already boarder_1 and then I can hit "Tab", and then I have div class border_1 already here with the closing div tag. So we're going to start adding the code for our first border and I usually start with a width and a height, which you won't see until we give it a border color. So we'll do border. Two pixels solid and then our color border that we grabbed earlier. Right now it is a square and so if we want to make it round like in our example, we give it a border radius, 50 percent, and that will make it perfectly round. When you have a width and a height that are equal in size. Then we want to do position absolute. We're going to go left about 30 percent and talk about 21st. The CSS images, this positioning of left and top, it's just something you have to play with. If I put it over 50 percent left, it would be over just a little bit too far and I want everything to be centered relative to the parent element, which in this case is the frame. So I did the 30 percent. Because we have position relative on the parent, this is left 30 percent of the nearest ancestor, which would be our parent element here, the frame. So it's going 30 percent over from our frame. Just to show that a little bit better, I put a border, two pixels solid to surround our frame real quick and I can actually see that 30 percent is not really centered. It's over a little bit. So if we went maybe 25 percent, I think we'd be a little bit more and centers. So sometimes it's good to add a little frame to your image so that you can see exactly what would be center with your positioning here. So we can go ahead and take this back off and we can work on adding our next quarter. So again, we'll do dot order two hit "Tab", and again we have an opening and closing div with the class already. This border_2 is also going to have a border of two pixels, solid and then the border color, and it's also going to have a border radius of 50 percent. So instead of doing that twice in our code, we can keep our code a little bit drier by putting.border_1 then put a comma and then.border_2, and then just adding our code here and taking it out of here. That will apply the border to both the border_1 and the border_2. So for our border_2, we're going to want to have a width that's just a little bit smaller than our first border. So I'm going to try out with 23rem and height 23rem. Then we want to give it this color. That is our accent color. So we'll do background accent. Then we want it to be over just a little bit. So I went ahead and did margin 0.3rem. Again, that was just playing around with it and seeing what would center it within the border_1. You can see I skipped ahead a little bit because border_3 and the whole are very similar to what we just did with border_1 and border_2. So again, we just wanted to have a little bit smaller width and height on both of these and then we wanted to have the margin I had to play around with it a little bit. This one had 0.5rem and this one had0.2, and to keep our code dry, because we would have had to repeat this border, two pixels, solid border and border-radius 50 percent four different times. So we just add it right here and put each class name right here to be applied to it. Then the next two videos I'm going to be showing you how to use the pseudo elements before and after, and how to use clip path and a little bit more about border-radius. Let's get started. 5. Pseudo Elements: Now we're going to talk about pseudo elements, which once you learn, you'll find that you actually can use all the time. I use pseudo elements pretty much every day, in every single project I use, multiple times, they're super-useful. Pseudo elements before and after create a pseudo element that inserts itself either before the element or after the element you target. It's not actually in the DOM. You're not putting this in the HTML anywhere. This is all just in the CSS and I'm going to show you how that's done. In our example, we have a button and in our HTML we just have a div, we have our button and we have the words, Click me.There's nothing else here. But as you'll see when we have our over button, we have a unicorn emoji and we have an arrow. Those are applied with just after and before pseudo elements. As you can see in our code, we targeted our button with both the before and the after. To do this on hover, it's a little bit tricky. I actually did this wrong the first time I had to look it up. You're actually basing it on the hover of the parent. So hover would come before the before here. Then when we have a hover, we now get the emoji and the arrow. The emoji is the before, it's before the click me, and the arrow is the after it comes after the text here. In our next video, we're actually going to apply what we just learned here into our class project. Let's get started with that. Our project, we're going to use pseudo elements in two places. We're going to use it for this bridge base mellow part that comes off here. This is our after and then we also use it on our pegs, and then the little dot that's inside of our pegs is the after. Let's go ahead and do that in our project. You can see in our HTML I have added a div with the class bridge base, and then I have added in some CSS here. We have background and hear in we're using wood. So here again is our SAS class or SAS variables, sorry. Then we have a width and a height. This is just something I played around with and guessed. We did position absolute so that we could position it where we wanted, and since it's under here, its position relative to the frame, and then we have a top 60 percent of the frame, it's left 27 percent of the frame. It has a border top to make it a little bit lighter and actually need to comment out the box shadow. That's something we're going to get into on another video. But now that we have this base here, we can then add our, what I put as a before just to show you guys the before we're positioning absolute. In this case it doesn't really matter if it's a before or an after. But since we're using a after later on, I went ahead and used the before. So anytime you use the pseudo elements, you have to have a content, and this could have content in it if you want it. But since we don't actually need to add anything, we just leave it blank. But this is necessary that we position it absolute and this is positioned relative to the bridge base, and then we do bottom, negative 48 percent, left 10 percent, we do a width and a height and a background dark wood. Let's go ahead and take this out and it will actually show up here. You can see that it pops up underneath here. Right now it doesn't actually look like how we have it in our finished product, because we haven't gone over clip yet. So for now I'll just leave it like this, that's fine. We'll go back and we'll fix it and it will look prettier once we go over clip. Let's go ahead and add the pegs too. Okay, I went ahead and added the pegs into our HTML. I'm not going to sit here and code each one out for you guys to see. I figure you guys know at least how to code HTML in CSS. So we want to get to what we're doing here with them. So for this instance, I did peg and I gave each one another class, peg 1, peg 2, peg 3, peg 4, peg 5, peg 6 and I'll show you why in our CSS in just a minute. So for all of them all over to make our code dryer, I gave them the class peg because they're all going to have a border radius of 50 percent, they're all going to have the same width, the same height, the same background our background is the variable accent, the position absolute, and they're all going to be 50 percent from the top of this base here. Again, we'll get into box shadow in another one. So for now everything's going to look very flat. When we do our after, all this is doing is adding that little dot we had on our picture. This might look weird right now, and it's because they're all actually on top of each other. They're all positioned absolutely. They're all in the same spot. That's why I did the extra class of peg 1, peg 2, etc. Because we can now just have to write out the left property that we want here and how far we want it to go left. Let's go ahead and comment this out and you can see what I'm talking about here. Now they're all positioned differently from each other. They're all overlapped just a little bit, and they all have their little spot here, which is our after. So that is how we use the after in this instance, we didn't have to go in and write a bunch more divs that would end up being little spots that we did positioned absolute and then put on top of the spots, we were able to do it without having to put another HTML element. That's really awesome, that's why before and after can be very useful. In the next video I'm going to talk about footpath level. I'm going to show you an example of how you might actually use it in production, and then we'll actually make our little base here look a little better. So let's get to it. 6. Clip-Path and Border Radius: Clip-path is a interesting property that I have is here of Indian because they do a good job of just having some demos here to show you. This is an example of what a circle would look like. You can do a clip path circle which is a property that they have, clip path ellipse and then you put in some points here or you can do polygon and again put in some points which we'll go over in just a second what some of these mean. If you adjust this at all, you can see that the shape of this image might have been longer. Fifty percent, which is what you would normally think if you are doing border radius, the deeper sine. If something has the same width and height will make a circle. But if it's not the same width and height, that's not going to make a circle so here it was 40 percent. This is something you can go on and you can play with. I will try to remove the link to this in our class resources. The syntax can be a little bit hard to get used to at first but you can either do like we saw in Indian you can put a basic shape like circle or ellipse. You can do ellipse source, which can be a URL if you have an image already or you can do a geometry box. Now if we look here, this is how I often do them. This is just a polygon and then you have all these numbers. What are these numbers? It will clip all the images in the shape of a rhombus here. But why? It all depends on the values of what's called the vertices. In the following diagram here does a really good job of showing this so that's why I went onto this site. This is on-site point. It is called introducing CSS clip path property. Up here we have 50 percent, zero percent of our first two points. We are over 50 percent on our x and we are zero percent on our y which is all the way up top. We went 100 percent on our y which you see down here and 50 percent, this comes over. That's our points here. We're 100 percent on our x here and only 50 percent up here on our y and again over here we are at 0 percent on our x and 50 percent on our y. This is something you can play around with. You can try to figure out your numbers but a great resource that a lot of people like to use, I use it all the time, makes it super simple, it's called clippy. Let me show you. This is clippy. Clippy you can pick a shape you might want. If we wanted a trapezoid and then you can come here and you can fix it if you want some really weird shapes, come down, come over, whatever you want to do and then you can just copy the code here. It's already got all the points for you. You copy it and then you put it into whatever you're using, whatever you're trying to click. It's so easy. It's really nice to use. You can do all kinds of shapes. A lot of people like using this resource so I will make sure I put that in our class resources for you to see. Common used case for clip path that you'll see on the web all over the place right now is this little angle that you get up in a hero image. All you have to do is you have your image and then within that same area where you have your background image, in this case it's in my header, you would add your clip path and then you would change the points to match that. If I change some of these points, you can see that it can drastically change where the clip path is. Here I changed that 100 percent to zero. You can see how much that changed. There we could change this to maybe 50 percent. Yet in all kinds of crazy images, it's really easy to play around with in your inspector or like I said on the site, clippy. Let's go ahead and add that little bit of a clip path to our project here. We'll go down into the bridge base and the before. Then I have a webkit here because clip path is actually not very supported. Yet SVG clip paths are much more supported. When I use stuff of production I actually often use SVG clip paths. But to make these images in the way most people make CSS images on CodePen, you'll see them using clip path like this. I want to quickly talk about another way you can create shapes and that is with border radius or border. In a lot of my images, I'm not necessarily always using clippy. I think I've used a clip path here. I actually often use a border to create all of these shapes. If we look at right here, these are all just square divs that I've used a border radius on. We can make the finger roll big, make it real small. You can drastically change the shapes on your images with just a border radius or a border. For a good example of some of the shapes you can just create with a border, you can check out CSS TRICKS. They've created a shapes of CSS and a lot of these shapes. This is a border radius. These are borders. All of these shapes are created with just different borders, where there's just quarter showing on one side but you have a whole lot of pixels or a couple of sides of the whole lot of pixels and not showing on other sides and that's how you create these triangles. You see a lot online that go under like menus or different flags. You can create all kinds of shapes with just a border or border radius. It's a little tedious. A lot of people don't want to create these shapes with a border radius or a border so a lot of people are going to be using either SVG clip path or clippy. In the next video, I'm going to talk to you about all the things you can do with box shadow. There's a lot of stuff you can do with box shadow. I'm excited to show you some examples of pixel I created with box shadow. Some of the cool effects you can create on things like buttons and how we're going to add a little depth to our project so that it's not so flat by using box shadow so let's get to that now. 7. Adding Depth With Box-Shadow: In this video we're going to talk about box-shadow. When you think about box-shadow, you might just think of adding a little bit of a shadow underneath something to make it pop a little. It just adds a little depth. But there's actually a lot of stuff you can do with box-shadow that's really cool. Let's look at box-shadow for a second. More there is box-shadow. In box-shadow, you have a horizontal offset, you have a vertical offset, a blur radius, and then you have an optional spread radius, and a color. If you want to change up the color default is black. Let's look at a example real quick, that shows this really well. This is just an online box-shadow generator. You can use this to generate your box-shadows, if you don't want to have to figure out all the different properties here. Just to show you an example, our horizontal length goes along the x-axis here, our vertical length goes along the y-axis. Blur is how blurry you want it. Whether you want it to be completely crisp or you want it to actually look a bit more like a shadow, and then spread to spreads it out. You can change your color. There's all stuff you can do with box-shadow, just to have something behind and give it a little bit more depth. But let's look at some other ways you can use box-shadow. These are some simple hover effects you can do with box-shadow. You'll see these online all over the place. This one is done by Giana. I believe you see her name on CodePen. If we look at this, you can see that it does all stuff. The ones that are coming in, these are animating an inset box-shadow, and the ones that are going out are the regular box-shadow. Another cool thing you can do with box-shadow going along with our CSS images here, is you can create pixel art with box-shadow. The premise here is that you can draw pixel art within a single element by using a big complicated box-shadow. If you see in this simple example here, you have three little squares. Because, if you declare a vertical and horizontal offset for the box-shadow but not a blur, you get these really crisp looking squares, these black ones, the original box-shadow. Then these ones are coming off from the left and the right. You can do a whole drawing like this one here with the box-shadow like this. You can even animate box-shadow. Look how cool this bat is. You can see the big complicated box-shadow here. They have it in an animation, which we will be going over, keyframe animations, a little later. This is a quick little demo of the difference between regular box-shadow and inset box-shadow. Your regular box-shadow will come out of whatever your element is and the inset will go inside. In the next video, we'll go ahead and start applying some of the box-shadow to our project, so that you can see how it makes the different elements pop. It gives them much more depth. Right now our image is very flat. As we go on and we finish up the project, we'll keep adding box-shadow to our different elements that we add. Let's get to it. Now we're going to go through and we're going to add a little box-shadow to some of the stuff we have here already. We have our bridge base, and if we add a little box-shadow, you can see that it pops up a little. It's not so flat. It actually looks like it's popping off the page a little bit, which is cool. It looks like the bridge is coming out from what would be our guitar. I want to show you here, in the inspector what some of this might look like if I change it up a little. Right now I have it as one pixel, one pixel, and three pixels. Say we did five pixels, that's going to come out to the left a lot more. Instead of being centered how I had it before, where it's coming out a little bit so that it looks like the light's coming from one side because it's over to the left and not on to the right, but it's not looking so drastic here. It looks like maybe the light's coming from aside and down a little bit, which is what we want in our image. This one here is our blur so we can make it really blurry, you could do five, seven eight. You could keep going with that and that makes it even pop more. But I like it at three. I think it looks nice. I think it looks fine. That's up to you. You can change always around, you can play with it. You guys can make these images, your own. Now let's do the same with the after and with our pegs so that they look like they're popping up a little. Set down in our code, I'm sorry, this was our before. We can now take off and add our box-shadow. Wait for a second for it to load. You'll see now that it makes it look like it's leaning down a little bit like a bridge would on a guitar. Then when we add it to our pegs, it's going to make them pop up a little too and give them a little depth. You can play around with these. You might like it to look a little bit different. You might find a different color here, maybe more of a brown instead of the black. This is a bit of a brown. It's just a dark brown. It's the same color as what the spot is. Going to give you a second to look at the code. Then we're going to add it to one more place and we're actually going to do inset this time. Here's our hole, we're going to add it here. Then take a second so that it can load. Now you can see because of the inset, it looks like this is going down now. It looks more like an actual hole, instead of just a black spot that's in the middle of the page here. That's all the box-shadow we're going to add for now. We are going to add some more and our project, after we add some more elements. 8. Transforms and Transitions: In this video, we're going to talk about transforms and transitions. A little later, we're going to be talking about animations, but to get there, first, we're going to talk about transitions and transforms. When we do talk about animating, I'll talk to you about how transforms, and opacity are the most performant ways to animate. That might seem a little limiting at first, but once you understand all the things you can do with transforms, you'll see that it's really not limiting at all. Let's get started learning these a little bit. Also, I want to make a quick note and just say that I've built out some of these examples all throughout the course that I've been showing you all, and those will be in a collection that I will be sharing in our course resources so that you can go back and you can play with them and change things and learn a little bit more that way too. Let's look at the first transform we have here. We have transform scale, and this will be scaling on both the x and the y-axis when we have it this way. It's scaling up two times its size. Let's hover over here and see its scale. Here it goes, scaling both the x and the y. If we wanted it to go just the x, we could write it this way, 'scalex', and it will be scaling through the x-axis here two times its size. You can do the same for the y when you're using scale, and this will actually be scaling it down, so if you go above one, you're scaling the size up. This is going to be half its size doing 0.5 here. You can see it's shrinking now. If I had gone up, it would have grown upwards. The next one is skew. You can do either skewx or skewy, and you use degrees for this. This way, you're going to do skewx 40 degrees. You can use negative or positive numbers. We'll see what it's like with skewy here, and this is skewing negative 25 degrees on the y-axis. Our next transform is rotate. This is rotating 30 degrees. You could do negative 30 degrees if you want to. You can rotate just on the y-axis, which will flip it. Like you see cards now online. People have different cards, so use a back face and afford face visibility, and you can see the back of a card as what they're called when you're using them on the web. We can do the same with the x, and I will just flip the other way, so rotatex, now it's flipping up and down. Then there is transform: rotatez. This is rotating 90 degrees. Our last transform is translate. This is going to be moving both on the x and the y-axis. You'll see it go over 50 while also going down 20 pixels. If you just wanted to go over, you could just do transformx. This is going in the negative direction. You could do the positive if you want me to do just the Y. Now it would go down, and if we put a negative here, it would go up.You can see even though there's only four things that you can transform, you could actually do a lot with each one. Having the different x and the y and the different ways that you can transform on them, it just creates a whole lot of opportunity to try different transforms. If we come back up in our code here you'll see that I had a transition on these the whole time. I had transition all, and If I didn't have a transition on them, let's see what the effect is. You can see now when I hover that everything happens just right away. There's no easing going on which just gives a better user experience when you have a little bit of time in between. This is jarring. That's what we use transitions for. Coming over here to CSS tricks, we can look at what each of these properties are. You can see that I was writing the shorthand property for transition. You can actually write it out transition property and then give it its value, transition duration, give it its value, but most of the time, you'll see it's shorthand like this. Let's go over what these values are. Transition property is anything you're trying to transition. If you're trying to transition your background color, then you would put that here. I had transition all that would be transitioning anything that I had put the hover effect on, as we're hovering over. Then we have transition duration. How long you want it to last, and here it's 0.5 seconds. You can also put five milliseconds if you want to use, or 500 milliseconds, if you're wanting to use milliseconds, then we have transition timing function, and this is easing. You can use the built-in easing functions there's ease, linear ease in, ease out, and ease in out, I believe, but you can also create your own with something called a cubic-bezier. Let's look at those real quick. This is just an online cubic-bezier creator. They're all over the place. You can just google cubic-bezier, and you'll probably see one pop up. I'll try to remember to put one into our class resources, so that you can play with it there too. In our project we had ease in, and if you follow this one down here, you'll see what ease in does, it just slows down at the beginning and then goes fast. If you wanted to create your own ease, you can move these little handles around and then watch the pink one up here. You'll see that it's slowed down more towards the middle, which is what happens when you have it like this. If we brought it up all the way, you'll see that it goes really fast. If we brought it down, it just changes it up again. You can play around with this. You can do ease out, you can do ease in, you can see what it looks like if you do a linear or ease. You would then just copy this cubic-bezier, this whole thing here, and then you would put it into, so let's copy. I could put it instead of the ease in, I would set it right here. Now we have our custom ease. I know this was a bit of a longer video, but I wanted to make sure that I really went over transforms and transitions with you guys because we're going to be applying them now to our project and then a little bit more later also when we do some of our animations. Let's get to that now with our project. Guys, so bear with me a little bit in this video, because we're going to be adding a lot of code. I've already added a lot of it into mine, so that we don't take a lot of time with me just typing up the code, but I'm going to go over it with you, and I don't want you to worry about it too much because I do have each of these in an example that will be in our class resources. There's going to be a collection that's going to have each video and where the code starts and where the code ends. Then there will be a final project that you can go through and make sure that all your code is okay. But let's go ahead and talk about transforming and translating right now. In my HTML, all the way after my last peg, you can ignore the string for now, but something I'll be adding in a few minutes. After my last peg, my peg 6, I added this div class bridge. The bridge is right here. It's what your strings would be going over in a guitar. When you usually look at an instrument, these are usually slightly tilted one way. They're not perfectly straight across like this. That's what we're going to do here with our transform, and we're going to translate that bridge just a little bit. In your CSS, go ahead and add your bridge class. We're going to do the background and it's the color that's accent. I made it 13.9 rems. I did the height, 0.6 rems, position, absolute. I wanted the absolute relative to the base here. Then we did top 25 percent, it's coming down 25 percent and it's left 22 percent. Then I gave it a little bit of a border radius of 10 pixels. Now here we're going to add in our transform. I did add vendor prefixes because transform isn't necessarily supported in all browsers. For just good measure, we put in the -webkit- in -ms- vendor prefixes. If we go down and we look, we'll see that it does look very slight. It's only 0.5 degrees. It's not much of a rotation here. I now realize I kept saying translate. We're not translating, we're actually rotating it. We rotated at 0.5 degrees. We could do more drastic rotation. You could do negative two degrees. You'll see that's up quite a bit more. I just didn't think that looked as nice. Again, personal preference. If you want it to be up more, you want it to be slanted more, you can do that. I'm going to put it back 2.5 degrees here. The next code we're going to be adding are our strings that are in our final project. When we're doing them on our project right now, you won't actually see them because we're going to have them top zero percent. That's so that when we actually do the animation, we can make it grow from the bottom, all the way from the bottom, up a whole bunch. That's where you get that animation of the strings animating in. We'll do that in a little bit. But as we're putting in this code, you might not see the actual strings and that's okay. We will see them when we add the animation. If we go back to our HTML here, inside each peg div, please put div class string. Then you can either add the delay right now or you can ignore that. That's what we're going to use when we're doing the animations. If you want to add it in now, you can or you can wait until we do the animations in a little bit. But we are going to have six strings. They all just need the same class name. We don't have to do a string 1,2 or anything like that right now. Just string under each peg here. If you want to dot string in your CSS, you can ignore that delay for now. We're going to again call it background accent. We're giving it a very little width, so width 0.1 rem, it's going to be top zero. It's all the way down here right now. It's going to be position absolute, left 40 percent, and this is all relative to our pegs, because it's inside of our pegs. It's 40 percent over inside our peg. Then I realized as I was filming this that I have z-index 3. Let me show you why I did that. Over here in our completed project, you can see that the strings look like they're on top of the bridge, like it would be on a guitar. If I took off z-index 3, they would go underneath the bridge like this, which is not the effect I wanted. But then I realized I could actually just use the positioning in the HTML to do this. We don't actually need the z-index 3. If we want to not add that, you will have to add that when we go back to our CSS. But in your HTML, if you go here and you take the bridge from underneath the last peg and then bring it up and put it underneath the bridge base, it's now underneath the z-index of the pegs anyways, so we don't have to put a z-index in. If something is coming first, the bridge, whatever is next will be on top of that in your HTML in the z-index, so that you don't have to put in z-index 3 for whatever you're doing with the index, as long as you have the bridge before the pegs. We'll go ahead and take that out of our string here. Our string will have a box shadow. You won't see it right now, so we don't need to add that right now. We do want to put a little bit of a box-shadow onto our bridge, so that it's not looking so flat. If you go back to the bridge that we added just a little bit ago, and then I did box-shadow one pixel, three pixels, five pixels, and then I chose brownish color again. That just makes it look like the bridge is actually coming off of the bridge base here and not looking so flat. Then when our strings go over it and they have the box shadow on them, too they again will look like they're popping off of this just a little bit. It looks more realistic, looks more like a guitar. I know we didn't go over too many transforms in this particular video, but we will be applying more in our animations for our plane in just a little bit. In the next video, we're going to go over some SVGs, and then we'll do CSS animations. 9. Using SVG: Let's talk about SVG. SVGs are Scalable Vector Graphics. They're an XML based markup language, and the nice things about SVG are they can be searched, indexed, scripted, and compressed, and you can create them in a text editor or any drawing software. I often make mine in Sketch or Affinity Designer. Other people do it in Adobe, then you can export them. I optimize mine usually with a program called SVGOMG and then I put them into my files. There are some other reasons you might use SVG. SVG are cool because no matter how big you make your picture or how small you make your SVG, you're always going to look nice. They always look crisp. They never look blurry like images might at different screen sizes and because it is an XML based image, you can animate just about any piece of an SVG that you can find and grabbed out of the DOM. Here I'm animating with a library called GSAP. Our project, will be doing CSS animations with the SVG but I just want to show you some of the things you could do with SVG. Here I'm animating all these different individual pieces. They change their colors and then they translate it. Another reason I might use an SVG, say like in my CSS images, is because I might want to create some cool shapes that are hard to do with CSS. I might be able to do them with CSS, but they're going to take a lot of time. Remember I'm a mom to three little ones so I don't have a lot of time. If I want to create something cool sometimes I'll do it with in SVG. Everything else here is CSS. It's all made with CSS, but this right here, especially with these angles, this is made with an SVG. If you've been following along with the project and you grab this out of our course resources. We have an SVG that is commented out. Now we can use this SVG. I've wrapped it in a class called Jet. Let's go ahead and start applying this to our project. Right before our last closing div here, we're going to start adding in our jets. There's going to be a jet, jet one, jet, jet two like we have with our pegs. We're going to be repeating the SVG six times. Let me show you here, right now I just dump that in there. So we have jet, jet one, jet, jet two, jet, jet three, and so on up until jet six. Go ahead and repeat your SVGs inside a div class six times and then you can add the jet, jet one, jet two, jet three, jet four, jet five, and jet six. The first thing we're going to do is use just that.jet class that's on all of them and we're going to position everything absolute. The nice thing about recording this is I can find things that I did wrong the first time and I can take them out. I just realized again, and I don't need the z-index this time. Once I took the z-index off of that string, I didn't need it anymore to put the SVG on top of the string. We can take that out. We don't actually need that. Then I'm going to do another little code dump here, but we'll go over it. Now we have each of our jets, jet one, jet two, and so on and then we're positioning them all left. Left 36.5 percent. I know this gets really precise. This is a lot of me just going into the ''Dev Tools'' and inspecting and then moving it over until I feel like it's lined up with the pegs, and the string and the string comes up with animation. That's all we had to do with this right now. In our next video, we're going to actually start animating. We'll animate our string and animate our SVGs. Then we'll be wrapping it up and so we're almost done with the project. Let's start with the next one. 10. CSS Animations: All right. Now we're going to talk about CSS animations. CSS animations are a lot of fun. Let's get to it here. There are a lot of properties in the animation, but they're very similar to the transitions we went over before. We would have a name, this is, this one's called stretch. We would have an animation duration like we had in our transitions, so this one's doing it over one second. Timing function, this one's ease-out. We could do the cubic-bezier that we went over before. We have a delay, so if I wanted to delay the animation, I could put a number here greater than 0. We have an animation direction. This one's alternating right now, it's going back and forth. I could just move it forwards, or I could just move it backwards. We have infinite. This is going over and over, that's our iteration count. I could just put one or two and the animation would only happen whatever the number I put here, 20, 30, whatever you want to do. Our animation film mode is, if you have your animation not running. Here, if I put 2 and it went 1, 2, and then I put forwards, it starts back where it started. Then we have running. Right now the animation's running. It was running when we loaded the page. If we put pause, it wouldn't run the animation when we loaded the page or if sometimes you might just want to put pause because you're trying to debug your animation a little, so you can put pause so the animation doesn't keep going and you can change things around. Then, this is the long hand for animation. If we wanted to do the shorthand for animation, just like our transition, how's the shorthand? You can do it like this. It'd be animation, colon, and then we would have our animation name, our duration, our easing function, our delay, our direction, our count, whether it has a fill mode or not, and then we would have it running. Just writing that out won't actually give you any animation. You have to have your key frame here. Add key frames and then we have our animation name. This is what's telling us what the animation is going to be. Here we have it transforming, translate X, 50 pixels, the border-radius, and then we have it doing the color. Again, we're translating the Y and then the color again. You can do to and from. Those can be properties that you have here, and so you would have to, and then you would have a bracket and then saying where you want it to go to. Saying that, I realize that's wrong, you would actually do from and then to. You want to start where you're starting from and then where you are going to. Or you can do percentages, like here, we have 0 percent, 50 percent, 100 percent. You can do 0, 10, 20, you can go all the way up if you want to, you can do 12 percent. You don't have to do 0, 50 and 100. This is just an example here. Then in between these brackets you're saying what you're wanting to change overtime here. Over between 0 and 100 percent of the one second, we're wanting to change these things. Now I'm going to show you some examples of where you might see some CSS animations. Good example is with an icon. This is our menu icon and it is animating the transform that is happening. Then we have some loaders here that are being animated with CSS as well. These are all being animated with either opacity or transform. You can see you really are not limited, if those are what you are using. You can do things like background, like we had in our first example, but those are not asked performance. It's suggested that you try to just animate your opacity and then your transforms. But you can see, there's lots you can do with those here. This guy here is just a fun animation. You can see that if you are doing some CSS images, you can bring them to life after you've created them with just a animation. I'm sorry, my internet is a little slow, so this is lagging here, but you can see the animation now. He's just cute, bringing them to life. This could be just an image and not have any animation, it'll still be cute, but it's nice to add the animation too. In the next video, the thing we are going to be animating are, our strings and our planes. They're going to come up and there's going to be a little bit of a delay. These strings will come first than these one too and then the outside ones along with the planes following them. In this video, we're going to now add our animation and we're going to just finish up anything where maybe we've missed a box shadow that we might want or any places where we'd want to add a little more detail, we'll finish that up in this video too. Our animation, our first one, I've called it tail. It's our strings, they're supposed to be mimicking the tail of a plane as it's flying. As I said in the previous video, if you already have where your position is at the beginning where you want it to go, you don't need to put the zero percent. You can just go straight to the 100 percent because I want it to go from one spot straight up to the a 100 percent. I don't have to do zero percent or 50 percent or any of that. I know this looks like a crazy number, top negative 3,800 percent, but if you think about our string down here, it is in relation to the peg, so if I just put top 100 percent, it would only go up to the top of the peg here. If I want to get it all the way up, I have to give it a large height and I have to give it this really large top percentage here, negative 3,800 percent. That will bring the strings all the way up to here. Now the next thing we're doing is we're bringing our planes down. They were all the way up here, we want them to be down on top of the pegs. We did transform, translate Y, we're just moving on the y-axis, 500 pixels. This is again something I just tested. I looked in my inspector here and I played around with the numbers until I saw that it was over the pegs and 500 pixels was over the pegs here. For our animation, we are just going to bring it up to zero back where it had been. We don't need the 50 percent or the zero percent. We're just going from the bottom where we put the plane all the way up, so we can go straight and just put 100 percent, so we're going to be transforming it, the Y, again transform translate Y, zero pixels. That doesn't mean move it zero pixels, it means move it on the y-axis from the 500 pixels it's at now, up to zero pixels. If you can remember I said, we're going to come back and we're going to add in our HTML, a delay if you hadn't already. On each plane, we want to add a delay so that they're going up at different times. Plane 1, I don't have anything here, and then I have delay 2 for the second one, delay 3 for the third one, delay 4, delay 5, and delay 6. Going through this, I actually want to go back for a second because I realized we can actually make our code a little bit drier. I didn't do this on my original one, but that's the positive about going back through your code, is that you can see where you can make improvements. Where we had just the plane, we can keep that. Then we have delay 2, delay 3, then we can have this one also be a delay 3. Because they're going to be going at the same rate, we can make this one the delay 2, instead of delay 5, because it's going to be going at the same rate as the second string. Then our last one, we don't have to have anything because both the planes are just going last and they don't have any delay on them. What I was showing you there, I was just changing in my original one, that's why you saw the animation happening with the strings too but go ahead and change that in your code so it can be a little bit drier. You don't need to have all the different delays like I originally said. When we go to put it into our CSS, we can also make our CSS a little bit drier too, which is nice. The first thing we'll do is add the animation to our plane class here. Our animation, we called it fly. Then we want to go 1.5 seconds, we're easing in, then 0.6 seconds is the delay here. It's going forward, so it's just staying up at the top. When we see our animation, we see that all of them are going at the same time now. There's no delay yet. We want to make it so that it looks like these two are going first, then these two, and then the last one. Let's go ahead and do that here. We have our delay 2, and this one's going to have the same animation name, 1.5 seconds is how long it's going to take it, the duration and it's going to have the ease-in. But this time we're only waiting 0.5 seconds and then doing forwards again. On the delay 3, which are these two, we want those to go even faster, so we're just having a delay of 0.4 seconds. Those delay classes that we created, we can now add those also to our strings so that they can correspond with the planes that we have here. Our first one won't have any special class, and we'll just add animation to the string class that's already there, and then on our second and our fifth strings under the peg 5, we'll put a delay 2 and then under our peg 3 and peg 4 strings, we'll put the delay 3. All those will be going at the same rate as the planes. Let's look at our code here and go ahead and add our animation to our string class. Here's our string class, and we will add the animation tail to this. We want to do 1.5 seconds, we want to ease in 0.6 seconds and then forwards. Now we can also add that box shadow to our strings to make them look like they're up just a little bit. That just gives the strings a little bit more depth. They look a little bit thicker now with the shadow too and they look like they're on top of the bridge here a little bit better. That's it. We now have a completed CSS image and animation. From here you can change this up if you want. You can try to play around with the delays here, make this go slower or faster, you can completely redo it. I've seen this image where it's actually leaves growing. It's stocks and then leaves coming out and birds. You can feel free to do that and share that with the class, that would be wonderful. 11. Wrapping it Up: If you made it this far, that means you now have an awesome CSS image and an animation. I hope you enjoyed learning CSS through creative coding. I've enjoyed teaching you all this way and if you did complete the project, or you changed up the project, or you've done a whole different image, I would love it if you guys would share in our class projects, and also in the comments, let me know if I can share in our CodePen collection and also on my Twitter account.