Prática de Shadowing: Handy CSS layout patterns, and fun ways to elevate them - Aprenda a falar inglês com vídeo
Criando lição...
1
Hello my friend and friend in this video we're gonna be looking at three layout patterns
2
that I use quite a lot that I think are useful
3
that I don't see used often enough and some cool tips and tricks along with using them.
4
Actually the second one is one that's common but there's a problem
5
that people run into with it that we're going to look at
6
but first let's look at this one which is an overflow scroller.
7
I recently did a workshop where I was talking about this
8
and a few people were like oh I use
9
so much javascript to do this so we're going to see how we can do it.
10
the css only way with like a few lines of code
11
so you can see here i have this overflow scroller with a bunch of cards in it
12
and i'm going to use grid you could definitely use flexbox for this
13
but i prefer grid because if we do it with grid the parent controls everything
14
which is always nice so we can do display grid a gap of one
15
and then the very underused grid auto flow and with
16
that i'm going to say that the auto flow is column
17
and i always forget i think this is columns
18
or was it column column singular it's always fun knowing with grid
19
if it's singular or plural and
20
that makes all of my cards turn into columns instead of creating rows
21
and change the the flow this is a little bit like changing the flex direction with the exception
22
that we can't have a flex wrap involved in it
23
but yeah our flow now creates columns and then what i can do is
24
because you know they're all different sizes which is kind of awkward
25
so now what i can do is a grid auto column
26
and we can control the size of the column
27
and this is columns plural and i know that one's plural
28
because this one's singular and that's how i remember it
29
and here i can just bring in a size
30
and we could do a lot of different things for this
31
size uh let's just say we could do something like 300
32
pixels i think we'll be fine i might make them a
33
bit bigger maybe for this layout actually it's okay we'll see uh
34
but you can see right now that's creating my my going
35
that way and i put gap one Let's make that one run.
36
But yeah, now we're now overflowing quite literally, which isn't what I want.
37
I want like an overflow scroller that's not causing the entire page to scroll.
38
So then I can just come on here and say that my overflow on the x-axis is going to be a scroll.
39
And in doing that, now we can see here I'm scrolling left and right, which not ideal maybe, but this is a very common pattern
40
that we see these days and where the real part of this comes in, because I guess this is enough.
41
I'm just holding shift down, by the way, to scroll sideways, which is the awkward part if you are on a desktop computer.
42
But on mobile, this is a very common thing with UI interfaces these days.
43
But the part that I want to look at really is once you've put this in place, is coming with scroll snapping.
44
And scroll snapping is definitely underused for these types of things, where we can just say that we have a scroll snap type.
45
and this is the part I always mix up.
46
I think you want to do the direction first.
47
So it'd be my inline axis in line or we could do X because we're on the X axis and then mandatory.
48
When you first do this, it's a little bit of a letdown.
49
I won't lie because you're going to try it and nothing is going to snap into place.
50
I actually thought I made a mistake at first here.
51
But what you want to do is combine the scroll snap type with selecting the children
52
and saying how they're going to align when they're snapped
53
and this is the perfect use case for nesting
54
because we can just do an ampersand
55
and then get the children with the star selector here uh
56
you don't actually need the ampersand you could also do it
57
like this i i just have this habit of putting the ampersand uh it's completely up to you
58
if you feel like this needs a comment you can just put select the children
59
so you know everybody knows what's going on
60
and then here what we're going to do is a scroll snap a line
61
and i'm going to say center for now you can do start you can do end we can do center
62
and if i do center you can see now it's going to grab the one in the middle
63
and it's going to center it so
64
when we are not the one in the middle but
65
when we get
66
when we scroll over it's going to snap the one that's
67
being snapped into the middle uh for this one i am
68
using a scroll snap type of mandatory there's also proximity for this i don't really like proximity
69
because it leaves like proximity leaves a little bit of leeway
70
so uh we'll let the page reload and then so now
71
when i'm going over actually it's still going to act very similar
72
but there is this like chance where things might not snap
73
into place i think in the way we're setting things up here it won't matter but
74
if you're doing something that's more based on like scrolling horizontally
75
with big sections proximity might be your better bet uh
76
because mandatory becomes a little bit aggressive i'm not a huge
77
fan of using scroll snap type for sections of content though it's a bit like scroll jacking
78
which can be a little bit annoying uh
79
so i'm going to change this one back to mandatory man da tory like
80
that and we're going to move on
81
but i do have a really cool trick
82
that we're going to show you I'm going to show you at the very end with this one
83
but it's not really related to layout patterns this is a really fun thing
84
that we can do with this that just makes it
85
so much cooler
86
but for now what I'm actually going to do is comment out this overflow scroller this entire section
87
so we can move on to my second layout
88
which is going to focus on similar cards that we have
89
but we're going to be doing auto grid
90
and I realize most people are familiar with auto grid So let's just go look here quickly at the HTML.
91
Same thing.
92
Auto grid, bunch of cards.
93
And the auto grid does have two choices.
94
So let's just come here and say that we have the auto grid.
95
I'm going to do a splay grid once again.
96
We're going to do a gap.
97
And as I said at the beginning, I think a lot of people are familiar with auto grid, but there's a gotcha with it that people run into issues with, which is why I want to look at it today.
98
And so this is going to be my grid template columns.
99
and the reason I'm saying autogrid is because I want to use the repeat and I want to use the autofit syntax.
100
I'm going to drop this on another line just
101
so we can see it all and for now I'm going to say autofit and just say 300 pixel.
102
Let's do 200 pixels so we get a few more columns which means that it's automatically going to autogrid.
103
I put it in the wrong place apparently.
104
Let's go fix that.
105
I named them both the same.
106
Auto grid section will help alleviate that issue.
107
So you don't normally see an auto fit with 200 pixels like this because it's kind of clunky, but it works.
108
I mean, it automatically adds or removes columns if they're based on
109
if there's enough room to squeeze in an extra 200 pixel column there.
110
But we don't do that because it's kind of clunky.
111
So usually what this is, is with a min max.
112
And this is where things get a little bit interesting or more useful, I should say, but harder to remember.
113
So I will give you the trick that I use on remembering the syntax here along the way as well.
114
So for this min max, we're going to say this is we'll stick with the 200 pixels as our minimum.
115
And then we're going to say one fr for the maximum, which just means it allows them to stretch.
116
So it's exactly the same thing that we had before.
117
But now those columns are kind of squishy.
118
So they'll shrink down a little bit, then they fill up the space, then they, you know, it makes it responsive.
119
And that's great.
120
The problem with this layout is if you have a larger size here.
121
And this larger size can cause overflow if the total space is below 400 pixels, right?
122
Because we're saying the smallest these can get is 400.
123
And the trick here is to put this all inside of a min, and this becomes 100%.
124
So this is weird that we have a min inside a min max.
125
Again, I'll give you the trick on remembering this and an easier way to write it in a second.
126
But yeah, this works really well.
127
And you can see it's exactly the same thing we had before, except now it's small sizes.
128
It's using the 100%.
129
And that's because it's going use whichever of these is smaller, is the 100% smaller, which it is right now.
130
So use that.
131
And then as soon as the parent is larger than 400 pixels, it switches over and it's now using that 400 pixels here instead of the 100%,
132
which, yeah, I think is a nice win, but it's a little bit hard to remember.
133
So really fast.
134
Whenever you want to do this, you use the repeat and you don't know how many you want.
135
So we just say auto figure it out for me.
136
There's auto fit or auto fill.
137
I default to auto fit.
138
Pick one if it's the wrong one, pick the other one.
139
And in this case right here, there is no difference anyway.
140
So I'm going to do an auto fit comma.
141
And then I know I need a min max.
142
In my min max, I need a minimum value.
143
So I'm to use a min function comma one fr
144
so i don't forget it
145
and then i don't have to worry about where the fr goes between all these closing braces
146
because i i mix that up if not so we have the
147
min max again min because i need a minimum value comma one fr
148
and then i go in my minimum and i put a value
149
that i want let's do 300 pixels this time and 100 and the only value that ever changes is this one.
150
So the nice thing to do is say
151
that we have a min call size of 300 pixels and use that custom property instead.
152
And then this becomes var min call size like that makes it for an even longer declaration,
153
which is, you know, it's a lot of a lot of code, I guess, for a single CSS declaration.
154
But now we have the layout that is working exactly like we want it to.
155
And it's very perfectly responsive, a nice intrinsic layout pattern right there.
156
And you can just, you know, rinse and repeat this, use it anywhere you want
157
and just change this min call size for the different values that you might need.
158
So another one that I quite like.
159
So let's get rid of this section now here
160
and get into another one adaptive what does adaptive mean for
161
this i'm also going to move the the heading off we'll comment this out
162
so this is closer to the top and let's look at this
163
so here i have this layout once again similar to before
164
i actually have the auto grid uh in this section as well i believe auto grid is here
165
or that doesn't really matter too much what matters right now is the uh this area here this active promotions
166
which is this promo list that i have right here
167
and it's inside of a section a sidebar section and
168
so for this one we're going to be using container queries
169
and container queries don't get enough love usage of them is
170
very low browser support for them is very good now you
171
can safely use container queries unless you really need to support some legacy browsers
172
and what we're going to do is let's start with our promo list
173
and the reason actually okay let's talk about the reason why
174
I want to use a container query for this in the
175
first place is right now this is in a narrow sidebar section
176
and then as the viewport gets smaller we get to a wide area
177
and then eventually it will get narrow as well
178
and what I want to do with this one we have a bonus tip with this one too
179
but what I want to do with this one is
180
when there's enough room I want this active promotions to actually be three columns instead of stacking like this
181
because it looks kind of ugly But when it's at this area, I want it to be stacked because that makes sense.
182
And when it's over here, I want it to stay stacked because that would make sense.
183
And using a media query for this is a nightmare because as the viewport gets wider, that area it has to live in gets smaller.
184
So it doesn't really make sense to do this with a media query.
185
So let's get that.
186
That's my promo list.
187
And I want to say an at container.
188
And we can say our width or even inline size, but I'll do width in this case.
189
is we're going to say if the width is larger than, let's try 500 pixels.
190
We want it to be a grid template columns of repeat three one fr.
191
I have some other styles floating around, but we can, let's just say display grid gap one rem, because this would sort of be what the pattern would be for this type of thing.
192
And if we try this at first, it won't work.
193
So we get to here, this is clearly bigger than 500 pixels, but we don't have three columns.
194
The reason that's not working is because there is the side effect of having to have a container.
195
And for this, the white border around here is my sidebar section.
196
We have this aside.
197
I call this sidebar content because we have first the sidebar, then the content.
198
Maybe there's a better name for that.
199
But yeah, sidebar content.
200
I want to grab either the aside or the section itself.
201
Either one of these would work perfectly fine so it's up to you which one you want to use.
202
I like making the closest thing the container but the aside makes complete sense.
203
If you'd rather the aside be a container that would work completely fine
204
but I'm going to say that the sidebar section is a container type of inline size
205
and in doing that when I make this smaller we get to here
206
and then we get those three columns
207
because this is clearly bigger than 500 pixels and as we get smaller then it wraps here as well.
208
And yeah, so I think that works really well.
209
It's an adaptive layout.
210
It's able to change to where it's being used.
211
I really like this for anything that might end up in a sidebar.
212
And these types of patterns like this work really well.
213
Much easier than trying to figure it out along the way with a media query and then having to readapt.
214
And then the breakpoint changes and you have to have another breakpoint changing for the other thing.
215
It's a little bit annoying.
216
The only side effect here is we do need to declare our container type.
217
But whatever, not the end of the world.
218
And now just before we get to the bonus tips, including how we can do these interesting little cutout corners
219
and a really fun effect for the first thing that I'd mentioned earlier, I do just want to quickly mention that this video is being brought to you by my course CSS Demystified, which I've built from the ground up
220
and includes an entire module based on patterns that we're seeing here where we're looking at fluid,
221
intrinsic, and responsive design patterns that go into a little bit like what we looked at in the previous example, as well as a deep dive into container queries, some useful patterns with them,
222
some gotchas along the way, how we can overcome some of the gotchas, and yeah, just a deep dive into helping you learn how you can start writing CSS with confidence.
223
So if you'd like to know more about that, there is a link just down below in the description.
224
And with that, let's jump back into things
225
and look at how we can do these little scoop out corners that are right here.
226
Two bonus tips.
227
I mentioned a few things along the way though.
228
Now we're going to get into the fun stuff.
229
So on my active promos here, let's go.
230
That's my promo list.
231
And then these are just LIs inside.
232
So I could say that the LIs that are direct to children, which I had the ampersand before.
233
So I'll use the ampersand again here where first I'm going to give these a border radius.
234
So border radius, I'm going to say like, I don't know, I'm going to make it bigger than what I'd actually want uh
235
so i probably whatever 16 yeah it's probably a little bit big uh actually well i'll leave it big
236
so you can actually see what it is let's also change the border color
237
because i think it a standout more border color can be white uh just
238
so it highlights a bit more
239
and then what i'm going to do is a corner shape of scoop
240
which will now scoop out those corners nice right So corner shape is new.
241
This is a progressive enhancement.
242
If it doesn't work, then people get the border radius.
243
And if it does work, then they get the scoop.
244
And again, I think that's a little bit big.
245
So we can drop that down to like an eight.
246
And scoop, I'll put a link to more information on corner shape.
247
You can do squircles, you can do scoops, you can do bevels and insets and all sorts of interesting things there.
248
But I'm going to leave it with my little scoop there to make it look like a ticket
249
or something that people are getting for their coupons.
250
And the last one that I wanted to look at, which is one of my favorite new things is with scroll driven animations,
251
which let's get this scroller turned back on all the way at the top here.
252
And what we're going to do with this one is something very cool, at least in my opinion.
253
I think this is the super amazing.
254
So on my overflow scroller here, we have, you know, we scroll side to side and we can make this just, I don't know, so much more satisfying.
255
where I'm trying to remember how I'm going to do this.
256
So we need to create some keyframes for this.
257
I'm going to say an at keyframes of, let's call it a scroller.
258
And we're going to say at 0% and 100, comma, 100%.
259
So when they're at like the extreme ends of the animation, we're going to give them an opacity.
260
We're going to exaggerate this and then we'll make it look better.
261
0.5 and let's give it a scale of 0.5 as well.
262
So it's pretty substantial.
263
and then what we're going to say is in the let's say like a 35 comma 65 does
264
that make sense uh we're going to say that the opacity is one
265
and the scale is one and
266
that means the animation basically goes from zero to 35
267
and then from 65 to 100 and we have that middle range where things will just always be at this, in between these two values,
268
it will always be at the opacity and scale of one.
269
Then I'm going to go on here where we have the scroll snap align.
270
So I'm selecting the individual items that are snapping.
271
And I'm going to say that they have an animation of scroller.
272
I'll put the name.
273
I'm also going to say that it's linear because if you don't use linear, maybe we don't need linear for this one.
274
I'm not 100% sure, but I'm going to throw it on there anyway.
275
and I'm also going to put the both keyword
276
which just makes sure there we go we're currently now at the end of the animation
277
so by putting both here
278
if the animation is not currently running it means you know go to either the first
279
or last keyframe depending on where you were
280
so they're at the beginning of the animation right now
281
which does not look fantastic but we can see
282
that at least it's working but now we don't want to put a duration on here
283
because that wouldn't make any sense so we can come in with an animation timeline
284
and with the animation timeline we have two options
285
one of them is scroll which is not what we want in this case
286
and I think scroll won't work if we just do it like this
287
so you can see it's actually broken
288
if you do scroll it's defaulting to up and down
289
so our horizontal vertical scrolling so
290
if I want it to be based on horizontal scrolling I just do x
291
and there we go it's now animating it
292
but it's based on the entire way across that I have for this
293
which I know the scroll bar is going a bit behind my head
294
but as we sort of come across
295
and then we come this way it's it's based on the entire scrolling distance
296
that we have instead of scroll though i can use view
297
and then it's gonna be based on the item's position in the view so now
298
oh that's kind of better right i love it it's
299
so nice uh and as i make
300
that a bit wider we can start getting some of those ones
301
that are further out we could even let's do opacity like 0.25 maybe we We want to really fade those out.
302
And now, yeah, looks a little bit, I don't know.
303
I find that I actually thought that I was exaggerating with these values, but it ended up working out pretty well.
304
Where are I think pretty well, in my opinion.
305
And you can play with the keyframes a little bit.
306
But yeah, I thought that would be a fun way to sort of finish this one off.
307
Less practical necessarily, but a way to elevate our design a little bit
308
with just like a couple of extra lines of CSS.
309
And yeah, if you are interested in CSS Demystified, do make sure to check out the link for that is right down in the description below.
310
And with that, I want to say a very big thank you to my enabler of awesome Johnny, as well as all my other patrons and channel members for their monthly support.
311
And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.
Contexto & Antecedentes
Neste vídeo, o apresentador explora três padrões de layout CSS que ele utiliza com frequência e que considera úteis, mas que não são amplamente aplicados por outros. Ele compartilha dicas e truques para implementar esses padrões, focando em uma abordagem que minimiza o uso de JavaScript. O conteúdo é voltado para desenvolvedores que buscam simplificar a criação de layouts responsivos e interativos utilizando CSS puro. Ao discutir essas técnicas, o apresentador também menciona desafios comuns que os desenvolvedores enfrentam ao trabalhar com layouts, como o scroll overflow e o scroll snapping.
As 5 principais frases para comunicação diária
- "Eu uso muito JavaScript para fazer isso."
- "Agora estamos transbordando, que não é o que eu quero."
- "Esse padrão é muito comum hoje em dia."
- "Na versão mobile, isso é uma coisa muito usual."
Guia passo a passo de Shadowing
Para aproveitar ao máximo o conteúdo deste vídeo e melhorar sua pronúncia em inglês, siga o guia abaixo:
- Escute atentamente: Antes de iniciar a prática de shadowing, ouça o vídeo pelo menos uma vez sem tentar imitar. Preste atenção aos padrões de entonação e ritmo do apresentador.
- Reproduza frases curtas: Escolha uma frase da lista mencionada anteriormente. Ouça-a atentamente várias vezes e depois repita-a. Exemplo: "Eu uso muito JavaScript para fazer isso." Faça isso várias vezes até se sentir confortável.
- Imite o ritmo: Use uma ferramenta de reprodução de vídeo que permita desacelerar o áudio. Isso facilitará a captura do ritmo no momento de repetir. Tente falar exatamente no mesmo tempo do apresentador.
- Pratique com variações: Após dominar uma frase, tente mudar algumas palavras ou a estrutura, a fim de praticar a flexibilidade na conversação em inglês. Por exemplo, transforme "Eu uso muito JavaScript para fazer isso" em "Eu não preciso de tanto JavaScript para esta tarefa".
- Grave sua voz: Faça uma gravação de você mesmo repetindo as frases. Ouça sua pronúncia e compare com a do vídeo. Isso ajudará a identificar áreas que precisam de melhoria.
Ao incorporar técnicas de shadowing em sua prática de conversação em inglês, você poderá não apenas melhorar sua pronúncia em inglês, mas também ganhar mais confiança ao falar. Utilize plataformas online, como um shadowing site, para se conectar com outros aprendizes e compartilhar suas experiências, enriquecendo ainda mais essa jornada de aprender inglês com YouTube.
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.