5 CSS tricks every Web Developer should know in 2021

hey guys it's david from mdbootstrap.com and in this video i'm gonna show you five css tricks which every web developer should know let's get started number one is css blend modes you might see in page like this which use this interesting color effects mix with the image so i'm gonna show you how you can easily achieve that using css i'm gonna use this photo which we're gonna use as a background image to our page so let's add some styles i'm gonna add our styles to body so we're gonna set background image to url photo and now let's see how this looks like so we have our background image now let's add some background color to it i'm gonna use a green one okay now if we check our page nothing happens because image overrides our color but let's see what's gonna happen if we're gonna add a blend mode uh you can use different modes and you are familiar with programs like photoshop and layers you might already know what this means uh well if not i'm gonna quickly show you and obviously you can read more about what different blending modes are actually doing but let's have a look at darken blend mode now as you can see this blends our background color with our image and by using different blend modes we can achieve different effects so you can use dark and lighter you can use difference which it's a little bit crazy but i of i personally really like a screen one and now by changing the color of background our background color we can achieve different effects like the one we've seen on the previous example number two is clipping if you ever wonder how this page like stripe creates this diagonals here let me show you how you can easily achieve that using css so what are we going to do we're going to add new div with id background or actually bg or we could actually use class that doesn't really matter and just for the sake of this tutorial we don't need this body anymore so let's do let's add new selector here and what we're gonna do we're gonna set a height and a width height and a width to 100 percent to fulfill the entire space now i'm gonna add some background color to it let's say something like two 2 4 8 something bluish and now i'm gonna i'm going to use a clip buff now one of the one of the easiest way to use a clip buff to generate the clip of css is to use one of the generators so you can use you can search for like clip css generators or just directly go to one of those and i'm gonna go uh you can you can use different shapes like you can see here right so there are a lot of them available and i'm gonna use let's say pentagon and i'm gonna set it to something like this and let's give it a little bit curve over here and this will generate a css for us so what i'm gonna do i'm gonna copy this one and paste it into our css what i also gonna do is gonna set this position um to absolute and set that index to -1 so we want this to be our background and let's see what the result is and this is how the result looks like so obviously you can use you can use more complex shapes like you've seen here so we could do something like that easily something like this or whatever let's create some crazy shape and let's just copy this one and replace and voila another must-have for web developer is animation css allows us to create and animate almost any property which we use in css so let's have a look at this example i'm going to create a div and we're going to create some colorful animations so what i'm going to do i'm going to define a keyframes um keyframes allows us to define different steps for our animation so let's define a few few steps here uh for our color change so i'm gonna start with zero and let's do it like background um let's start with violet okay now let me just copy paste this one um like that and change some values here let's say this gonna have 14 percent well let's do it like 15. now let's change colors okay and now let's copy paste this one for the sake of compatibility with different browsers with all browsers so we're gonna say add webkit key frames okay so now we just define keyframes so let's add some style to our div so let's let let's give it some height let's say 400 pixels with 400 pixels border one solid black and animation blink because that's how we called it time animation time and we're gonna define to play it infinitely now again webkit animation blink 10 seconds infinite and let's check the result oops so that's how it is as you can see we can easily animate almost any property so starting with color shape we can move um we can move objects from one place to another so this is a very very important knowledge is currently we used to use javascript for that but now most of the animation actually happens in pure css which is just a more convenient way to do it the next one isn't actually a trick but knowledge that you can use different fonts on your website and if you navigate to fonz.google.com you're going to find almost 1 000 different fonts available for you to use for free so if you navigate there you can browse different different phones um and if you choose one you're gonna see a preview preview of the phone how does it look like using a different weight and different style like italic uh for example here we have like a light 300 ito league and while here we have a bolt so just pick font you like let's say i'm gonna use this one i'm going to choose style i like you can actually use one style or you can select multiple styles and add them and then you can use this embed option which will give you the code you have to use on your page so i'm gonna use this link so let's go to our document i'm gonna paste it and let's add some paragraph and generate some text now the second step is to copy a font family so let's go to our style and let's paste it to our body and let's check how it looks like voila our font has changed another very interesting option to use in css are gradients so you can generate different kind of gradients using just a css so let's have a look at the example you already know that you can set a background color to to your elements like this rgb and then some color let's say something between green and blue so like this one but we can also add a gradient so we can use different kind of gradients i'm gonna use a radial one and we're to define this we want to circle shape and then we will provide two colors so one is going to be the same as we used here and then color shift and then second color uh actually we should let's add some opacity here to zero or actually let's leave it for one for a moment and then something more bluish and then this one 100 and let's see how does it work actually and this is our gradient so there are many properties which you can change here but don't worry you don't have to remember all of them what you can do you can just use one of the css gradient generators like that one and simply by using these color pickers you can generate whatever gradient you like you can also change this color shift so using this range selector you can also generate linear gradient like this one let me oh i thought it's going to reset to default but here you can define the angle angle so if we're gonna use something like this or that we can remove number of colors so we can have more you can use pre-defined shapes so yeah just play with it and see how creative you can be with just a few clicks so let's check this yeah i think it looks cool so these were five css tricks which every web developer should know let me know in the comments whether you knew already all of them or not and what else would you put on this list and if you enjoyed this video don't forget to like it and if you don't want to miss more videos in the future like this don't forget to subscribe and turn on notification thanks you and see you in the next video

Channel: Keep coding

Views: 386,314

Keywords: css, web, development, tricks, mdbootstrap, web-design, Bootstrap, Bootstrap 5, MDBootstrap, Web Development, Web Design, UI Kit, Material Design, tutorial, how-to, guide, explained

Id: wfaDzSL6ll0

Length: 14min 0sec (840 seconds)

Published: Thu Jul 16 2020