CSS3 Tutorials: Novice to Ninja (Chapter 5) | Krishnaa Kumar | Skillshare

CSS3 Tutorials: Novice to Ninja (Chapter 5)

Krishnaa Kumar, Your Best Mentor :-)

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
15 Lessons (20m)
    • 1. 61 rgb

      1:14
    • 2. 62 rgba

      1:10
    • 3. 63 absolute units

      1:45
    • 4. 64 typographical units

      1:17
    • 5. 65 relative units

      1:55
    • 6. 66 viewport

      1:09
    • 7. 67 hsl

      1:39
    • 8. 68 hsla

      1:16
    • 9. 69 color property

      1:17
    • 10. 70 text transform

      1:42
    • 11. 71 text decoration

      1:26
    • 12. 72 text indent

      1:16
    • 13. 73 text align

      1:00
    • 14. 74 direction

      1:03
    • 15. 75 text shadow

      1:52

About This Class

Hi Everyone, 

This is chapter 5 of CSS3 Tutorials where we will learn about various text related properties and other things.  If you have not gone through my previous CSS3 Tutorials, then please do check out them before enrolling into this class.  Links for CSS3 Related classes are given below.

Chapter 1 - http://skl.sh/2c3VhNU

Chapter 2 - http://skl.sh/2cAGEOL

Chapter 3 - http://skl.sh/2cuQfb5

Chapter 4 - http://skl.sh/2c91vGc

Chapter 5 - http://skl.sh/2d3fB0K

Chapter 6 - http://skl.sh/2d0NwIL

Chapter 7 - http://skl.sh/2cIqm61

Please don’t forget to leave your review or feedback after finishing this class because that will encourage me to create more useful classes for you.

Transcripts

1. 61 rgb: hi guys in the previous what we have seen, how to use the hex talisman rotation and this revealing about the RTB notation. RGB stands for red, green and blue, and each of them can have a valley between zero to lift. If I or a percentage between 0 200 Let's see that reelection abjectly works great API element. It will be better. Graf won go to style shoot selected p element Kuala property and we'll make use off our de wiki work forward. It will be 2 55 while the dean make it 20 for the blue making Zito save this. Say this while also goto browser to fresh air. So this is your lead going off. You can also make use off percentage. In this case, just make it 100 bucks until make it 0% meted. 0% Say this while goto browser profession you can see it is still right. So it's so to us you want to use the incredibly between 0 to 2 55 or a percentage between 0 200 I hope you go to the point directly works. I'll see you next video Hell, when I stray 2. 62 rgba: I guess so. This is a continent in the previous video and the progress that we have seen how to use the Argentine location, which stands for red, green and blue. And this would everyone aboard the RGB A notation is turned for the alpha. It is usually transparency of your clock and the value can be between 0.21 point 0 30 That election correctly works through the P element. It will be paragraph one, go to style. Shit, Selectivity, element Make use a background color. First of all, we'll make use off RGB notation and we will use the Colorado which is 2 55 0 zero. And that should save this. Say this while also go to blows a refresher. So this is the RGB noticed. Let's make use off RGB a certain beat here. I mean, you could play avenue here, which would be 0.5 Steve, this go to Rosa to pressure. You can see other cloud is class better. I hope you go to the point how it actually works out. You next video. Have a nice day 3. 63 absolute units: hi guys Revealing about the absolute units. Absolute units are used to define the sides often element in himself. Hydrant there, three kinds of absolute Sure it's the 1st 1 is millimeter. The 2nd 1 is centimeter and the 3rd 1 is in critical. See how they actually work? Not scared. Three elements first and they always BP elements. You could photograph one and you take last name off might be one. Just copy this, Mr Tail. You make it three. It also make it through on here. Us now go to style shoot Select D might be one. So it could be might be one to indicate down color to red and through it will be one a member, but is one millimeter Just copy this Mr Till and here like a tree and make it one i n which is one inch we could one cm, which is one centimeter and make it to save this save. This also wrote about fresher So there's the output. This is 41 millimeter. He's 41 centimeter on his 21 inch. That is how you can use the absolute units to define the higher 10 drift off Elevate. I hope you go. Report card actually works Also next radio. How will I still 4. 64 typographical units: Hi guys. Pretty well in a boulder typographical unit. Like absolute units, they're also used really Find the size of an element there to find out if a graphical unit the 1st 20 Spicher The 2nd 1 is went One biker is basically Quito WellPoint Let's see them in action. Have actually work three topi elements Paragraph one, The class will be might be one Just copy this Mr To make it paragraph two And with might be go to style shirt Select D P. One But don't we beat act and it will be one point which will be one beauty Copy this, Mr Tail Make it one pc for the biker Make your save this Say this also go to browse the fresher So this is your You can see This one is for the one point And this one is 41 Biker , I hope you go to the point correctly works I'll do next Rodeo Will I stay 5. 65 relative units: hi guys. Pretty well done about their later units there. Two kinds of ready units. The 1st 1 is pixel in the 2nd 1 is percentage. We make use up excels when you want to define it. Fix eyes often element, and we make use of person when you won't define the size, depending upon the visible screen. I know this sounds confusing, but this example will make things clear to you. It's good to elements First, BP element that I got for one and there will be a class name. Costs will be might be one. Just copy this the street here and make it go to style. Shoot. So, like the P one class. So it will be dark. My fee one background color will be read and which will be in terms off pixels. Just copy this on this to to make it the two and we will be in terms off percentage. I see of this on McGary guilty in here. Make it to save this. Also go to browser to fresher. So now we go to elements paragraph one in paragraph two and they are having the same with the totality in this grain size it won't affect the paragraph one. Better to introduce the size of the paragraph two because they're Cindy form of percentage . See, there's no impact on depending off one. What the paragraph two sizes. Introducing depending upon the screen size, I hope you go to the point how it actually works all to next video. Have a nice trip. 6. 66 viewport: Are you guys ready? Willing about the report units report units look pretty similar. Really? Person did what you have seen in the 30 units. Report units or just the size often element depending upon the screen size not see that connection are actually works pretty element for us to be element text will be paragraph one or pistol cheered DP element grown, callable bitter Where it will be 50 were w which is you, Port Worth How it will be 50 v it which is you bought height to see if this say this also go to browse a refresher. So that is the high trend it off the PLM it If I d in the size of the document, you can see the height and will tell you losing automatically depending upon the screen size. This tested out. Reduce it a bit further. See, I hope you've already point out, actually works while CNX radio. When I stay 7. 67 hsl: hi guys, too. Revealing about the vessel Current location were at stand for the hue, which is basically a degree of color. Nicholas Circle and this is Nicholas Circle. The zero swatted sixties for the Alu in treatment for the winter, and the other values has turned for the saturation and else turned for the lightness that cities were in action optically works good element. First, it will be a P element that I got one that's like DP element on reaching the background color so it will be at yourself. You're going to use the right so it will be zero for the edge. Population will be between 0 200%. Let's make it 50%. Same goes for the lightness. Make it 50% Stevic. See this also good about refresh it to the city output. You continue color if you want to make it 1 20 Let's see if this fresher to this kind of a green, Let's use other values like do you save it good about profession. So this is the view so you can manipulate Nikola depending upon the percentage and the degree, and you will get a different are put every time. I hope you got the point out. Actually, walks all to next video. Have a nice day 8. 68 hsla: Hi guys. Obviously continues in the previous video and the previously we have seen. How do you know the circle and a patient in this revealing about the test l A regular patient. This transfer deal for it is used for the Caspian Sea Off local up. Let's get element first. So it will be p element. Text will be paragraph one. So let DP Element. I'm getting pretty in the background color, so it will be at yourself. Hey, zero For the rate, we could 50% the president also for the lightness and the value for probably between 0.21 point zero. So that's maker 0.5. See this? Say this also Go to browse a refresher so you can see it is a bit of a transparent. If I remove this, he and this one saved this court A browser So you can see this is the actual color with the xsl. Without transparency, I hope you go deport Hard actually works. I'll see you next video. How can I stay 9. 69 color property: Hi guys. In the previous videos, we have seen how to use nuclear property. Could a villain but adipose with values A couple What he can have extremity Veneman fullest . And there will be a P element. It will be paragraph one. So this is the child element and this is the parent element. So relieve element forest on medical A red No select be element there. Two possible values chocolate property can have one is indebted. In this case, it will enter this value which is colored comedy parent element and the color for the P element will be heard. It is always the default one you in a few one Put this you will get deterred so it is not necessary In some cases, you mean you'd this so this is the possible value. But you can have for the color property or you can do one thing. You can make it a green. You can specify your own color. Britain Green. So these are the two possible values. Which club? Robotic and have it can have Ah inherit. But it can have a color name. I hope you're different. Radically works. I'll see you next Video. How a nice day 10. 70 text transform: Hi guys. Ready? Willing? How do the textile some property or text times from? Nobody can have five values inherit none Pockets lower case and capitalize. In the previous videos, we have seen how to use the inherit keyboard. And this would have Elena Borden and upper case Lower case. Andy, capitalize. That's gonna development first, and there will be a P element. It will be paragraph one. So this is the child element and this one is the apparent element. Go to style. Shit. So, like the development make use off textiles from property and making a bookie's see if this so this also go to browse the refresher. So in our text is in upper case, this child element is basically inheriting this property from the development. Let's make it off the element. Here you do tax. That's one property s entertainment. This means the parent elements style. Well, we apply to the p element because we're setting extracts from property toe, not save this Goto browser refresher. You can see style is not applied to the P element. No. Delete this and we get in law. It is to see if it works. Save it good about the refresher. It's working absolutely fine. I will make use of the capitalist property value. This will basically capitalize the first letter of the world. So it will be capitalized, savored and make it in a lower case. Save this photo browser refresher. And this is what I hope you go to. The point are likely works well to next video. Have a nice day. 11. 71 text decoration: you guys really learn about the text? Decoration property are text decoration. Property can have four possible values. The first is in on the second. It's underline that heart is the ruling and the forties lying through. You've already seen how the and walks in the previous videos. In this, we will learn about the underline overnight lying through Let's go toe court fight clear to be element. Next will be paragraph one Goto style shoot like DP element Used the text decoration property and give it the value on the line. You'll get a liner, the bottom of the text. Save it. See what? I also go to Gaza to fresher. So this is the output. No. Make use off a willing. In this case, you will get a line on the top of the text like this if you'll make use off line. True, you'll get the lying to the text like this. You can also use on the line a line in line through at once. Like this. D'Alene Lina lying through. Save this good browser to fresh air and this is your world. I hope you go to the point how it actually works. I'll see you next video. Helen. I stood 12. 72 text indent: Hi guys. Really? Nobody text Indian property. This particular have three possible values. Inherit land. 10% plant will be in units. And you only know about the units how they actually work, not see them in action. I want to create today the element here and there. Some random text to save this. Go to Broza Refresher. And this is the output. If I want to add a in dent in the first line, I can make use off next Indian property selectivity element. So it will be text India and I'll make use of her unit In this case, I'll make one inch to save this. Go to Rosa to fresh air. You can see I'm getting the indentation off one inch If I make it do. This is your foot. Let's make it 10%. Save this good rose. A lot of pressure. So I'm getting the indentation off. 10% make it would be. And this is your Let's go to us. You want toe? Go with the unit where you want to go with the percentage I hope you go deep. Weren't hard, actually works well to next video. How will I stay 13. 73 text align: Hi guys. Really well, in a body text lying property, this property can have five possible values. Inherit left center right and justified In case of justify the alignment will be cool on board a site. Nazi German action. How they actually work. This is the key element. It contains some random tax you see of this man, Go to browser to fresh air And this is your that's elected P element here and make use off . Explain property. Make it left. Save it. Goto Browser Refresher. This is the before it one make it right. Would you go to need? I'd say to feel make its and could go to the center like this. And if I'll make it justify, the linemen will be equal onboard the sites. See, I hope you go to the point. How likely works? I'll see you next video. How would I stayed 14. 74 direction: I guess. Revealing about the direction Property This property can help. Three possible values. The 1st 1 is inherited. The 2nd 1 is lt r and tar Bonus RTs LTs turns for left to right. Articles turns 40 right to left and there is always a default one not to them action, how they actually work. So this is the key element that contain some random text to save this and go to browser refresher. And this is your poor by default This is always and we are left to right Looks like DP element and make use of direction Property. You devalue our deal right to left. Save this good to Broza. Confess you? No, Your text is right to left digitally used with the Arabic content to line them from right to left. If you want to make it left to right, you can make yourself lt are saving about the refresher And this is your I hope you go to boarding Card actually works well to next video 15. 75 text shadow: hi guys really will enable the detection of property. A textual property can have five possible values in her. None offset X and Y blurry areas and color X Y and bloody years will work in terms off units that see them action out. Actually, work did BP element And it contains some text to save this Goto browser to pressure. And it is the output no select dp element here and make use off Picture the property in case of exit will be 10 pixels in case of why make it 10 pixels Bloodies will be one pixel because we don't want to blow too much and the color will be okay. Just say this. What about the refresher? And this is your I feel specified the negative value for the way Go upwards. See, in case off ex Google the words left. So if you want to bologna too much, you can make it 10 pixels. Say what's good about the refresher and this is your world. Just make it one pixel. If you want to be in the color, you can make it blue. Save it Could've Gaza refresh it. This is the in this case color and the clarity is optional. You can simply remove them. If you want to think positive, make it positive. Also, white fixes. And this one also good Rosa profession. And this is your I know, sort looking good. So it's better. You should make use off Carla and the blood. Yes. I hope you go to the point how it actually works. What's your next video? Have a nice day.