Advanced CSS Tricks for Web Developers

hey guys it's david from mdbootstrap.com in this video i'm gonna show you five advanced css tricks let's get started so let's start with masks i have an image here and i want to apply this mask which i created in photoshop uh to it so you can basically easily do it in into like photoshop just take some brush and you know brush this shape you want to use and now let's see how we can apply this using css so what we're going to do i'm going to apply this to our image i'm going to edit some width and now i'm gonna use mask image and i'm gonna provide this mask url here and let's do the same for webkit mask image for sake of compatibility with all browsers and now let's display our image so we have photo and let's see how it looks like so as you can see our image has now this mask what we can do let's change the background color body background black so now you can see how this mask is getting applied let's get rid of it for a second so this is the original original image and this is the one with mask what we can also do we can add we can use image for uh for a mask or we can do something else so let's try do something like this mask image linear gradient let's say to bottom and we're going gonna have transpar rent 25 percent and black 75 percent okay and then the same for the webkit mask image and let's just copy paste this one save it and let's have a look so you can see that we applied mask using linear gradient just using css next one are counters counters are variables maintained by css whose value can be incremented by css rules don't worry i'm gonna show you what does it exactly mean so in order to start using counter we have to initialize it first in order to initialize it we gonna use counter reset function and we're gonna give it a name so we will define counter called section now let's create counter for let's say h3 handing and we're gonna do something like that now we're gonna define [Music] increment step and so every time this element appears we're gonna increment our counter and let's add some content so we're gonna prefix it with section uh counter section so this is how you call it and something like that let's say okay and now let's add some html let's fix typo first let's add some headings one heading to handing three and let's see how it looks like so as you can see all our headings are prefixed with the section and the counter which automatically increases and obviously we can get rid of this section and leave just a counter now let's have a look at another example where we're going to define counters and sub counters so i'm going to define new counter i'm going to call heading and now i'm gonna use h1 and h2 for for that oops and now something like this okay so we have first counter now let's define new counter and now let's define h2 okay counter sub heading so we're gonna concatenate both let's and space here let's oh it should be content obviously and counter heading and let's add some html now you and this is number two so as you can see our sub headings can also use contours and sub counters and let me show you last example uh i prepared for you let me just copy paste it for to speed up the process so we have another counter for each order list and list item and this allows us to quickly define following list so each item has its own counter and as you can see it's also can go deeper down to even level three and more obviously if you would use so each uh new order list below that nested would get a new counter now let's learn how to create this like a storybook effect so what i have here uh is a first few paragraphs from ali's adventures in wonderland and currently it looks like that so nothing sexy so let's see how we can quickly add this nice storybook-like effect so i'm gonna define this class for paragraph intro but i'm gonna define this one for first letter only so i'm gonna use this selector and let's set font size to 100 pixels display block now float to the left line height let's increase it to 0.5 and let's add some margins 15 pixels 15 pixels 10 pixels and zero and let's add some styles to our body let's narrow down let's set it font size to one room first and now let's [Music] narrow down this to let's say 40 percent let's add some margin auto to center the text and finally let's add let's change the font formula to cormoran infant and this is a font which i got from google fonts which i described in one of the previous videos so now let's have a look at the final result wow it looks like a really nice book now mandatory fields as you probably know html5 allows us to define which fields are mandatory which are required for user to to fill them out as otherwise they will get an error when they try to submit this field as an empty one but did you know that you can also use these attributes as a selectors in css let's have a look at this example required and let's add some border to it let's say one pixel solid pink and on the other hand let's also choose optional and let's add one pixel solid sky blue color to it and now our fields are marked as required and optional using different css rules and the last one for today is how to change text selection color so by default if i'm going to add some text here in a paragraph let's say 30 words i'm going to save it our selection has this blue color but using css we can easily change it simply by typing selection and providing background color let's say something like something [Music] like that oops that should be hash and now from now on our selection color has changed and obviously we can change also other um properties like text color and so on okay guys thank you for watching and let me know in the comments whether you knew this css tricks or not and let me also know what else would you put on this um list as an advanced css trick and if you enjoyed this video don't forget to leave a like and subscribe to our channel also don't forget to turn on notification so you'll get notification every time we release new video like that thank you for watching and see you in the next video

Channel: Keep coding

Views: 50,249

Keywords: css, tricks, pro, mdb, bootstrap 5, bootstrap, design, web design, for designers, Bootstrap, Bootstrap 5, MDBootstrap, Web Development, Web Design, UI Kit, Material Design, tutorial, how-to, guide, explained

Id: 3c5uVqkYcKA

Length: 12min 29sec (749 seconds)

Published: Tue Jul 21 2020