These CSS PRO Tips & Tricks Will Blow Your Mind!

- Speaker A introduces the use of the resize property in CSS to allow the users to control the height and width of the elements. Then Speaker A introduces neomorphism and explains how to create a hover effect with a simple CSS trick. - Use the backdrop property to create a blur effect on the element which will look like glass.

Speaker A: Tip number one, did you know that you can actually allow the users to control the height and width of your elements by using the resize property in CSS, you can allow the user to resize the HTML element vertically, horizontally or both at the same time. This will work for every element that has an overflow of any other than visible. For example overflow hidden. Have you ever seen these clean designs where the HTML elements look super smooth and have this levitating effect? This is called neomorphism and can be achieved with a very easy CSS trick. We give our element a hover effect and simply add a box shadow. Make sure that the background is not completely white and instead a very light grey because now we add another box shadow with a comma. This shadow is using negative values for the x and y coordinates to cast the shadow on the top left corner of the element and the shadows color is white. This will look like a source of light coming from the top left corner creating this clean realistic effect. We could also create the exact opposite effect and make it look like the element is carved into the website. Just use the keyword inset after each shadow and there you go. Of course this effect will work with every color palette that you have in mind. Just make the top left shadow slightly brighter than the background color. Did you know that in many cases you don't need JavaScript to create user interactive elements? Simple buttons or dropdown menus can be achieved in CSS only if you know a little trick that involves using checkboxes. Since labels and checkboxes can be connected using the for attribute, you already have the foundation of your button. Now you can use the checked pseudo class on your checkbox to check if the label was clicked or not. So this works like a simple JavaScript event listener, but only in CSS because now you can show and hide other HTML elements depending on the state of the checkbox. And the last thing to do is to hide the checkbox with a display none so no one will ever notice. You can see this trick being used in our CSS only navigation bar tutorial to open and close the sidebar. When you want to make any type of container responsive, you most likely end up changing the width so that a big container fits properly on a small smartphone screen. Then you probably have your preferred width of 800 pixels and a max width of 90% so the container will never be too big for the screen. In this case you can actually use a function called min to turn this two lines of code in one line of code. The min function always returns the smaller value, which means on desktop devices 800 pixels is smaller than 90%. So 800 pixels is going to be the width. But on smaller screens we reach a point where 90% of the screen is actually smaller than 800 pixels. So 90% will be returned and 90% is the width of a container. Very simple. The same thing works for minimum sizes. By using the max function, this function will always return the bigger value, creating a shorthand for the minwith property. And since you have to set up width minwidth and maxwidth for every element that needs to be responsive, CSS introduced the clamp function that combines all three of them in one line of code. Tip number five glass morphism if you ever wondered how you can make your website more unique, consider using glass like elements on your website. They are definitely an eye catcher. All you need is an element that has a somewhat transparent background color. Now you can use the backdrop property to control how the elements behind the current element should be rendered. Here you apply the blur function and provide a value of lets say ten pixels. This will create a blur effect on the element which will look like glass. Of course this effect only works for elements that are in front of something else. If you dont have a background image or anything like that then of course no one will see the effect. You can experiment with the blur amount to control the thickness of the glass and try to use borders and shadows to make it look even more realistic.

Speaker B: You probably know that writing good CSS code is all about figuring out by what logic you want to select HTML elements and then style them. You are going to use many selectors, combinators and sudo classes to define the roots for your web design and when doing that you should definitely hear about the not and has sudo classes as they completely change the game forever. The not pseudo class is able to exclude elements from the selector. In this example I want to style all the buttons but not the first one. So I write button the not selector and in the parentheses I say first child. Now every button will be affected except the first one. The has selector is a cool way to select an element based on the presence of other elements. Its often used as a parent selector which was not possible before. In this example I want to style all the buttons the same way to have a clean and consistent design, but some buttons have an icon inside and need a little more styling. Now I could give these buttons a class but then I need to do that for every icon button in the future. Much easier would be to do that in CSS only by addressing all the buttons that have an svg as a child element. To do that I write button has svg. Now only the buttons within svg will be styled. A more complex case for this selector would be to create a dark mode option in CSS only. Lets say we have a dropdown menu for the light and dark theme in CSS. I apply the styles on the body that has an option with the value dark. Then we check if this form element is checked. Using the checked pseudo class I showed you earlier for the body where this is the case, I overwrite the variables for the color palette to be dark. On modern websites we see more and more creative ways to make text look more interesting. One thing that I like a lot is putting gradients on text. If you ever tried doing this then you probably noticed that it is not possible to use the linear gradient method on the color property. It just wont work. The trick is to apply the gradient on the background of the element. Now we can limit the background painting area using background clip text. This means the background will only be where there is text. Last thing to do is to make the color transparent. Now we can only see the background color which is our gradient. Pretty cool. When building a complex dropdown menu you would probably use JavaScript to show and hide your elements but you might be surprised how much you can do with plain CSS. As a start you would probably use the focus pseudo class which is applied to the element when you click on a button or any type of form element using that will enable you to hide and show elements on click. This will work great until you run into this annoying problem. When you click on an item inside the dropdown the button will lose its focus and the elements disappear. By now most people will probably reach for JavaScript. However you can use another pseudo class which is called focus within. This pseudo class will detect the focus on child elements and will spare a lot of work in JavaScript because now we can actually click on the element inside the dropdown and it will work perfectly. When you have a website where you want to number your headings you can do the hard work and hard code it into every single heading. But what if you are loading the headings from a database? Then you cant really do that. Instead just create a counter variable in CSS. In the root you create your counter using counter reset and give it any name. Now the moment your counter should be incremented you adjust the element and use the counter increment property. Now you add a before element to the headings and its content is going to be the counter headings. Now you can apply a little bit of styling in the before element and the headings are numbered perfectly.

Speaker A: If you ever tried to create a swiper where every card should slide perfectly.

Speaker B: Into place then you need to hear this trick. Normally when creating a scrollable container everything.

Speaker A: Is very linear and very bad for the user experience.

Speaker B: We dont want the user to be stuck in between two cards, instead we want the cards to behave like a magnet that sticks perfectly on the edge. There is always only one card being displayed and in general the swiper feels very smooth. How did I do that? Well, in HTML I have a wrapper with five cards.

Speaker A: Each card has a heading, a text.

Speaker B: Paragraph and some very basic styles. In CSS the only important thing is that the wrapper is exactly the same size as one card. So only one card can be displayed at a time and we have an overflow x of scroll so we cant see the other cards and we have to scroll. This is basically the foundation of every swiper. Now having only that, the scrolling will be very linear and boring. To have it smoother we need to specify its scroll snap type.

Speaker A: This is a CSS property that you.

Speaker B: Apply on the parent element. We are scrolling horizontally so the first value is going to be x. This is for the x axis. If you have a container that scrolls vertically you would use y for the y axis. The second value is the actual scroll snap type. We want this to be mandatory. Now we have to define where we want to snap. For that we have to address the cards scroll snap align property. This one can have the values start, center or end. For us it doesnt matter which one we choose. Since the cards are exactly the same size as the wrapper, they will always snap perfectly. So I just say center. And now when we use the swiper the cards will snap perfectly. Mandatory is not the only snap type.

Speaker A: You could also use proximity.

Speaker B: Then it will only snap when we.

Speaker A: Are close to the edge of, which.

Speaker B: Means it can also snap back if we don't scroll hard enough.

Speaker A: This was coding to go and if you have a cool css trick to share, write it in the comments for others to see. Also watch this video right here to learn more about web development or coding in general.