6 CSS tricks you didn't know

Watch other courses

Dawid in his short video will present you simple tricks that could speed up your workflow while working with CSS that you probably didn't know.

There is a lot of cool CSS hacks you can do, so we've prepared another video with 5 tricks that you should know in 2020

00:00 hey guys it's David from my bootstrap 00:02 dot-com and in this video I'm gonna show 00:04 you six CSS tricks which you probably 00:07 didn't know and if you happen to know 00:10 all of them let me know in the comments 00:12 so the first thing I'm going to show you 00:14 is how to add a stroke over text using 00:18 CSS if you don't know how stroke effect 00:21 looks like let me show you let's add 00:23 some star tour heading so first we're 00:27 gonna make our text transparent and you 00:32 can see that this property is crossed 00:35 out because it's experimental so well it 00:39 may behave differently depending on a 00:42 browser so you should be very careful 00:49 while using this one and now let's add 00:52 stroke to our to our text so organize 00:56 WebKit text stroke and let's add this 01:01 it's a violet color and let's define its 01:06 size to 1 pixel okay now what we have to 01:09 do is just add some heading and generate 01:12 some text to it and let's see how it 01:17 looks now 01:24 voila our text stroke is ready you 01:28 probably know that you can add or 01:30 generate growlings using CSS but you 01:33 know that you can apply this even to 01:35 text like headings let's have a look 01:40 let's set a background to linear 01:45 gradient 01:52 I'm prepared to call ours okay and now 02:03 let's at 02:18 okay and now we have to add our heading 02:27 and let's see what's the result 02:29 yes so as you can see we've got really 02:32 nice blue to purple gradient links 02:36 interesting property to know is clamps 02:38 this property allows us to hide in a 02:42 text after a certain number of lines so 02:45 let's have a look how it works let's 02:48 create a new class for paragraph I'm 02:53 gonna call it short end and we're gonna 02:55 use display WebKit box we're gonna set 03:04 WebKit blind clamp now we're gonna set 03:10 it to one for a second now we also have 03:16 to set WebKit box Orient property to 03:20 vertical and over flow to hidden and now 03:29 let's add some thief and set it with to 03:36 let's say 200 pixels so we can easily 03:40 overlap our text and let's add some some 03:45 content so we're gonna have and Eve and 03:50 paragraph inside it and let generate 03:53 some text let's say 15 lorem words and 03:56 let's have a look how it works as you 04:01 can see after the first line remaining 04:06 text just disappears and once we change 04:14 this line number two let's say three 04:18 we're gonna see more text you probably 04:22 know that you can adjust your underlines 04:25 as well as borders using properties like 04:28 dots 04:30 it's color like you can see here or 04:33 dashes but did you know that you can 04:36 also use for example wife let's have a 04:39 look at this let's add new class let's 04:43 go we're gonna call it waving and set 04:46 text decoration to underline wavy violet 04:55 and now let's add some content and let's 05:06 have a look so here is our wavy 05:09 underline sometimes especially when 05:13 you're writing a blog you might stumble 05:16 upon situation but you have to quote 05:19 inside the code so you know you are 05:22 quoting someone who is quoting someone 05:24 else who said something so using CSS you 05:27 can define a different style for nested 05:30 quotation let's have a look so in order 05:33 to define quotes in paragraph for 05:36 example we can do it like this 05:42 so say quote and we can define a 05:47 different pair of quotes so I'm gonna 05:50 use this sign for first level of quotes 05:57 let me add some spices here okay now 06:03 we're gonna add next level and the third 06:08 level so I'm just gonna copy paste that 06:11 one and now let's have a look at the 06:13 example so inside our paragraph we're 06:17 gonna add some quote let's say 06:25 and then another called inside it and 06:35 then some even more nested quotes so 06:44 let's have a look how it works 06:47 so as you can see this is our first 06:49 level quote this sign then we have 06:53 double quotes and is our third level of 06:57 quotation right so first second and a 07:00 third one and finally last CSS trick 07:04 which I have for you will help you or 07:06 your user to disclose a file format of 07:09 links or attachments so I have this icon 07:12 of PDF over here and what we can do what 07:18 we're going to do we can use attribute 07:20 selector and we're gonna look for each 07:27 link which ends with PDF extension and 07:32 what we want to do we want to add pseudo 07:35 class so what we will add after each 07:40 link it's going to be a new RL to our 07:46 icon let me fix typo 07:53 and now let's add some link over here 08:05 let's have a look how it works so as you 08:10 can see CSS automatically adds this icon 08:13 to each and every link which targets and 08:17 PDF file okay so that was the list of 08:22 CSS tricks which as probably you didn't 08:25 know and if you knew them let me know in 08:27 the comments and if you enjoyed this 08:29 video please leave a like down below and 08:32 if you wanna see more videos like this 08:35 don't forget to subscribe and turn on 08:37 notification thank you for watching and 08:40 see you in the next video