Shadowing Practice: Why I use single-color gradients in my CSS - Learn English Speaking with Video
Kies een oefenmodus
Elke modus opent een volledig scherm oefenruimte.
162 zinnen
Als zinnen te kort of te lang zijn, klik op Bewerken om ze aan te passen.
1
Hello my friend and friend.
2
Something I do quite often is create gradients with a single color stop in them.
3
Why would I do that?
4
Gradients are all about interpolating from one color to another.
5
We want something that looks pretty.
6
So why would I make a gradient with a single color?
7
That's a really good question.
8
So today we're going to answer that by diving into this demo here where I have, we're going to look at a couple of different things and use cases,
9
but here's one of them where I have text that's hard to read because my background image is light and dark, and this happens all the time.
10
And so instead of using a pseudo element or something else to try and create an overlay, I can just do it with a second gradient or a second image and images happen to be gradients.
11
So I can do a linear gradient here and it could be any gradient, conic, radial, whatever you want.
12
Conic would actually save you a keystroke here.
13
And I just have to comma separate them.
14
So I do my linear gradient, comma, and then I have my URL and the linear gradient needs to be first.
15
So this is on top of this one.
16
That's the way they will layer.
17
and I could just come here and actually write black
18
and hit save and now I have a solid black color on top
19
which is completely useless but we could maybe use a black with a lower opacity so we'll use an HSL of 0,
20
0%, 0% and I'll put like a 0.5 for the alpha value
21
and then as we can see
22
if we go with a 0 here it's quite hard to read this text
23
and if I come in with a 0.5 now I can actually read all of my text
24
and you can adjust this alpha however fits for the image
25
and the situation you're in
26
and I'm using black maybe you'd want to come in with
27
a different color something that's a bit more on brand with the greens here
28
and use a blend mode or something like
29
that it really depends on the situation that you're in but
30
that would open up
31
that possibility as well now there is one small thing with
32
this is a single color gradient like this is supported in all browsers, but Chrome was actually the last one to add it and support for it isn't perfect.
33
It's relatively new.
34
So if you do want to ensure that you have farther back support, you can just come here and put a zero zero,
35
which looks really weird, but this will help with just having better browser support
36
because what these are the two color stops that we're putting for this gradient.
37
And the reason this works with two color stops is let's just come here and do a red comma.
38
We're going to keep that and then we'll put another red after this, just so we can see what this is doing.
39
And instead of a zero zero here, I'm gonna say this is like a 20 50 and
40
so now we have the red into this uh semi-transparent black color
41
that goes from 20 to 50 and then it transitions back to red
42
so the two color stops here are what are you know making this work
43
and if i do a zero zero it makes it valid
44
and then i can get rid of both of those
45
so again uh unnecessary maybe you're watching this in the future
46
you might not need to bother with this right now i would include this just to make sure
47
that my browser support is is decent
48
and this is probably the most common use case i use
49
it for except today our more modern stuff we're doing where things like gradient borders are all the rage
50
and so let's take a look at my button
51
that i have right here where there's my button
52
and i have my hover on here we're going to add a little animation to it afterwards
53
but let's start with just the button where i'm actually going to change my border to start with
54
and the border i'm going to make it i'm going to exaggerate
55
because it's a demo so we're going to say five pixels solid
56
but the trick here is to make it transparent
57
and this might seem a little bit strange
58
but we're going to start there
59
and then for my background here I am actually going to
60
stick with the background shorthand almost every time I use a background property I actually use the longhand
61
but using the shorthand here does help out
62
and it would never get me in trouble for the type of thing I'm doing here
63
so instead of white I'm going to do a linear gradient of white
64
which you know that gives us the exact same thing as we saw
65
so if it's save it looks exactly the same
66
though it did get a bit bigger just because I have the border that's on there now
67
and then I'm going to do a comma
68
and we're going to come in with another gradient in this
69
case I'm going to come in with a conic gradient
70
and let's just do something like a blue to purple
71
and then back to blue and we don't see it well that's kind of stupid right
72
if I turn this off let's
73
you know remove this line uh now we can see my conic gradient is there
74
and you'll notice something a little bit weird about it in
75
that the top and the bottom area have like a weird repeat going on
76
and that's because gradients will fill up the content box
77
or the padding box i should say and then they repeat underneath the border
78
because normally your border is visible you don't you don't have a transparent border
79
so it's giving it it has this it's like a weird thing with gradients
80
but it makes sense most of the time uh just
81
so you actually see your entire gradient if you happen to to have a border.
82
In this case, though, I want my conic gradient to fill in that space and I don't want this weird thing happening.
83
So I can actually come here and say this should be in my border box
84
and this is why I'm using the shorthand of background because this is actually doing two different things.
85
This is going to set both the background clip
86
and the background origin to border box and if we come
87
and take a look when I hit save on here now you can see
88
that conic gradient is filling up all the way into that space which is exactly what I want.
89
Then if I turn this white back on
90
and hit save I'm going to come on here and I'm going to say this should only be inside my padding box.
91
Then it pulls that back in and we only have the gradient on the outside
92
and the single color here and again I am doing it without the zero zero here.
93
You can add that for better browser support but then we get that going on and we have a gradient border
94
And I always get questions
95
when I do this of why am I doing it with a gradient like this instead of just using a border image.
96
And the reason for that is if you want to have a border radius, which I think it looks kind of cool with the border radius on there.
97
If you're using a border image, then you can't get that to work.
98
So, you know, now I can actually have my border radius and a nice little bonus tip here, I guess.
99
If you do 100 VW, you'll always get a pill shape.
100
So let's do that here.
101
I did purple.
102
Let's do this as red just so it stands out a little bit more.
103
and as a little bonus this has nothing to do with the color stops
104
but we can get a nice little animation
105
and I did a short on this where somebody suggested a way to improve the animation
106
so we're going to see that on a much better way we can animate it
107
so you can see here I do have an animation
108
that doesn't exist yet so I'm going to do
109
that at keyframes of rotate but
110
that does question like what are we rotating what are we moving
111
and for me it would be the easiest thing do is
112
the angle we have on here now normally on backgrounds we can't do any sorts of transitions
113
or animations but now we can do an at property
114
which now is in all browsers
115
so i'm going to do an app property of angle you can call it whatever we need
116
and so the syntax of this and
117
if you haven't seen this before this is called a registered custom property
118
so this will be an angle
119
and with the registered custom properties it's it's sort of like we're like typescript we're saying what this custom property is,
120
which enables us to be able to animate the values of custom properties.
121
So the syntax is angle the initial value i'm going to use turns
122
so i'm going to say uh it could be degraded
123
or whatever degrees is fine uh we're going to use a turn after though we're going to say zero degrees
124
and then we're going to come here and say
125
that the inherits inherits i'm going to put true um it's up to you it doesn't really matter
126
but i'm going to say it's true
127
and then we're going to come actually before we come down
128
i just saw i have a small mistake here where my angle needs to have it's custom property
129
so we have to start it with the double hyphen
130
and then I'll come down here and we're going to say this is my from
131
because conic gradients need a from of our angle
132
and now everything looks the same
133
but say I change this to 180 degrees the red will go on top instead
134
so it's using the value here as what we have here
135
but then on my rotate here what we can do now is we can say this is two
136
and we want our angle to go to one turn.
137
And so this is where we're actually changing the value of the custom property by first registering that custom property.
138
And now when I go on top of it, you can see that it's rotating around.
139
Now there is a small problem is when I come off, it just jumps.
140
And this is where the commenter helped me out in giving me a better idea.
141
And full credit to you.
142
I don't have your name on hand, but I'll put a screenshot got up, so I just want to say thank you very much for the suggestion.
143
Instead of doing that, what we're going to do is actually have this animation always on right here.
144
So now it's always rotating, and that's kind of annoying that it's always rotating.
145
We don't want that to happen.
146
Well, hopefully not, especially at this speed.
147
If you're going to do something like this, make it a lot slower than what we're doing here, because it's kind of annoying that it moves that fast.
148
But ideally, it would only be when we hover.
149
So then what we can actually say is the animation play state is paused.
150
Is it paused or paused?
151
It is paused.
152
Okay.
153
And then when we hover, the animation play state is running and it looks the same.
154
But now if we go on top, it moves.
155
But if I come off, it pauses.
156
But the nice thing with that is it means it doesn't jump.
157
It stops wherever it is when we come off.
158
So a little bonus tip made the video a bit longer, but I hope you like that and appreciated the little bonus tip right there.
159
And whether you did or not, I really do hope that you enjoyed this video, though I would really appreciate it if you hit the sub button if you haven't yet subscribed.
160
I have it with that.
161
I do want to thank my enabler of awesome Johnny, as well as all my other patrons and channel members for their monthly support.
162
And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.
App downloaden
Alles wat je nodig hebt om vloeiend te spreken
AI UitspraakScoor elke zin
IPA OefeningBeheers elk geluid
WoordenschatBouw je woordenschat op
WoordenspelLeren terwijl je speelt
📺 Zelfde Kanaal
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
C14
Build smarter color systems with relative colors
Business EnglishUniversity StudentsWorking Adults
✨ Aanbevolen Video
C11
68 zinnen
System Design: Why is Kafka fast?
Business EnglishUniversity StudentsWorking Adults
C15
143 zinnen
This is how you master cinematography
Business EnglishUniversity StudentsWorking Adults
C12
78 zinnen
Why 95% of Android Developers Get Use Cases Wrong
Business EnglishUniversity StudentsWorking Adults
C13
227 zinnen
Use AI Like a Senior Designer (3 Workflows)
Business EnglishUniversity StudentsWorking Adults
C14
350 zinnen
Blender Tutorial: Photorealistic Puddles
Business EnglishUniversity StudentsWorking Adults
C11
80 zinnen
The Most Confused Concepts in Engineering
Business EnglishUniversity StudentsWorking Adults
C12
195 zinnen
JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue
Business EnglishUniversity StudentsWorking Adults
C12
68 zinnen
Oh, wait, actually the best Wordle opener is not “crane”…
American AccentBusiness EnglishUniversity StudentsWorking Adults
B25
220 zinnen
Improve Your Spoken English in Just 15 Minutes
British AccentIELTS PrepBusiness EnglishDaily Conversation
B2435 zinnen
Color Palettes Worth Another Look
Business EnglishDaily ConversationUniversity Students
Woordenschat en spreektips bij deze les
Deze spreekles op niveau C1 is gebaseerd op de video “Why I use single-color gradients in my CSS”. Deze woorden komen het vaakst terug: gradient, border, color, zero, animation. Deze video bevat 162 zinnen en 2110 woorden om na te spreken. Het gesproken deel duurt 9:17. De spreker praat snel, ongeveer 227 woorden per minuut, dus reken op verbonden en ingeslikte klanken. 84% van de woorden hoort bij de 3.000 meest gebruikte Engelse woorden; de rest kun je beter vooraf bekijken.
Belangrijke woorden in deze video
De 15 moeilijkste woorden uit de video, met uitspraak en betekenis:
| Woord | Uitspraak | Betekenis |
|---|---|---|
| gradient zelfstandig naamwoord | /ˈɡɹeɪdiənt/ | richtingscoëfficiënt |
| rotate werkwoord | /ˈɹoʊ.teɪt/ | roteren, ronddraaien |
| pause zelfstandig naamwoord | /pɔːz/ | pauze |
| comma zelfstandig naamwoord | /ˈkɒmə/ | komma |
| hover werkwoord | /ˈhɒvə/ | omzweven |
| shorthand zelfstandig naamwoord | /ˈʃɔɹthænd/ | beknotte vorm |
| radius zelfstandig naamwoord | /ˈɹeɪ.di.əs/ | spaakbeen, radius |
| transparent bijvoeglijk naamwoord | /tɹænsˈpæɹənt/ | doorzichtig, transparant |
| animate bijvoeglijk naamwoord | /ˈæn.ə.mət/ | bezield |
| annoy werkwoord | /əˈnoɪ̯/ | ergeren, vervelen |
| inherit werkwoord | /ɪnˈhɛɹɪt/ | erven |
| syntax zelfstandig naamwoord | /ˈsɪn.tæks/ | syntaxis |
| demo zelfstandig naamwoord | /ˈdɛm.oʊ/ | demo, demonstratie |
| degrade werkwoord | /dɪˈɡɹeɪd/ | degraderen, aftakelen |
| exaggerate werkwoord | /ɛɡˈzæd͡ʒ.ə.ɹeɪt/ | overdrijven |
Phrasal verbs die je zult horen
| Woord | Betekenis |
|---|---|
| fill up werkwoord | opvullen, vollopen |
| get up werkwoord | opstaan |
Uitspraak om op te letten
De spreker gebruikt 67 samentrekkingen en verkorte vormen, zoals we're, I'm, don't. Spreek ze kort uit, zoals je ze hoort.
- De klanken “sh” en “zh”: shorthand /ˈʃɔɹthænd/, screenshot /ˈskriːn.ʃɑt/
- Lange woorden — let op de klemtoon: exaggerate /ɛɡˈzæd͡ʒ.ə.ɹeɪt/, interpolate /ɪnˈtɜː.pəˌleɪt/, opacity /oʊˈpæsɪti/, ideally /aɪˈdi.ə.li/
Klanken die Nederlandstaligen lastig vinden:
- Stemhebbende eindmedeklinker — /b/, /d/, /g/, /z/, /v/ niet verscherpen: pause /pɔːz/, shorthand /ˈʃɔɹthænd/, pad /pæd/, degrade /dɪˈɡɹeɪd/, longhand /lɔŋˌhænd/
- /æ/ — opener dan de Nederlandse “e”: shorthand /ˈʃɔɹthænd/, transparent /tɹænsˈpæɹənt/, animate /ˈæn.ə.mət/, syntax /ˈsɪn.tæks/, pad /pæd/
- /g/ — een harde plofklank, geen Nederlandse “g”: gradient /ˈɡɹeɪdiənt/, degrade /dɪˈɡɹeɪd/, exaggerate /ɛɡˈzæd͡ʒ.ə.ɹeɪt/
Zo oefen je met deze video
- Luister de hele video één keer zonder te spreken en noteer de woorden die je niet kent.
- Begin op 0,75× snelheid, spreek zin voor zin na en ga terug naar normale snelheid zodra het makkelijk gaat.
- Neem jezelf op en vergelijk met het origineel; let daarbij op woorden als gradient, rotate, pause.
Wat is de Shadowing-techniek?
Shadowing is een wetenschappelijk onderbouwde taalleermethode die oorspronkelijk is ontwikkeld voor professionele tolkentraining en gepopulariseerd door polyglot Dr. Alexander Arguelles. De methode is eenvoudig maar krachtig: je luistert naar native Engelse audio en herhaalt het onmiddellijk hardop — als een schaduw die de spreker volgt met slechts 1–2 seconden vertraging. In tegenstelling tot passief luisteren of grammaticadrills, dwingt shadowing je hersenen en mondspieren om echte spraakpatronen tegelijkertijd te verwerken en te reproduceren. Onderzoek toont aan dat het de uitspraaknauwkeurigheid, intonatie, ritme, verbonden spraak, luisterbegrip en spreekvaardigheid aanzienlijk verbetert — waardoor het een van de meest effectieve methoden is voor IELTS Speaking-voorbereiding en echte Engelse communicatie.