Transcripts
1. Intro: Hi, I'm Aga and I've created a super creative CSS classes for you. If you would like to become a CSS Harry Potter, the time is now. In my exercises you're going to play with CSS filters such as grayscale, contrasts, saturation, but also to apply really nice zuo torn effect just in a couple of lines of code using CSS blend modes. If your curious, well, you can do only with CSS for getting on photoshop, or other graphics editor. Please stay with me. The classes are destined for people who have already reading some lines of code. But if you're not familiar with CSS, I strongly, recommend you to watch my other classes. Bye, see you in my classes.
2. Tools: Let's talk about tools we're going to use in this classes. First of all, we're going to use our favorite web browser. I usually use Chrome, we can also use Firefox. We're going to use DevTools a lot. What are DevTools? These are web developer tools, and they're built directly into every browser. I really like to use DevTools 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 DevTools open on our right side of the window. What you can see here, is the whole code, HTML of our website it's here, we have this Skillshare's website open. You can just check which part of the code is responsible for the layout. For instance, if you'd like to find out in the 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 would like to have this window in another position, you can decide whether it should be down to left or maybe it should be in a separate window. We can also open DevTools in Firefox. The rule is the same, right click, "Inspect Element" and you can see the window of the DevTools, 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 DevTools. For instance, drag them to right. Another 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 and it's available for macOS and Windows. Maybe like other code editors like Sublime Text. Feel free to use whatever suits your needs. Assuming that we're going to use, web browser, the DevTools and code editor.
3. CSS filters + exercise: In this lesson, you're going to learn about CSS filters. CSS filters help us to achieve effects just like in Photoshop, such as blur, adjusting contrast, or color shift. Available CSS filters are blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, and sepia. Open CSS filters folder and then click on index HTML. This is the website where we're going to do the CSS filter exercise. We have the pictures that require a little bit of modifications, such as modification of the brightness or contrast, you can feel free to do whatever you want. I'm going to show you my way of enhancing these pictures. First of all, we're going to launch the dev tools. The quickest way is to use the shortcut with a keyboard or right-click to inspect. As you can see, we have HTML code for the, for these two peaks. And we're going to apply CSS filters. I'm writing filter, and let's say I would like to increase the contrast. If I type 1, this means that the state doesn't change. If I write 1.1, it means that the contrast is increased by 10 percent. If I write 0.9, it means that the contrast is decreased by 10 percent. Let's have contrast increased by 20 percent, and we'd like to add brightness as well as ones that nothing has changed. But let's increase it by 20 percent. The photo is more dark right now. To put the picture in a more old-school vibe, I'm going to use saturate filter as well. We're going to combine all those free filters, and I'm writing saturate and would like to increase the saturation by 30 percent, let's say. I typing 1.3. As you can see, the picture is enhanced now. Maybe saturation a bit more. You can see now that the picture has a different clave word. Of course we can change it in Photoshop, but in CSS it's much more easier if you don't have already Photoshop open. I'm going to copy the code and paste it in Atom editor. I'm looking for the left selector in CSS, I'm pasting, saving and refer to the page so I can see that picture [inaudible] are saved. What I'm going to do right now is to apply the hover effect. I would like to have this picture blurred because it's like the picture that is behind the picture with the waves, so I'm going to apply blur filter layer. For for the blur we need to define the value in pixels. For instance, I would like to have the image blurred by four pixels and on hover, I would like to unblur the picture. Let's copy the code and paste it in our Atom editor, in our CSS file. And on hover, so I'm writing now the pseudo-class, I would like to have the same values so I need to copy them, not to reset and blur, zero. Let's check the effect. I am refreshing the page and if I hover, the blur is gone. You can do tons of different effects. Playing pseudo-classes, playing with filters, with other images. I strongly recommend you to just go bold and experiment with them. Your homework is to apply filters to this picture and to the background as well. For the background, it works just same. We just apply filter, for instance, inverts 0.8 or saturate 1.5. In the next exercise, I'm going to show you some magic with drop shadow filter.
4. CSS filter: drop-shadow: This part we're going to play with Drop-shadow filter. For drop-shadow, we need to define four values. The first one is offset in x-axis, the second one is in y-axis, third one is defining how the blur is going to be spread, so the blur radius and the last one is the color. Now check out the drop-shadow in practice. We are opening drop-shadow folder and index HTML. This is the site where we're going to implement drop-shadow filter. Let's open Dev tools as always and here we're going to apply filter to this image. I'm writing filter drop-shadow and first offset in x. Let's say, five pixels, offset in y, let's say 10 pixels, the blur radius, let's say, zero and the color, for now, let's try it with white. We have the shadow. What's the coolest thing about drop-shadow in the filter property is that it actually addresses the shape of the PNG file. We've got the file that has transparency. We have the image that is cut it out, you can see the shape of the hand and the leaves and its better to use filter because it addresses the shape. If we apply Box-shadow instead, you will see that the effect is a bit different. Let's write 10 pixels of the offset, 10 pixels of the blur and the color white as well and you can see here the effect is quite strange. Let's command out the transform, so it won't be rotated. The thing is that box-shadows works only four boxes, so no matter if you have cut out image and saved in PNG file, it treats your image just like the rectangular; so it has set height and width. It can differentiate the shapes inside the image. What's cool about filter-drop shadow is that it actually respects this We can have really cool combinations and really nice effects. What I really like about drop-shadow is that we can also use RGBA, so we can change the alpha channel of the color, meaning that we can change it's transparency, so let's have black color, so it's 000 and if you would like that, closing. We have the black color but if we add the fourth value, which is in the alpha channel, the transparency channel, let's say 50 percent, you can see that there is transparency going on, which is awesome. Maybe let's have 30 percent and let's blur it a little bit. Maybe not that much. Maybe by five pixels. Maybe let's have it a bit on the lower parts of the image. This is really interesting in fact because it looks like a 3_D thing, so your website is not flat anymore and you can play a lot with it thanks to drop-shadow filter property. I strongly recommend you to check it out and to apply your own ideas and solutions. The last thing I want to mention here is that we can also play with drop-shadow filter using CSS animations. As you can see, the thing is very simple, we just have to apply animation, the keyframe animation that changes the position of offset for x and y. If we look into the code, you'll see that we have the keyframes, drop-shadow animations or for the first frame, we'll have some sorts of values and for the last one it has increased offset for x-axis and also the bigger spread of the blur. I'm really curious what you're going to achieve by mixing all this properties such as filtering and animations, so let me know by putting your work into the project section. The last part of this class is, we're going to focus on CSS blend modes. It's super exciting thing. So please stay with me.
5. CSS blend modes – intro: This is the time to start playing with blend modes. CSS blend modes allow us to blend elements with the elements behind it. We can use mix blend mode, where we blend the element and that element behind it. For the background blend mode, we define the blending between the elements background image and its background color. [inaudible] might be familiar with blend modes. For instance, in Photoshop where you can apply that friend affects on D layer. For instance, we can have therapy or overlay blend mode or pin light. This means that our image from the layer two is mixed, is blended, the layer that has behind it. This is why we can achieve this amazing colors. As you can see here, we have the full list of available blend modes in Photoshop. The beauty of CSS blend mode is that we have the same available in color. Let's check how CSS blend modes, word and practice. We have the image on the left. It's simple IMG tag. I'm applying mixed blend mode. The first example we want to check as color. Next, we have color burn, color dodge, darken, difference, exclusion, hard light, hue, which is very crazy, inherit so it doesn't change anything. Initial lighten, luminosity, multiply, normal, overlay, saturation, screen, soft light, unset. We can play with the colors by changing the background color of the parent of that IMG element. We will make it blue and change it to exclusion. We'll have such a result. To make the effect stronger, we can apply gray-scale by adding CSS filter. Thanks to it, we will see that the colors were limited because our picture is now in gray-scale so we got only the levels have gray colors. In the exercise apart, we're going to experiment with blend modes to create the dual tone effect. You might be familiar with it from spotify product.
6. Duotone effect: In this final exercise, we're going to create a duotone effect. The finer effect we want to achieve with CSS blend modes, is this one which you can see on the left. It reminds me of the duotone effect, known from Spotify. I hope you are familiar with it. So let's start to do the experiment. Let's open blend modes duotone folder, and Flash index HTML. This is where we are going to implement duotone effect. Let's open Def tools, and inspect the code. There are a couple of things that have to be done, in order to create the duotone effect. First of all, we're going to apply the background color to the container, that it's a parent of our image. In our case, it's left image selector of image class. Second thing is to apply a mix blend mode property to the image, and make the image grayscale, and take the rest of all to contrast. To maximize the duotone effect it's necessary to have the image in a grayscale. The last thing would be to create a pseudo element with a background color, so we'll have the two colors blended together. One color that is going to be taken from the parent container, and the second that is going to be taken from the pseudo container. Let's apply it by red color. Let's say we want blue first. This is how we're going to see the blue color, instead like that. Now we can see the image, we will add mix blend mode, and as you can see, the image is blended with the blue background. But now we also have to create the pseudo class. First let's copy the code and implement it in our CSS. So I'm looking for left image container, I made in background. I'm adding mix blend mode for now. We can use lighten, and we also wanted to apply filter, to make the image in grayscale. I'm writing, filter grayscale 1, and we can also increase the contrast by 30 percent [inaudible]. Let's refresh the page, and you can see that you get the background, we can change, this is the background in the parent container, and individual got the lighten, mix blend mode applied, and a grayscale filter. We can also change mix blend mode to any other one. I will suggest to go with darken instead of lighten, because we're going to use the lighten for the pseudo element. Talking about pseudo element, we will of course need to create it. We're creating the pseudo element for the parent container of the image, so in our case, it's the left image. This is how pseudo element looks like, and it's very important to define the content, in order to have the pseudo element generated. It can be emptied, just like I did here, and of course defining the size of it, so height and width. We have the position absolute, Tab zero, left zero, and now we can apply the background color. I'm just adding someone, just a random one, and mix blend mode. As mentioned previously, I'm going to apply darken. So let's save, and refresh the page. Something has changed. Someone wasn't the best choice, so we can try using the friend colors. Let's see which image is here. I would suggest to go with a red, for the parent container, and for, after two class, the blue one. Sorry for changing it, that is experiment. After I'm pasting this color and for the parent container red one. I'm refreshing, and this is the final effect. Of course, we can try to be more crazy with it, and for instance add screen, or any other that suits better for your needs. But this is how basically you can do the duotone effect, by mixing the colors from the parent container, with a pseudo element applied to it.
Aga Naplocha, Creative coder & designer
