शैडोइंग अभ्यास: Build smarter color systems with relative colors - वीडियो के साथ अंग्रेजी बोलना सीखें

अभ्यास मोड चुनें

हर मोड पूरी स्क्रीन का अभ्यास कक्ष खोलता है।

168 वाक्य

यदि वाक्य बहुत छोटे या लंबे हों, तो समायोजित करने के लिए Edit पर क्लिक करें।

Hi there my friend and friend.

If you're maintaining separate variables for lighter, darker, and transparent versions of the same color, there's a much better way to work because of CSS relative colors

that let us generate all of these variations based on a single value.

Let's dive in and see how this works.

I got a demo set up for us right here.

And we can take a look.

So you can see I have some variables set up and I have some, I'm using toast notifications for this

because I think it's a nice example of something where we can have multiple variations of this as well

and we can look at how we're saving a lot of time.

So the very first thing I'm going to do is let's come in

and sort of style the generic one and then we'll sort of fancy things up from there.

And really quickly there, I just made the font size bigger because I think it'd look better for our demo.

So here, let's set things up.

I'm going to come in and we're just going to come in on this to start with and do a, I call it toast color and put a color here.

And I'm going to use the base color for now.

So we're going to say it's our var of base color.

And this is going to help us a little bit out, just base like that.

This will help us out a little bit later on.

This could be a step that we do later.

It could even be a step that you skip

if this is something that you're only doing one thing of

and you don't need a bunch of variations like we're going to have here.

Now, next step, I'm going to do something

that looks a little bit weird because I'm going to say we're going to color.

I'm going to do an HSL from, and this is relative colors.

And I'll explain the syntax of this as we write it out.

I'm going to say var toast color.

And then I'm going to HSL.

and nothing really should change actually and I need a semicolon at the end

and as you can see nothing really much has changed

but what we're saying is the color is an HSL value

that is coming from the toast color and this H

and S and L are just placeholders for the hue saturation

and lightness and we'll see why that's important in a minute just

so we can see quickly that this is working

if I change this over to my info we're going to see

that the color of the text and the border has changed on all of them.

The reason the border color is currently changing is because my border is set to two pixels solid, I haven't declared a color, and borders by default will follow the color of the text.

But for now I'm going to keep this one as my base

and we'll come in with the modifications for the other ones as we go through.

Now where this gets a little bit more useful is let's come in with a background color.

So background color, I'm going to put this on a different line just

so we can keep it all without any horizontal scrolling.

I'm going to say HSL from, same thing, my var of toast, you gotta spell toast right,

toast color, and space, H space S space L, except this time if I do that I can't read my text.

But I want it to always be based on the color of the text.

I can just come here and actually change the lightness value.

So I can actually say this is at like 15%, except that's going to be really dark.

I meant to say something like 85% and go the other way around.

And we can have the exact same color, but 85%.

And maybe even we can come up to a 90 here, something like that.

But we're getting that a little bit of that same color coming in in the background now.

And this is cool, right?

We're just replacing whatever the lightness was with it being 90% now in our HSL.

And just for fun, we can also take this to another level

and we can add like a box shadow here as well.

So I'm going to actually move, we'll do the box shadow here, box shadow.

And again, I'll do this on two lines just so we can see the entire declaration.

And let's come in with zero offset, maybe 12 pixels, 12 pixels.

I'm going to leave it big for now.

Like it really is standing out obviously, but then we can come in with, and this is another really cool thing with our relative colors.

So HSL from var toast color and my H, my S, my L, except in this case, it's really dark and I go,

oh man, I need a shadow, but I want to lower the opacity of it.

We can do that with relative colors, which is amazing.

So I just do a forward slash here because this is the way the space separated syntax works in CSS.

If you'd like to learn more about that, I talked about it last week.

I'll put a link in the description

and there might be a card popping up you can check

that one out and I'll remind you at the end

but I can just come here and say something like 0.25

or whatever I want for the lower opacity of that same color

and you can see that's working I want to make this a bit more subtle

so I'm also going to give it a spread of negative

eight just to pull it in a little bit just give

us a little subtle shadow underneath each one of those cards

or toasts or whatever we want to call them awesome

so that's all working now this is where the other cool

thing comes in here is I have my info my warning and my error here.

And I'm just doing these with data attributes because this would be the easiest way to do it with JavaScript.

Especially if you're, you know, instead of using a class here, I think it makes a lot more sense to do it with a data attribute because if you're setting it with JavaScript, you just set it.

You don't have to worry about removing the info to put a warning or, you know, you just say if it's this one, the text is going to be coming in probably from JavaScript as well.

The whole thing's going to be triggered with JavaScript and you just do the data, what toast is equal to, and you style it that way.

So let's come down here

and we'll start with the first one where we can say the data toast is equal to info.

And because I was set this up with a custom property of toast color, we can just come here and say in this case, my toast color is my, did I call it info?

Yeah, I did.

Look at that.

There we go.

So my info comes in.

Now there's a bit of a problem here.

We're gonna solve that in a second, but let's come in with all three of them.

So that's my info.

And the last one will be, so info, I forget what I called them, warning and error.

So these two, that's a warning.

And then I can come on this one and say those are error.

And all the colors are coming in.

It's looking pretty cool that we can do all of this with a single color and everything is adapting automatically.

There's

So one problem that's coming in is like the text might

100

be a little bit hard to read depending on what color you're using.

101

Especially like, I don't know, I guess this one's okay, but we could definitely make it better.

102

So what I'm going to do is come back up to where we declared all of this.

103

And over here I want this color to actually always be dark no matter what value I'm using.

104

So maybe I come in with a 20% here for the lightness on the color and then it's going to be, you know, based on the red or based on that orange yellow,

105

but I know it's always going to be darker.

106

my borders have sort of gotten darker too, but we just do the same thing for the border where I never actually declared one.

107

I'm just going to copy and paste to speed things up, and this one will just use the original HSL.

108

And I guess I could, if you're not changing the value, you could just do the Vartos color and not worry about it,

109

and that would work, but this just opens up some extra doors I think.

110

So we have the border color always coming in with sort of the more bright, vibrant version

111

and then the text we can darken maybe 20 is a

112

bit low we could try like a 35 you can play with the number

113

that you want on that to just make sure

114

that it's always something that's decently readable but we can do better

115

and before i let you know how we can do better i just want to let you know

116

that this video is inspired by an article or two articles actually

117

that i wrote for picolily and

118

so i'm going to link to both of those down below

119

they're the pragmatic guide to modern colors discolors in css i

120

think is what we called it uh there's two articles in

121

there the first one is really for people who are copying

122

pasting colors the second one is going a little bit further

123

and diving into a lot more of the manipulations and other things

124

that you can do

125

and just you know we're talking about pick a lily people

126

have been asking me for javascript content for a long time

127

they do have a relatively new course called javascript for everyone and so

128

if you're somebody who's looking to learn more about javascript i definitely would recommend going to check it out

129

and no this is not a sponsored bit i just like spreading the word on good quality content

130

that is out there so check out the course check out those articles

131

if you're interested but now let's look at the other improvement

132

that we can make to this which is

133

while i have all of these set up using hsl rgb

134

hex you know your copy pasting from your design software whatever it is

135

and you're setting these here

136

when using relative colors you can often get a little bit of a better result by using oklch

137

and oklch is a newer it's like it's like came around more recently.

138

But the difference between HSL and OKLCH is as you go through the different hues, it works in a much more consistent way.

139

So what I mean by that really quickly is looking at this demo, I've set these both up with OKLCH and HSL.

140

And if I go through the different hues, as you get to here, you can see like this text becomes harder to read.

141

And it really depends on the color that we're using.

142

When you get to yellows, visually it gets a lot brighter, even though the saturation and the lightness values have stayed the same.

143

And the whole point of the OK LCH in general is to keep

144

that consistency as you're going through the different hues in terms of the perception of the brightness of the colors.

145

And so here's an example of looking at the differences between using, I've set these up exactly the same way, I just took away the gray one.

146

but you have the base toast color coming in and I've set them all up with OK LCH here instead.

147

The border I just set with the base color, like I said, we could do if it's staying the same.

148

But one thing you'll notice here, there's two important things is if I'm doing OK LCH on the outside here, I do need to use the LCH values.

149

So LCH instead of an HSL and the lightness being the first one now.

150

and I've done a little bit of extra math in here

151

for the background color to change the chroma a little bit

152

but you can see there's a little bit more consistency between the colors coming in

153

when I'm using the OKLCH versus using the HSL here with

154

the the border color is perceptually looks similar the vibrancy of

155

the color of the background looks much more similar whereas here

156

like the difference in the border color especially I find with

157

this one coming through the border looks much more faded out compared to the blue

158

which one is popping so much more

159

when I'm using the HSL it's not something

160

that a lot of users are going to notice

161

but by using OKLCH even though my base color is set to an HSL

162

or whatever you know hex or RGB it doesn't really matter by using the OKLCH throughout

163

and having my toast colors all set through an OKLCH rather than using an HSL and modifying it that way,

164

you just get a little bit more consistency between the different colors that are being generated for you.

165

So if you enjoyed this video, if you do want a bit of a primer on the space separated syntax, like I mentioned, that video should be showing up on the screen somewhere right now.

166

And also if you want to dive deeper into all of this, do go and check out those two Piccadilly articles and maybe their courses as well.

167

And with that, I would like to thank my enabler of awesome, Johnny, as well as all my other patrons and channel members for their monthly support.

168

And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.

ऐप डाउनलोड करें

धाराप्रवाह बोलने के लिए ज़रूरी सब कुछ

AI उच्चारण स्कोरहर वाक्य का स्कोर

IPA अभ्यासहर ध्वनि में महारत

शब्दावलीअपना शब्द भंडार बनाएँ

शब्द गेमखेलते हुए सीखें

QR स्कैन करें

Download on theApp Store Get it onGoogle Play

उसी चैनल से

FOR YOU

अनुशंसित वीडियो

124 वाक्य

How to Make Anything - Learn to Think Like an Engineer

Business EnglishUniversity StudentsWorking Adults

195 वाक्य

JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue

Business EnglishUniversity StudentsWorking Adults

20 वाक्य

Design Systems vs. Style Guides

Business EnglishUniversity StudentsWorking Adults

435 वाक्य

Color Palettes Worth Another Look

Business EnglishDaily ConversationUniversity Students

152 वाक्य

Video

IELTS PrepBusiness EnglishUniversity Students

350 वाक्य

Blender Tutorial: Photorealistic Puddles

Business EnglishUniversity StudentsWorking Adults

200 वाक्य

CAP Theorem in System Design Interviews

Business EnglishInterview EnglishUniversity Students

309 वाक्य

Claude Code: The Advanced Guide (99% of Devs Skip These Features)

Business EnglishUniversity StudentsWorking Adults

80 वाक्य

The Most Confused Concepts in Engineering

Business EnglishUniversity StudentsWorking Adults

119 वाक्य

इस पाठ के बारे में

इस पाठ में, आप प्रयोगात्मक दृष्टिकोण से CSS रिलेटिव रंगों के माध्यम से रंग प्रणाली बनाने का अभ्यास करेंगे। रंगों के अन्तरों को एक ही मान से उत्पन्न करने की प्रक्रिया को समझने के लिए, आप विभिन्न रंगों के उदाहरणों के साथ काम करेंगे। यह न केवल आपके कोडिंग कौशल को बढ़ाएगा बल्कि आपको अंग्रेजी बोलने की प्रगति में भी मदद करेगा। विशेष रूप से, आप 'toast notifications' जैसे उदाहरणों का उपयोग करते हुए सामंजस्यपूर्ण रंग संयोजन विकसित करना सीखेंगे।

मुख्य शब्दावली एवं वाक्यांश

toast color: रंग का एक विशेष प्रकार का उदाहरण।
HSL: Hue, Saturation, Lightness का संक्षेप, जो रंग के घटकों को दर्शाता है।
relatives colors: विभिन्न रंगों के बीच संबंधितता।
base color: रंगों का मूल आधार।
background color: पृष्ठभूमि का रंग।
lightness value: रंग की हल्कापन या गहरापन का मान।
border color: किसी तत्व के चारों ओर की सीमाओं का रंग।

अभ्यास टिप्स

इस पाठ के दौरान, आपकी अंग्रेजी उच्चारण कौशल को बेहतर बनाने के लिए हमने shadow speak या shadow speech तकनीक को बेहतर बनाने पर ध्यान केंद्रित किया है। जब आप इस वीडियो को देखते हैं, तो सुनिश्चित करें कि आप बोलने वाले की आवाज़ की गति और लहजे का ध्यान रखें। आप shadowspeak की मदद से उच्चारण को ठीक करने का प्रयास कर सकते हैं। धीरे-धीरे और स्पष्टता के साथ बोलने का प्रयास करें। बार-बार इस वीडियो का अनुसरण करें और चुनौतीपूर्ण वाक्यांशों की पुनरावृत्ति करके अपनी उच्चारण में सुधार लाने का प्रयास करें। यूट्यूब से अंग्रेजी सीखें और इसे अपने दैनिक अभ्यास में शामिल करें।

इस वीडियो का व्याकरण

वक्ता जिन संरचनाओं का सबसे अधिक प्रयोग करता है, वीडियो के असली शब्दों के साथ:

संरचना	वीडियो में
Passive voice be + past participle — ज़ोर इस पर कि क्या होता है, न कि कौन करता है	is let · is set · be based
Present perfect have/has + past participle — बीता हुआ काम जिसका असर अभी भी है	has changed · haven't declared · I've set
Relative clauses who / which + उपवाक्य — व्यक्ति या वस्तु के बारे में अतिरिक्त जानकारी	colors, which is · people who are · this which is

शैडोइंग तकनीक क्या है?

शैडोइंग (Shadowing) एक विज्ञान-समर्थित भाषा सीखने की तकनीक है जो मूल रूप से पेशेवर दुभाषिया प्रशिक्षण के लिए विकसित की गई थी। विधि सरल लेकिन शक्तिशाली है: आप मूल अंग्रेज़ी ऑडियो सुनते हैं और तुरंत इसे ज़ोर से दोहराते हैं — जैसे वक्ता की छाया 1-2 सेकंड की देरी से। शोध से पता चलता है कि यह उच्चारण सटीकता, स्वर, लय, जुड़ी हुई ध्वनियाँ, सुनने की समझ और बोलने की प्रवाहशीलता में काफ़ी सुधार करता है।

शैडोइंग तकनीक: पूरी चरण-दर-चरण गाइड पढ़ें →

शैडोइंग अभ्यास: Build smarter color systems with relative colors - वीडियो के साथ अंग्रेजी बोलना सीखें

अभ्यास मोड चुनें

ऐप डाउनलोड करें

उसी चैनल से

Handy CSS layout patterns, and fun ways to elevate them

Use these CSS features instead of JavaScript

Transition to and from display: none

Your AI broke the layout. Now what?

This library changes how JS and CSS work together

No more magic numbers for your breakpoints

More CSS quick tips

Native popovers with smooth animations (no JS required)

3 modern CSS properties to add to your reset

5 CSS fouls that I see way too often

Has AI killed Tailwind?

Why I use single-color gradients in my CSS

अनुशंसित वीडियो

How to Make Anything - Learn to Think Like an Engineer

JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue

Design Systems vs. Style Guides

Color Palettes Worth Another Look

Video

Blender Tutorial: Photorealistic Puddles

CAP Theorem in System Design Interviews

Claude Code: The Advanced Guide (99% of Devs Skip These Features)

The Most Confused Concepts in Engineering

Basic Opt Flw regimes

इस पाठ के बारे में

मुख्य शब्दावली एवं वाक्यांश

अभ्यास टिप्स

इस वीडियो का व्याकरण

शैडोइंग तकनीक क्या है?