Prática de Shadowing: More CSS quick tips - Aprenda a falar inglês com vídeo

Hello my friend and friends.

A little while ago I put out a video looking at five quick tips.

People really seem to like that.

They suggested some and I have a few of my own that I want to share.

So today I have five quick tips that we're going to be taking a look at including a few bonus ones.

So it's more like seven or eight tips.

Why am I saying five?

I don't know.

It's my favorite number.

So we're doing five.

Let's start with overscroll behavior which you can see here.

I have this scrolling thing that I have set up and

if you get to the bottom of something like that

and you keep scrolling it will continue to scroll the entire page

which can be annoying or if i'm scrolling up uh then the same thing can happen

if we're you know it can actually scroll up

when you want to be scrolling only within an element

so to fix this and there is a big a watch out for this one

that we're going to look at as well

but let's let's get it set up first so over scroll behavior of contain

and uh code pen does not like it apparently but now

if i'm scrolling down and scrolling down i'm I'm still scrolling and it's locked into this area.

And then the same thing going up, we're locked into this.

The reason I'm saying to watch out for this is, especially on mobile, it's less of an issue on desktop because you can always find a way around.

But if you're on a mobile device that's a touch device, people ask me about this all the time, by the way.

This is just the responsive mode that's built into the dev tools of all the browsers, I think.

So same thing, the overscroll behavior, I can scroll in this area.

So I can scroll down, I can scroll down.

If I get to the bottom and I'm trying to scroll with my finger, it's not going to continue scrolling.

This can be a good thing for like side swiping things.

So if you have horizontal scrolling, this can be a good idea to put in.

The thing you want to watch out for is say this is 120 viewport block size.

So it's a nice big tall area.

So the user scrolls down and then they get to like this part and they're scrolling.

And I have space on the side so I can actually like I can still grab a hold outside of that area.

but like I'm at the bottom and I can't even see the bottom

and that's really annoying right and there's no way for me to keep going whereas

if I turn this off let's remove that

and this will have to update so now once again we click we scroll down

but we get to like here

if I'm scrolling I'm scrolling we get all the way down to the bottom

and then I keep clicking and scrolling it will actually pull me down still

so it's one of those things you definitely want to test double check

that it's giving you the desired results that you're after

but again for horizontal scrolling especially on touch devices it can be handy

and there are other times where you definitely might want to implement this

but just be careful with it

if the things are getting tall cool next up we have carrot color

which is a fun one in

that uh not a lot of people know about it

so you can see i'm set up carrot color orange red right here

and that means

when i click into these you can see the carrot is actually orange red it's getting the color in there

if we don't have that it's just going to be the default of white

which there we go it is updated so

if you want something a little bit more on brand you can just use your carrot color on your inputs

and nice and easy the only problem here

and this is our first bonus tip is the carrot by

itself isn't super obvious right it's kind of small there's not

a lot you can see we can actually change the carrot

shape now sort of this is a progressive enhancement it's only in chrome at the moment

so let's i am in chrome so So we have my carrot color set up, so we can come here and say carrot shape.

And if you're going to be changing the carrot color, you might as well change the shape while you're at it, just to add a little something.

So I think the default is bar.

Let's see if that actually changes anything.

No, yeah, that's the default one, so that hasn't changed.

We could change this to a block and block is if you want to do like the old, you know, like these, and you might not want orange, red, that's like super deep like this.

Let's see if we can do a HSL from, I should probably use OKLCH.

We're going to say orange, red, LHSL over 0.5 to lower the opacity of it.

I haven't tried this.

This is where we're freelancing here.

Yeah, you can reduce the opacity of it.

So yeah, that could be something interesting

that you bring in just to make things look a little bit more interesting along the way.

If you have a certain style that you're after with a monospace font or something.

So that is the color shape.

The other option you do have here is underline or underscore?

I'm seeing underline as the autocomplete, but I'm pretty sure it's underscore that we want to use here.

And there you go.

I've come in.

It's kind of hard to see.

Let's just put this opacity back up to one.

This is a relative color, by the way, if you've never seen it before.

And yeah, you can have underscores coming in as well.

So we have a few different options there.

And moving on from carrot shape, we have accent color, which is the same idea of getting into the world of coloring things.

So you can see I have my checkbox here.

This we want to get things more on brand to match our carrot color that we just changed.

So on the HTML, this is an inherited property.

So just declare it as high up as you need to.

We can say accent color, accent color, just accent.

And we're going to with orange red here as well.

And all of these will change over to using that color.

There's a few good things with this.

First of all, the support's pretty good.

It will work for all of these elements.

And you'll notice the checkbox, the color of the checkmark is black right now.

If we change this to say yellow, actually no, yellow would stay black because yellow is very bright.

Let's change this to, what's a dark color?

100

I can't think of a good dark color off the top of my head for some reason.

101

I always use light keywords.

102

And the dark ones are never dark, right?

103

Let's try dark green.

104

I'm guessing is actually dark.

105

Ah, there we go.

106

And now you can see the check mark is automatically switched to white.

107

So it's always going to take the higher contrast.

108

The same with our radios.

109

The color of the radio there will always use the higher contrast color automatically.

110

And so, yeah, nice easy win there.

111

Accent color.

112

And then you can just get on brand super easily.

113

So a nice quick win with that one.

114

This can definitely be something that's included in your CSS resets even.

115

I think it's a nice one to throw in there.

116

The next step, a bit of a warning, it'll be a bit of a flashbang because I want to talk about colors.

117

So the background will be white on this one and it will be bright.

118

And the reason I want to talk about that is because I want to look at the color scheme shorthand.

119

Once again, this is something I include in most of my resets.

120

If I'm going to have a light and a dark color scheme, I'm going to put a light and a dark here.

121

And that means use whichever is the user preference.

122

For me, it is dark.

123

So you can see everything is switched over.

124

If you don't know about Color Scheme, the reason it's fantastic is the defaults is it will change the text colors.

125

So I don't have anything declaring my text colors other than my title up at the top there.

126

So because of that, the text color is automatically changing.

127

The background color is automatically changing.

128

The inputs are even switching.

129

My scroll bar is switching everything automatically switches when we switch over

130

because what it's doing is putting the user agent styles into a dark mode so

131

if you forget some styling along the way say for an

132

input you don't have these bright white inputs sitting around or it could be many other things but

133

if ever you forget to style something it won't stick out like a sore thumb which is quite nice

134

there is some limitation to this

135

if you're going to do it you probably want to have

136

some way for a user to also manually switch between

137

because people will have their user preferences set up that they might not want to be reading a website in.

138

A lot of people who have dark user preferences still prefer light websites for long reading

139

or people want to switch if it's nighttime.

140

They might want to switch to a dark theme even if their system settings are in a light theme.

141

So this is a nice first step

142

and I'll put a link in the description to a video

143

where where I look at how we can go more in depth with this

144

and build out an actual toggle and everything else, because I've done that.

145

So I'll include a link in the description to a video that goes a bit more in depth on this, how we can build a bit of a color scheme with the toggle, while also using the light dark here.

146

As a little bit of a bonus in future CSS, or if you don't mind, not as great color handling, another, or not color handling,

147

browser support, it's getting there, but it's not perfect yet, is you could do something like color and use the light dark function.

148

And that allows you to pass two colors here.

149

So these could be custom properties that I'm putting in.

150

But let's just say that my color, my light text color should be red, which will look terrible.

151

We're going to say red and we're going to say, let's do the light blue.

152

So if I have a, maybe we'll do, yeah, we'll just say red, whatever.

153

You can see the text has actually changed over to light blue right now.

154

And if I emulate this, so if you go into your dev tools, I guess this is another bonus tip in your dev tools control shift

155

or command shift on a mac p brings up your command palette

156

and you can emulate emulate your different things

157

so preferred color scheme of light

158

and now you can see the text color switched over to red

159

and then control shift p command shift p on a mac emulate

160

and you can do not emulate

161

or you can switch over to other ones you can emulate all the different media query stuff

162

so do not we go back over to our baby blue right there yeah color scheme is fantastic

163

and makes life really easy

164

and i'm really looking forward to light dark getting to the

165

point where browser support is good enough to start using it in production

166

and i had to look uh this is of the time

167

of recording it is baseline newly available we're at about 85 support as far back as safari 17.5

168

so probably a little bit longer realistically unless it's a personal project

169

but yeah we're getting to the point where we're going to be hitting that crossover pretty soon i think

170

anyway that's it for our color scheme let's jump on over to our last one

171

which is our place content where my demo apparently did not want to load

172

when i got to the page here there it is

173

and this is place content or place items

174

and we're also looking at another one along the way

175

so here on my section i still think this is the

176

easiest way to center things in css these days is throwing a display grid on the thing

177

and then using either a place items of center

178

or a place content of center

179

and both of these can work with grid the place items will work

180

if you only have one thing in there so

181

if I only had an h2 the item is going to be centered horizontally

182

and vertically when we have multiple items it's creating two rows of content

183

so it's centering them vertically within the rows

184

which isn't quite what I want so instead we can use our place content center

185

which places the entire grid in the center

186

and it's probably the easiest way to center something you can

187

actually do this now again browser support's not good enough anyway

188

but you can also do this in a div now

189

or block level elements I should say

190

because this is a section not a div even though semantically

191

they're more similar than you might expect unless you're like actually attaching a title to the section, but I digress.

192

We can do a align content of center and then a justify items of center,

193

and it will center things.

194

Let's see, there we go.

195

You might be going, wait, Kevin, shouldn't this be the other way around?

196

Yeah, in Flexbox world, you would use the opposite of these two, but in the block context, we do it this way.

197

That definitely feels frustrating.

198

I know a lot of people got mad when this came out

199

that it's the opposite of what we would use with Flexbox.

200

It actually does make sense

201

when you look at how the items versus the content keywords work when we're doing alignment on things like this.

202

It's just one of those things that we've built a pattern we're familiar with, so it is kind of frustrating that they are like that.

203

You still need two lines here to be able to do this.

204

So just having a display grid and a place content center is better browser support anyway, so we might as well use that,

205

I think, even in the future.

206

Unless you really don't need a grid context for some reason, I'm probably still going to go this route,

207

but there's probably situations where maybe the other one would be handy to have.

208

The other one I did want to mention is if the content inside is the...

209

Let's just take this off.

210

We can take this off and we're going to add a position relative here.

211

Position relative because I want to talk about the place things.

212

So on a positioned element now, you can use the item or self things, if that makes sense.

213

Let's do that.

214

That's my H2.

215

So my H2 is going to get a position of absolute and I can actually do a place self.

216

Oh, no, we need one more thing.

217

I'm going to say inset of zero.

218

So top, bottom, left and right of zero.

219

and then I can do a place self of center and that will work and go in the middle.

220

So this is the placement of things would work.

221

So this is the same as an align self

222

and a justify self of center because all of those have been brought over to the positioning as well, right?

223

So if I say justify self center, we'll get it on the justify axis.

224

So it's centered this way.

225

And if I did an align self, we're going to center it vertically instead.

226

Because whenever we use the place, it's a shorthand for the justify and align.

227

So it's justify self and align self of center.

228

Same as when I did it over here with the place content of center.

229

That's the shorthand for align content and align and justify content of center.

230

So yeah, a bunch of different ways you can center things.

231

A few bonus tips along the way there.

232

I'll put links to the original video down below

233

and they should be on screen to the couple I mentioned along the way including

234

that one on the color scheme stuff that I talked about and with

235

that I want to say a very big thank you to

236

my enabler of awesome johnny as well as all my other patrons

237

and channel members for their continued support

238

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

239

and we're almost at a million subs as the time of

240

this going out probably really close maybe we passed it maybe

241

not just want to say a very big thank you to everyone for helping me get there

242

if we haven't yet hit it and you haven't yet subscribed please do consider subscribing to help me get there.

243

That'd be pretty cool.

244

It's a big milestone for us YouTubers.

245

So yeah, thank you to everybody who has continued to support me, whether it's through Patreon, channel membership, or just watching and sharing my videos.

246

Yeah, it's been a fun ride, and we finally got to a million, or are getting to a million.

247

But whatever it is, thank you so much, everybody.

248

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

O que é a Técnica de Shadowing?

Shadowing é uma técnica de aprendizado de idiomas com base científica, originalmente desenvolvida para o treinamento de intérpretes profissionais. O método é simples, mas poderoso: você ouve áudio em inglês nativo e repete imediatamente em voz alta — como uma sombra seguindo o falante com 1-2 segundos de atraso. Pesquisas mostram melhora significativa na precisão da pronúncia, entonação, ritmo, sons conectados, compreensão auditiva e fluência na fala.

Prática de Shadowing: More CSS quick tips - Aprenda a falar inglês com vídeo

Sobre Esta Aula

Vocabulário e Frases-Chave

Dicas de Prática

O que é a Técnica de Shadowing?