Pratique du Shadowing: Why I use single-color gradients in my CSS - Apprendre l'anglais à l'oral avec la vidéo

Choisissez un mode d'entraînement

Chaque mode ouvre une salle d'entraînement en plein écran.

162 phrases

Si les phrases sont trop courtes ou trop longues, cliquez sur Edit pour les ajuster.

Hello my friend and friend.

Something I do quite often is create gradients with a single color stop in them.

Why would I do that?

Gradients are all about interpolating from one color to another.

We want something that looks pretty.

So why would I make a gradient with a single color?

That's a really good question.

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,

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.

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.

So I can do a linear gradient here and it could be any gradient, conic, radial, whatever you want.

Conic would actually save you a keystroke here.

And I just have to comma separate them.

So I do my linear gradient, comma, and then I have my URL and the linear gradient needs to be first.

So this is on top of this one.

That's the way they will layer.

and I could just come here and actually write black

and hit save and now I have a solid black color on top

which is completely useless but we could maybe use a black with a lower opacity so we'll use an HSL of 0,

0%, 0% and I'll put like a 0.5 for the alpha value

and then as we can see

if we go with a 0 here it's quite hard to read this text

and if I come in with a 0.5 now I can actually read all of my text

and you can adjust this alpha however fits for the image

and the situation you're in

and I'm using black maybe you'd want to come in with

a different color something that's a bit more on brand with the greens here

and use a blend mode or something like

that it really depends on the situation that you're in but

that would open up

that possibility as well now there is one small thing with

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.

It's relatively new.

So if you do want to ensure that you have farther back support, you can just come here and put a zero zero,

which looks really weird, but this will help with just having better browser support

because what these are the two color stops that we're putting for this gradient.

And the reason this works with two color stops is let's just come here and do a red comma.

We're going to keep that and then we'll put another red after this, just so we can see what this is doing.

And instead of a zero zero here, I'm gonna say this is like a 20 50 and

so now we have the red into this uh semi-transparent black color

that goes from 20 to 50 and then it transitions back to red

so the two color stops here are what are you know making this work

and if i do a zero zero it makes it valid

and then i can get rid of both of those

so again uh unnecessary maybe you're watching this in the future

you might not need to bother with this right now i would include this just to make sure

that my browser support is is decent

and this is probably the most common use case i use

it for except today our more modern stuff we're doing where things like gradient borders are all the rage

and so let's take a look at my button

that i have right here where there's my button

and i have my hover on here we're going to add a little animation to it afterwards

but let's start with just the button where i'm actually going to change my border to start with

and the border i'm going to make it i'm going to exaggerate

because it's a demo so we're going to say five pixels solid

but the trick here is to make it transparent

and this might seem a little bit strange

but we're going to start there

and then for my background here I am actually going to

stick with the background shorthand almost every time I use a background property I actually use the longhand

but using the shorthand here does help out

and it would never get me in trouble for the type of thing I'm doing here

so instead of white I'm going to do a linear gradient of white

which you know that gives us the exact same thing as we saw

so if it's save it looks exactly the same

though it did get a bit bigger just because I have the border that's on there now

and then I'm going to do a comma

and we're going to come in with another gradient in this

case I'm going to come in with a conic gradient

and let's just do something like a blue to purple

and then back to blue and we don't see it well that's kind of stupid right

if I turn this off let's

you know remove this line uh now we can see my conic gradient is there

and you'll notice something a little bit weird about it in

that the top and the bottom area have like a weird repeat going on

and that's because gradients will fill up the content box

or the padding box i should say and then they repeat underneath the border

because normally your border is visible you don't you don't have a transparent border

so it's giving it it has this it's like a weird thing with gradients

but it makes sense most of the time uh just

so you actually see your entire gradient if you happen to to have a border.

In this case, though, I want my conic gradient to fill in that space and I don't want this weird thing happening.

So I can actually come here and say this should be in my border box

and this is why I'm using the shorthand of background because this is actually doing two different things.

This is going to set both the background clip

and the background origin to border box and if we come

and take a look when I hit save on here now you can see

that conic gradient is filling up all the way into that space which is exactly what I want.

Then if I turn this white back on

and hit save I'm going to come on here and I'm going to say this should only be inside my padding box.

Then it pulls that back in and we only have the gradient on the outside

and the single color here and again I am doing it without the zero zero here.

You can add that for better browser support but then we get that going on and we have a gradient border

And I always get questions

when I do this of why am I doing it with a gradient like this instead of just using a border image.

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.

If you're using a border image, then you can't get that to work.

So, you know, now I can actually have my border radius and a nice little bonus tip here, I guess.

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.

Télécharger l'application

Tout pour parler couramment

Prononciation IAChaque phrase notée

Phonétique (IPA)Maîtrisez chaque son

VocabulaireEnrichissez votre lexique

Jeu de vocabulaireApprenez en jouant

Scanner le QR

Download on theApp Store Get it onGoogle Play

Même chaîne

FOR YOU

Vidéo recommandée

68 phrases

System Design: Why is Kafka fast?

Business EnglishUniversity StudentsWorking Adults

223 phrases

How to Get Smooth, Bright Vocals

Business EnglishUniversity StudentsWorking Adults

78 phrases

Why 95% of Android Developers Get Use Cases Wrong

Business EnglishUniversity StudentsWorking Adults

350 phrases

Blender Tutorial: Photorealistic Puddles

Business EnglishUniversity StudentsWorking Adults

227 phrases

Use AI Like a Senior Designer (3 Workflows)

Business EnglishUniversity StudentsWorking Adults

195 phrases

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

Business EnglishUniversity StudentsWorking Adults

68 phrases

Oh, wait, actually the best Wordle opener is not “crane”…

Business EnglishUniversity StudentsWorking Adults

143 phrases

This is how you master cinematography

Business EnglishUniversity StudentsWorking Adults

80 phrases

The Most Confused Concepts in Engineering

Business EnglishUniversity StudentsWorking Adults

125 phrases

The Dropdown Slicer We Waited 10 Years For (Power BI)

Daily ConversationUniversity StudentsWorking Adults

Vocabulaire et conseils d’expression pour cette leçon

Cette leçon d’expression orale de niveau C1 s’appuie sur la vidéo « Why I use single-color gradients in my CSS ». Les mots qui reviennent le plus souvent : gradient, border, color, zero, animation. Cette vidéo contient 162 phrases et 2110 mots à répéter en shadowing. La partie parlée dure 9:17. Le locuteur parle vite, environ 227 mots par minute : attendez-vous à des liaisons et à des sons réduits. 84 % des mots font partie des 3 000 mots les plus courants en anglais ; le reste mérite d’être vu avant de commencer.

Vocabulaire clé de cette vidéo

Les 15 mots les plus avancés de la vidéo, avec leur prononciation et leur sens :

Mot	Prononciation	Sens
gradient nom	/ˈɡɹeɪdiənt/	pente
rotate verbe	/ˈɹoʊ.teɪt/	tourner, rotationner
pause nom	/pɔːz/	pause
comma nom	/ˈkɒmə/	virgule
shorthand nom	/ˈʃɔɹthænd/	sténographie
radius nom	/ˈɹeɪ.di.əs/	radius
transparent adjectif	/tɹænsˈpæɹənt/	transparent
animate adjectif	/ˈæn.ə.mət/	animé
annoy verbe	/əˈnoɪ̯/	gêner, ennuyer
inherit verbe	/ɪnˈhɛɹɪt/	hériter
syntax nom	/ˈsɪn.tæks/	syntaxe
pad nom	/pæd/	tampon, coussinet
demo nom	/ˈdɛm.oʊ/	démo, démonstration
commenter nom		commentateur
enabler nom		facilitateur

Les verbes à particule que vous entendrez

Mot	Sens
come off verbe	se détacher, se décoller
come down verbe	descendre, tomber
fill up verbe	remplir
get up verbe	se lever
help out verbe	dépanner
open up verbe	ouvrir

Prononciation à surveiller

Le locuteur utilise 67 contractions et formes réduites, comme we're, I'm, don't. Prononcez-les sous leur forme courte, telles que vous les entendez.

Les sons « sh » et « zh »: shorthand /ˈʃɔɹthænd/, screenshot /ˈskriːn.ʃɑt/
Mots longs — placez bien l’accent: exaggerate /ɛɡˈzæd͡ʒ.ə.ɹeɪt/, interpolate /ɪnˈtɜː.pəˌleɪt/, opacity /oʊˈpæsɪti/, ideally /aɪˈdi.ə.li/

Les sons difficiles pour les francophones :

/h/ — il se souffle, il n’est pas muet: hover /ˈhɒvə/, shorthand /ˈʃɔɹthænd/, inherit /ɪnˈhɛɹɪt/, hyphen /ˈhaɪ̯.f(ə̯)n̩/, longhand /lɔŋˌhænd/
/tʃ/ et /dʒ/ — à ne pas adoucir en « ch » et « j »: exaggerate /ɛɡˈzæd͡ʒ.ə.ɹeɪt/, adjust /əˈd͡ʒʌst/
/r/ anglais — langue recourbée, sans frotter la gorge: gradient /ˈɡɹeɪdiənt/, rotate /ˈɹoʊ.teɪt/, browser /ˈbɹaʊ.zəɹ/, shorthand /ˈʃɔɹthænd/, radius /ˈɹeɪ.di.əs/

Comment s’entraîner avec cette vidéo

Écoutez la vidéo en entier une fois sans parler et notez les mots que vous ne connaissez pas.
Commencez à la vitesse 0,75×, répétez phrase par phrase, puis revenez à la vitesse normale quand cela devient facile.
Enregistrez-vous et comparez avec l’original, en faisant attention à des mots comme gradient, rotate, pause.

Qu'est-ce que la technique du Shadowing ?

Le Shadowing est une technique d'apprentissage des langues fondée sur la science, développée à l'origine pour la formation des interprètes professionnels. Le principe est simple mais puissant : vous écoutez de l'anglais natif et le répétez immédiatement à voix haute — comme une ombre suivant le locuteur avec un décalage de 1 à 2 secondes. Les recherches montrent une amélioration significative de la précision de la prononciation, de l'intonation, du rythme, des liaisons, de la compréhension orale et de la fluidité.

Technique du shadowing : lire le guide complet étape par étape →

Pratique du Shadowing: Why I use single-color gradients in my CSS - Apprendre l'anglais à l'oral avec la vidéo

Choisissez un mode d'entraînement

Télécharger l'application

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?

Build smarter color systems with relative colors

System Design: Why is Kafka fast?

How to Get Smooth, Bright Vocals

Why 95% of Android Developers Get Use Cases Wrong

Blender Tutorial: Photorealistic Puddles

Use AI Like a Senior Designer (3 Workflows)

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

Oh, wait, actually the best Wordle opener is not “crane”…

This is how you master cinematography

The Most Confused Concepts in Engineering

The Dropdown Slicer We Waited 10 Years For (Power BI)

Vocabulaire et conseils d’expression pour cette leçon

Vocabulaire clé de cette vidéo

Les verbes à particule que vous entendrez

Prononciation à surveiller

Comment s’entraîner avec cette vidéo

Qu'est-ce que la technique du Shadowing ?