تدريب Shadowing: Build smarter color systems with relative colors - تعلم التحدث بالإنجليزية عبر الفيديو
اختر وضع التدريب
كل وضع يفتح غرفة تدريب بملء الشاشة.
168 جمل
إذا كانت الجمل قصيرة أو طويلة جدًا، انقر على Edit لتعديلها.
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.
تنزيل التطبيق
كل ما تحتاجه للتحدث بطلاقة
تقييم النطق بالذكاء الاصطناعيتقييم كل جملة
تدريب IPAأتقن كل صوت
المفرداتابنِ رصيدك من الكلمات
لعبة المفرداتتعلّم أثناء اللعب
نفس القناة
C14
Handy CSS layout patterns, and fun ways to elevate them
Daily ConversationUniversity StudentsWorking Adults
C12
Use these CSS features instead of JavaScript
Daily ConversationUniversity StudentsWorking Adults
C14
Transition to and from display: none
Daily ConversationWorking Adults
C15
Your AI broke the layout. Now what?
Daily ConversationWorking Adults
C14
This library changes how JS and CSS work together
Daily ConversationWorking Adults
C17
No more magic numbers for your breakpoints
Daily ConversationWorking Adults
C14
More CSS quick tips
Daily ConversationWorking Adults
C12
Native popovers with smooth animations (no JS required)
Daily ConversationWorking Adults
C13
3 modern CSS properties to add to your reset
Business EnglishUniversity StudentsWorking Adults
C13
5 CSS fouls that I see way too often
Business EnglishUniversity StudentsWorking Adults
B24
Has AI killed Tailwind?
Business EnglishUniversity StudentsWorking Adults
C17
Why I use single-color gradients in my CSS
Business EnglishUniversity StudentsWorking Adults
FOR YOU
فيديو موصى به
C11
124 جمل
How to Make Anything - Learn to Think Like an Engineer
Business EnglishUniversity StudentsWorking Adults
C12
195 جمل
JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue
Business EnglishUniversity StudentsWorking Adults
C121
20 جمل
Design Systems vs. Style Guides
Business EnglishUniversity StudentsWorking Adults
B2435 جمل
Color Palettes Worth Another Look
Business EnglishDaily ConversationUniversity Students
C13
152 جمل
Video
IELTS PrepBusiness EnglishUniversity Students
C14
350 جمل
Blender Tutorial: Photorealistic Puddles
Business EnglishUniversity StudentsWorking Adults
C13
200 جمل
CAP Theorem in System Design Interviews
Business EnglishInterview EnglishUniversity Students
C11
309 جمل
Claude Code: The Advanced Guide (99% of Devs Skip These Features)
Business EnglishUniversity StudentsWorking Adults
C13
15 جمل
American English INTONATION - How to Understand Native English Speakers Better
Business EnglishUniversity StudentsWorking Adults
C11
80 جمل
The Most Confused Concepts in Engineering
Business EnglishUniversity StudentsWorking Adults
حول هذه الدرسة
في هذا الدرس، ستمارس كيفية استخدام الألوان النسبية في CSS لبناء أنظمة ألوان أذكى. سنتناول كيفية تحويل الألوان الأساسية إلى درجات مختلفة باستخدام القيم النسبية مثل HSL (Hue, Saturation, Lightness). ستحصل على فهم أعمق للطريقة التي تتيح لك تخصيص الألوان بسهولة، مما يوفر لك الوقت والجهد في التصميم.
المفردات والعبارات الرئيسية
- اللون الأساسي
- HSL - تدرجات اللون، التشبع، والسطوع
- لون التحذير
- الإشعارات المنبثقة (toast notifications)
- تصميم الحدود واللون الافتراضي
- تغير القيم النسبية
- اللون الخلفي
- التخصيص السهل للألوان
نصائح الممارسة
لتحقيق أفضل النتائج في ممارسة طريقة التظليل في الإنجليزية، يتعين عليك تقليد نبرة وسرعة المتحدث في الفيديو. يمكنك البدء بتقليد الجمل القصيرة قبل الانتقال إلى الجمل الأطول. ابدأ بالاستماع بعناية ثم حاول تقليد أسلوب المتحدث، مع التركيز على تمييز النغمة والاستخدام الصحيح للمفردات التقنية. قم بتكرار الجمل عدة مرات حتى تصبح متمكنًا ويصبح أسلوبك في shadow speak أكثر سلاسة.
أثناء الممارسة، استخدم صوتك لتجسيد شخصية المتحدث، وهذا سيساعدك على تطوير مهاراتك في التفاعل اللغوي. تذكر أنه من المهم جدًا تحسين سرعة النطق، لذا قم بتجزئة العبارات الأطول إلى أجزاء أصغر، وكرر كل جزء حتى تصل إلى الطلاقة المطلوبة. هذه الطريقة فعالة جدًا في تحسين مهاراتك في shadowspeaks.
القواعد في هذا الفيديو
أكثر التراكيب التي يستخدمها المتحدث، مع العبارات نفسها من الفيديو:
| التركيب | في الفيديو |
|---|---|
| المبني للمجهول be + اسم المفعول — التركيز على ما يحدث لا على من يفعله | is let · is set · be based |
| المضارع التام have/has + اسم المفعول — حدث ماضٍ ما زال له أثر الآن | has changed · haven't declared · I've set |
| جمل الوصل who / which + جملة — معلومة إضافية عن شخص أو شيء | colors, which is · people who are · this which is |
ما هي تقنية التظليل الصوتي؟
التظليل الصوتي (Shadowing) تقنية تعلم لغة مدعومة علمياً، طُورت أصلاً لتدريب المترجمين الفوريين المحترفين. الطريقة بسيطة لكنها قوية: تستمع لصوت إنجليزي أصلي وتكرره فوراً بصوت عالٍ — كظل يتبع المتحدث بتأخير 1-2 ثانية. تُظهر الأبحاث تحسناً كبيراً في دقة النطق والتنغيم والإيقاع وربط الأصوات والاستماع والطلاقة.