跟读练习: Build smarter color systems with relative colors - 通过视频学习英语口语
正在创建课程...
1
Hi there my friend and friend.
2
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
3
that let us generate all of these variations based on a single value.
4
Let's dive in and see how this works.
5
I got a demo set up for us right here.
6
And we can take a look.
7
So you can see I have some variables set up and I have some, I'm using toast notifications for this
8
because I think it's a nice example of something where we can have multiple variations of this as well
9
and we can look at how we're saving a lot of time.
10
So the very first thing I'm going to do is let's come in
11
and sort of style the generic one and then we'll sort of fancy things up from there.
12
And really quickly there, I just made the font size bigger because I think it'd look better for our demo.
13
So here, let's set things up.
14
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.
15
And I'm going to use the base color for now.
16
So we're going to say it's our var of base color.
17
And this is going to help us a little bit out, just base like that.
18
This will help us out a little bit later on.
19
This could be a step that we do later.
20
It could even be a step that you skip
21
if this is something that you're only doing one thing of
22
and you don't need a bunch of variations like we're going to have here.
23
Now, next step, I'm going to do something
24
that looks a little bit weird because I'm going to say we're going to color.
25
I'm going to do an HSL from, and this is relative colors.
26
And I'll explain the syntax of this as we write it out.
27
I'm going to say var toast color.
28
And then I'm going to HSL.
29
and nothing really should change actually and I need a semicolon at the end
30
and as you can see nothing really much has changed
31
but what we're saying is the color is an HSL value
32
that is coming from the toast color and this H
33
and S and L are just placeholders for the hue saturation
34
and lightness and we'll see why that's important in a minute just
35
so we can see quickly that this is working
36
if I change this over to my info we're going to see
37
that the color of the text and the border has changed on all of them.
38
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.
39
But for now I'm going to keep this one as my base
40
and we'll come in with the modifications for the other ones as we go through.
41
Now where this gets a little bit more useful is let's come in with a background color.
42
So background color, I'm going to put this on a different line just
43
so we can keep it all without any horizontal scrolling.
44
I'm going to say HSL from, same thing, my var of toast, you gotta spell toast right,
45
toast color, and space, H space S space L, except this time if I do that I can't read my text.
46
But I want it to always be based on the color of the text.
47
I can just come here and actually change the lightness value.
48
So I can actually say this is at like 15%, except that's going to be really dark.
49
I meant to say something like 85% and go the other way around.
50
And we can have the exact same color, but 85%.
51
And maybe even we can come up to a 90 here, something like that.
52
But we're getting that a little bit of that same color coming in in the background now.
53
And this is cool, right?
54
We're just replacing whatever the lightness was with it being 90% now in our HSL.
55
And just for fun, we can also take this to another level
56
and we can add like a box shadow here as well.
57
So I'm going to actually move, we'll do the box shadow here, box shadow.
58
And again, I'll do this on two lines just so we can see the entire declaration.
59
And let's come in with zero offset, maybe 12 pixels, 12 pixels.
60
I'm going to leave it big for now.
61
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.
62
So HSL from var toast color and my H, my S, my L, except in this case, it's really dark and I go,
63
oh man, I need a shadow, but I want to lower the opacity of it.
64
We can do that with relative colors, which is amazing.
65
So I just do a forward slash here because this is the way the space separated syntax works in CSS.
66
If you'd like to learn more about that, I talked about it last week.
67
I'll put a link in the description
68
and there might be a card popping up you can check
69
that one out and I'll remind you at the end
70
but I can just come here and say something like 0.25
71
or whatever I want for the lower opacity of that same color
72
and you can see that's working I want to make this a bit more subtle
73
so I'm also going to give it a spread of negative
74
eight just to pull it in a little bit just give
75
us a little subtle shadow underneath each one of those cards
76
or toasts or whatever we want to call them awesome
77
so that's all working now this is where the other cool
78
thing comes in here is I have my info my warning and my error here.
79
And I'm just doing these with data attributes because this would be the easiest way to do it with JavaScript.
80
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.
81
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.
82
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.
83
So let's come down here
84
and we'll start with the first one where we can say the data toast is equal to info.
85
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?
86
Yeah, I did.
87
Look at that.
88
There we go.
89
So my info comes in.
90
Now there's a bit of a problem here.
91
We're gonna solve that in a second, but let's come in with all three of them.
92
So that's my info.
93
And the last one will be, so info, I forget what I called them, warning and error.
94
So these two, that's a warning.
95
And then I can come on this one and say those are error.
96
And all the colors are coming in.
97
It's looking pretty cool that we can do all of this with a single color and everything is adapting automatically.
98
There's
99
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.
为什么要通过这个视频练习口语？
在学习英语的过程中，雅思口语练习的关键在于多样化的练习方式。通过观看视频，我们不仅可以接触到真实的对话情境，还能学习到生动有趣的表达方式。这段视频通过介绍CSS相对颜色的概念，帮助我们理解如何简化颜色系统的开发，这种技术性的讨论为口语练习提供了丰富的上下文。把技术性内容融入到口语练习中，使学习者能够有效地提高在特定领域的交流能力。看YouTube学英语是一种新颖而有效的学习方式，特别适合希望通过实际对话和讨论来增强自信心的学生。
语法与表达的具体分析
在视频中，演讲者使用了一些关键的表达结构，值得学习者在练习中注意：
- 使用变量 (variables)：演讲者提到维护不同状态的变量，例如 lighter、darker 和 transparent。这个结构不仅在编程中常用，对于日常口语交流也同样适用，例如在描述不同的选项或变化时。
- 说明与解释 (explanation and elaboration)：视频中反复使用"我会说"或"我将演示"的句型，适合用于引入主题，清晰地讲述自己的观点或观点。这个结构对于练习英语口语练习非常重要，因为它有助于清晰地传达信息。
- 比较与对比 (comparison and contrast)：演讲者通过将不同的颜色设定进行对比，成功引导听众了解两者之间的区别。这一技能在日常交流中能够帮助表述更为复杂的想法。
常见的发音陷阱
在观看视频时，学习者应该特别注意一些可能导致发音错误的词汇和表达方式。例如：
- 在提到“color”时，可能会因母语的影响而出现发音不准确的现象。通过反复模仿（如使用 shadow speech 方法），能够帮助纠正此类问题。
- 另外，“HSL”缩写的发音，许多学习者可能不熟悉。提高对于行业用语的发音把握，可以帮助在相关领域的交流中变得显得更加专业。
在进行口语练习时，使用shadowspeak的方式完全听懂并说出这些词汇，不仅能提升口语流畅度，还能增强对难点词汇的掌握。这对学习者的雅思备考来说，尤其重要。
什么是跟读法？
跟读法 (Shadowing) 是一种有科学依据的语言学习技巧，最初开发用于专业口译员的培训，并由多语言者Alexander Arguelles博士普及。这个方法简单而强大：您在听英语母语原声的同时立即大声重复——就像是一个延迟1-2秒紧跟说话者的影子。与被动听力或语法练习不同，跟读法强迫您的大脑和口腔肌肉同时处理并模仿真实的讲话模式。研究表明它能显着提高发音准确性，语调，节奏，连读，听力理解和口语流利度——使其成为雅思口语备考和真实英语交流最有效的方法之一。