Creative coding: Create CSS collage

1. Create CSS Collage – intro: Hello, I'm Aga and I can't wait to invite you to my classes. We create CSS collage with simple code. We're going to use some CSS magic. We are going to create a CSS collage. Don't worry if you think that you need to have Photoshop or any other software graphic editor. We are going to use only the power of code. With a couple of lines of code, we are going to create a really interesting facts in your web browser. Please don't forget to post your work in the project section. See you in the next lesson. Bye. 2. Tools: Let's talk about tools we're going to use in this classes. First of all, we are going to use our favorite web browser. I usually use Chrome. We can also use Firefox. We're going to use dev tools a lot. What's our dev tools? These are web developer tools, and they're built directly into every browser. I really like to use dev tools in Chrome, but maybe you've got different preferences. Let's see how we can launch them and what actually is inside. We have the Chrome open. We right-click, inspect and bang, we've got the dev tools open on our right side of the window. What you can see here is the whole code, HTML of our website secure. We have this Skillshare website open. You can just check which part of the code is responsible for the layer out. For instance, if you'd like to find out into code where the navigation is, you just click on this arrow and just navigate to it. Now you know that this piece of code is responsible for rendering the navigation. Here, we've got styles, so we can get to CSS file. We can get back to elements, so our HTML code and see what styles are applied here. For now, it might seem complicated, but don't worry, I'll explain everything step-by-step. If you'd like to have this window in another position, you can decide whether it should be dug to left or maybe it should be in a separate window. We can also open dev tools in Firefox. The rule is the same right-click, inspect element and you can see the Window of the dev tools, which are part of the Firefox web browser. Again, we've got the HTML code, we've got CSS. We can also change the position of the dev tools. For instance, dug them to right. The other thing we need to have is a code editor. I recommend you to use Atom. You can download it for free from the website, atom.io. It's available for Mac OS and Windows. Maybe like other code editors like Sublime Text, feel free to use whatever suits your needs. Summing up we're going to use, web browser, the dev tools and code editor. Please remember about downloading the package. It's under your project section. 3. HTML & CSS: If you're not familiar with HTML and CSS, I strongly recommend you to visit my classes on coding your own website. I'm showing here how to create CSS classes, explaining what our CSS selectors. I'd also recommend you to check out animating SVG with simple CSS code, so, my editor classes where I'm showing also how to create selectors, CSS selectors, CSS classes. So you get everything in here. 4. Clip-path – basic shapes: In this lesson, we're going to learn what clip-path does. Clip-path is a CSS property. In general, it helps us to cut out some shapes. Clip-path is just a shapes boundary. Clipping defines which image area should be visible. Clipping is similar to chopping pieces of paper. Anything outside the path will be hidden while anything inside the path will be visible. For example, if a circle function set a clipping mask over the top of an image, you will see the part of the image which is within the circle. Let's check how clip-path works into reality. We're having a simple div with a background. The background are pink tiles, we would like to apply here click path, which will cut out a circle out of this square. I'm writing clip-path in the class of the tiles. You can see that this div has class tiles and for this selector, we're writing clip-path, circle. I would like to have the radius of the circle to be the half of the height and width of this square. We don't have to use Photoshop to cut out elements. Apart from circles and rectangles which are very basic and simple shapes, we can also apply something more complicated. Let's check, I'm pasting now the piece of code. We have clip-path and defined polygon. Each of these elements are the coordinates. Thanks to them, we can create a shape. In this example, we've got three vertices. This is the final result, which is a triangle. You may now ask how I can create such a shape? Do I have to experiment with the numbers to find the perfect shape? Of course, you don't need to. There are a lot of tools. This is one of the examples for a very cool tool which you can use to create more complicated shapes. This is called CSS clip-path maker. You can actually choose something from the already prepared shapes like octagon, pentagon hexagon, etc. With this tool, you can also customize the shape. You can just drag the points and change their coordinates. Let's apply this message because it's quite fun. Let's make it more skewed like this. The thing that I have to do is I copy the code. I'm here, in my local files. I refresh it. I still have the rectangle. Here I paste the as CSS code and I have my shape. Just easy as that. Just to sum up, we use clip-path to cut out some elements. We make some parts of the image visible and some hidden. It all depends on the shape we define. We started with simple circle, where we just defined a radius of the circle and in the second example, we were using polygon. In the next lesson, we're going to learn how to apply custom shapes created, for example, in Illustrator. We're going to use URL function. 5. Clip-path – exercise: Let's do the exercise with clip-path and URL function. We're opening the folder called glitter-clip. Let's double-click on index HTML to see what's inside. So inside we have the file that are already prepared for you. This is HTML file, and if we launch div tools, we can see that this is the section with the div called glitter class, glitter-shadow and text. I would like to apply the shape here. I would like to cut out of this rectangle a splash. If we open images, subfolder we'll see that there's splash.svg, which we already know. All we have to do is we have to apply this svg shape using clip-path property. What's interesting here is that we have a gif file. So it's moving, it's actually glitter. This is what I like about this example that we can apply gifs and clip-path works on it. This is great. I also added a shape by pseudo class. If you don't know what's pseudo classes and CSS, don't worry. I'm going to create another class dedicated to this topic, but for now let's just take it for granted. We're opening the whole folder, it's glitter-clip. We've got index.html, and as in previous example, I already prepared skeleton for you svg skeleton where you can add clip-path. I see that one clip-path tack is missing here, so I'm adding it. Here I'll add our shape defined in svg file. This is common to an HTML If you're not familiar with it, it means that it won't be rendered on the page, it's just the information for me [inaudible]. Let's open splash.svg. In the previous example, we copy the path only and paste it between clip-path, sorry, it should be opening, so changing it as well. Pasting, I can remove id and class because we don't need it. We save it, and now's the time to apply clip-path to the certain class. If I refresh it nothing has changed. We want to apply clip-path on this div. This is div class called glitter. If I write here clip-path URL function we have to reference to the shape that it's defined in HTML document, in reference to id, so it's hash and the name of our id. Let's encode. We were checking index.html. There's nothing defined, so we have to define id. That's called splash, nothing new, and refresh again because we did a change. Clip-path, URL function and name of the id splash, and it works. As you can see, the splash is applied to glitter, which has the glitter gif as the background. If we uncommand it, you'll see that glitter is gone. But we also have to apply this clip-path to the next class, the pseudo-class of before. What I'm doing right now, it's I'm opening glitter shadow and here I'm clicking on the pseudo-class before pseudo-class. If we unclick the background, you'll see that it disappears. This is the right place. We want to apply here a clip-path, applying it as well. Now we have a really interesting effect. Remember about the fact that if you change something in div tools, it's only kept in your web browser, and it's kept only in this session that you have your browser open. If I refresh the page, my changes will be gone. So we have to add them in our CSS file. Let's open CSS file. We were adding clip-path to glitter and to glitter-shadow pseudo class before. Let's save it, refresh, and it works. Remember to save HTML file and styles.css. Because very often this is the reason why your changes are not reflected in the web browser. Now we've got the glitter cut out into this beautiful splash shape. 6. Clip-path – url function: As a reminder, for a clip path property, we can use basic shapes that are already defined in the web browser. We can, for instance, use inset, which will do a rectangle out of our square and we can also have round corners, we can also have circle, ellipse, polygon for more complicated shapes. For custom shapes, we can use SVG. SVG stands for Scalable Vector Graphics, and we can create it in vector graphics soft wares such as Catch, Adobe Illustrator or Inkscape. This is a great solution because we can decide what should be the shape we can draw it in graphics editor and it's very convenient for us later on to apply to shape HTML and CSS code. How we should do it. It's high time for the URL function. I will show you how to do it by doing the exercise. So now we can open the folder called url-function, which is the folder where we can do the exercise. I already prepared the skeleton, HTML skeleton for you. Let's check what's inside by double-click. So it opens in the web browser and as you can see, it's just a rectangle with a image. We can see what is happening in the code by right-click, inspect. So we're launching the dev tools and here's the HTML code. As you can see, we've got the div with a class called splash and here we've got a CSS styles applied for this class. So we've got the background, we've got the width and height set and some background properties. Now we would like to apply SVG path that will clip out, splash out of this rectangle. So let's open the whole folder with the URL function files in the code editor. I'm using Atom. So here are the files. As you can see, you've got the images sub-folder, styles and index HTML. So we can see the HTML's skeleton and here is SVG tag however, it's empty. There's nothing written in here and here we would like to apply our SVG path. So if you check in the folder, we have images and we would like to apply this shape to cut out the splash out of the rectangle. So we're going to use Clip path. So we're opening this shape SVG, sorry. So we're opening splash SVG and here's the SVG code. It's looks like HTML, but it's XML because SVG is XML based format, and what we're interested in is that path tag, so we just copy the path tag and paste it between devs. Devs stands for definition. It means that this SVG won't be rendered on the page. So you wont see the splash in the HTML document. If we refresh the page, you will see that nothing has changed however, we have this SVG in the code. What it's missing here is the clip path tag and ID. We have to close clip path as well don't forget about it. You can have the tag here. So you can see that this tag is opening and it has the closing tag, ID, let's call it splash. We can remove ID and class because it's generated by Adobe Illustrator we don't use it. We just need all the coordinates that define our shape. So what we have to do now is we have to reference somehow from our CSS, which is in styles folder and we have to apply this shape and Clip path property. So we all know how clip path should be written. We just write clip path and here instead of circle or ellipse or inset, we write URL function and here we have the write the definition, of the shape. Our shape is already defined in index.html and the ID is splash. So what we have to do is we just have to reference to it ID. So hash stands for ID and CSS and the name of this ID, it's splash. We just have to save it. We can also save index.html and now let's refers to the page and bang something has changed. Finally. If we go to splash, class, splash dev, and check the window with the styles, so we can see that this clip path is applied. If we come on it we still see the rectangular. If we come in now we see that the rectangle, easy as that. So let's do another exercise. In our folder, there is another shape, shape SVG. So instead of splash, we want to have shape SVG. So what we do is we just copy the path tag just the same with what we did with splash SVG. We paste it to index.html instead of our previous path. You can still have ID splash. We remove unnecessary code, save it, and refresh it and now we have the shape that is defined for splash. So summing up, what we have to do is we open SVG code, copy the part of the code that is responsible for generating the shape. So here is the path tag we paste it to HTML file, to SVG, that's already defined to the definition. We have the clip path and the clip path has the ID created. We can write it the name, what we want, so it can be even element and later in CSS, we just have to reference to it in the clip path property using URL function. So instead splash, we have to write element here and if we refresh, nothing has changed just the name of the of the shape that we're referencing to. 7. Clip-path – glitter exercise: So let's do the exercise with clip-path and URL function. We're opening the folder called "Glitter-clip". Let's double-click on "index.html" to see what's inside. Inside we have the file that are already prepared for you, this is HTML file. If we launch dev tools, we can see that this is the section with the div called glitter with a little glitter class, glitter- shadow and text. I would like to apply the shape here. I would like to cut out of this rectangle a splash. If we open images sub folder we'll see that there is splash.svg, which we already know. All we have to do is we have to apply this svg shape, using clip-path property. What's interesting here is that we have GIF file. It's moving, it's actually glitter. This is what I really like about this example that we can apply gifs and clip-path works on it. This is great. I also added a shape by pseudo class. If you don't know what's pseudo class is in CSS, don't worry. I'm going to create another class dedicated to this topic. But for now let's just take it for granted. We're opening the whole folder. It's glitter-clip. We've got index.HTML. As improves example, I already prepared skeleton for you, svg skeleton where you can add clip-path. I see that clip-path tug. One clip-path tug is missing here, so I'm adding it. Here I'll add our shape, define an "svg file." This is comment in HTML, if you're not familiar with it. It means that it won't be rendered on page. It's just that information for me or the code or with coder. Let's open splash.svg. In the previous example, we copied the path only and pasted between clip-path. Sorry, it should be opening. Changing it as well. Pasting, I can remove ID and class because we don't need it. We save it. Now's the time to apply clip-path to the certain class. If I refresh it and nothing has changed, we want to apply clip-path on this div. This is div class called glitter. If I write here clip-path URL function, we have to reference to the shape that is the definition of an HTML document, and you reference to ID, so it's hash and the name of our ID, let's check, let's encode. We were checking index.HTML. There's nothing defined, so we have to define ID, that's called Splash, nothing new. Refresh again because we did a change, so clip-path, URL function, and name of the ID splash. It works. As you can see, the displeasure is applied to glitter, which has the glitter gif as a background. If we uncomment it, you'll see that glitter is gone. But we also have to apply this clip-path to the next class, the pseudo class of before. What I'm doing right now, is I'm opening glitter-shadow and here am clicking on the pseudo-class, before pseudo-class. If we unclick the background, you'll see that it disappears, so this is the right place. We want to apply here at clip-path. Applying it as well. Now we have really interesting effect. Remember about the fact that if you change something in dev tools, it's only kept in your web browser. It's kept only in this session that you have your browser open. If I refresh the page, my changes will be gone. We have to add them in our CSS file. Let's open CSS file. We were adding clip-path to glitter and to glitter-shadow pseudo class before, let's save it, refresh, and it works. Remember to save HTML file and styles.css because very often this is the reason why your changes are not reflected in the web browser. Now we've got the glitter cut out into this beautiful splash shape. 8. Masking: We were learning how to use Clip-path property and what are the different possibilities. It's high time right now to find out more about masking, especially mask-image property. Masks are used to show or hide some parts of the elements, some parts of the image. Of course it sounds just like clipping, so what is the difference? The main difference is masks are images and clips are paths. I'll be talking about the differences in the next section. For now, let's see what are the possibilities with masking. Let's open the folder called Mask. Inside we have index.html, styles, and images. What's inside? This is the HTML file I preferred for you also for that clip-path exercise. But here we're going to apply a mask, so let's launch the dev tools. Now we would like to apply to this div, with the class glitter, a mask image. All you have to know is that the property is called mask-image. Now we can add the URL function. We're referencing to a file and the images. If we open that folder, we can see that in Images we've got two files: mask-gradient, you can see here that we've got the transparency, and circle-mask, just a circle. This is a PNG file, so it means it's a raster graphic. I'm typing URL function. The path to the image, so images, and name of the file which is circle-mask.png. What you can see is that the mask is not applied and the reason is we have to use vendor prefixes. It means that we have to add webkit because we're using Chrome. For Firefox, it's moz from Mozilla. I'm typing the same property just with the prefix webkit, so mask-image and exactly the same thing. Images/circle-mask.png and the circle is applied. It works almost the same like a clipping, but here we're using the raster file. If we take a closer look, you will see pixels, the pixelated effect. We're going to talk about this effect and compare it to clipping in awhile. What you can see is that the circle is cut out on the bottom. It's because the image doesn't fit whole into this square. Fortunately, we have something like mask-size property and we can set. These are the same values as for background in CSS. We can use contain, it means that the whole mask will we contained here. We also have to apply this to our shadow. We're going to pseudo-class, pasting the code, and you will see that the mask is applied. Something strange is happening here. This is because mask is repeated. If we set mask-size for a smaller one, if we add here like 50 pixels, you'll see that we have tons of small masks applied to our rectangular. We can also do this for shadow, typing 50 pixels. It's a really interesting effect. You can actually experiment with this a lot. If you don't like to repeat the mask, there is a CSS property called mask-repeat. We can decide if we want to repeat, if we want to repeat only in X axis or in Y. Let's do it like that once again. Remember that for Chrome you have to always add webkit prefix, but we also have to add just the property without adding prefixes for the other browser. Mask-repeat and we got repeat-x. It will be crossed out here because it doesn't work in Chrome, but for other browser it may work. I'll copy this for the glitter-shadow. Let's do the other way round there's applying Y, so we've got something like that. You can create really crazy effects. You can also add no repeat, which means that mask could be applied only in one place. No-repeat here. Glitter-shadow, no-repeat. We've got smaller one. We could also change the size to make the whole mask fit into the image. Repeat and contain. 9. Masking – part 2.: Let's do a short recap about masking. What do we know is that we apply mask-image property in order to hide or show some elements regarding to the mask. For a grown, we have to remember about webkit prefix because otherwise it won't work. Please remember about it. Another thing about masking is that we can apply mask-size to define what should be the size of the mask. The whole mask can fit into the image or to element. We can also apply a mask- repeat in order to repeat the pattern over the mask. So these are the properties that can be also applied for background in CSS. So we can tell that mask is somehow related to background, and obviously we can remember about webkit prefixes for these properties as well. Masks can be raster images with different transparency levels. So the best format is png file, and we're going to apply png with transparencies just in a minute. In our exercise folder, we have also circle-mask-gradient. So what we can see here is that, on the circle the background is fading away. Let's try to apply this type of mask. So in the previous example, we were applying just a simple, opaque image. Let's do it now clearly in the code editor. So we're having our glitter div, glitter shadow. We're having the text. 10. Final exercise – Water Collage: It's time for the last exercise with masking and clipping. I hope you really enjoy playing and experimenting with this CSS properties. Let's open collage-water folder. We can check what's in index html. Well, there are some rectangles, some pictures and the title. However, the effect that we would like to achieve in the end is this. So what you can see is that we apply a splash, we cut out some elements of the picture using clipping and masking. I'm going to do this exercise with you step-by-step. So I'm opening the whole folder in Atom code editor and if I look into html, I can see that I have already some structure built. I have the place to paste svg code for the clip paths and also I have a folder with images. If we go to the page, you'll see that we have to apply this splash to the container with this gradient. So we can use DevTools to check what is the class name that generates this block with gradient. Actually, it's before, it this pseudo-class applied to container. You can see that this is it's background and to this container, to this block, we have to apply our clip path, this one. So if we open images, we can see that this flash is something, this is something which we apply to our container. So the name is class splash-2.svg. So we're opening it, we copy the path. Of course we have to create clip path tag, close it, and paste the path inside. Of course, we can get rid of the things that we won't use. For instance id, we save it and we have to add id for the clip path because we are going to reference to it in CSS. We can add splash left because it's on the left side. I can see that I did the typing so I have to fix it. Yes, now it's correct, saving and then we have to apply clip for container before. So it's clip path, url function and inside we're writing splash left, and of course, semicolon at the end of the line and refreshing the page. I can see that my shape is applied. The other shapes I have to cut out, are these two. Again, we can use clipping but we can also try with masking it, it will do the same. The reason why I suggest clipping It's because we're having svg files. We'll do the small bonus for this exercise with masking, but for now let's use clipping. On the top right we are having this shape, so it's splash dash one. So I'm opening here, copy path, paste it to index html with the same thing. So clipPath tag, id, lets put it splash, top right. Let's close the tag, no typos right now. Pasting path, sorry, pasting path, removing id, saving. Let's check using DevTools to which class we have to apply this play back. It's just the water. So we're looking for water first its here. We're applying link path, url function, splash, top rights, saving, refreshing. We're having our splash applied. The last one. So this is this the splash dash free, copy, clipPath, id, splash button right, pasting, and of course closing the tab. The last thing is we have to apply. Just let's check to which class because I'm not sure. It's called water second. So I'm looking for water second in my CSS file. The same, just applying clipPath, url function, let's just space here. It's splash, bottom right. Refresh, and the exercise is done. The thing that I would like to mention here is that, this is the container. Let's comment on that for a while. This is the container with the background. I also added background attachment fixed. So the background is fixed and we have this kind of parallel effects in the movement. This is why I think it's kind of different and interesting. You can have this in mind when doing your projects. This is done. So the last thing is the small bonus for this exercise. 11. Exercise bonus: I've just created masks. These are PNG files. We can see is that they're transparent here on the bottom. Let's apply these two splashes. Instead of clipping, lets add masking. PNG files, it's mask image, URL function, images, splash- 2 PNG, and of course, adding vendor prefix, which is webkit. Let's refresh the page. We can see that the splash is smooth and blurred somehow, but the mask is repeated. Of course we have to add mask repeat, no repeat. Sorry. Of course with vendor prefix and mask size, let's add contain, and the same with webkit. Of course, the same properties we can apply to our water class. Instead of clip, we're adding slash 1. Saving, refreshing, and this is the same blurry affects. Of course, you can experiment with it a lot. We can do some holes inside the mask. Everything is up for your creativity and the final effect you would like to achieve. Don't forget to press your project.