When putting the overlay on a background image, I put a gradient before the image, and that also does the same thing as you showed. background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url("picture.jpg");
Everyone, I want you all to congratulate Swaroop D. for being the first human being to organically discover all of these CSS techniques straight from the womb!
Thanks for the great tips. For tip 2, I would be interested in how I can place a small photo (JPG or PNG) instead of the blue line. Can you help me with this? Thank you!
Hello, I don't know how to apply the trick 2 kindly anyone guide me I understand the whole part but, i am not got the line which is no the top of heading
Curious why you used a grid not flex box which would be more forgiving if you were to add more divs. Also would love some clarification on why span elements are going outside of my divs? I can’t find very good answers when googling.
A lot of css tips and tricks videos are not necessarily real world usable. This one is great! Every property you can use on every project. Thanks, gary
Woooaaahhhh, didn't realise that's why people use rems n such, though rems were just statically set as 16px. This has blown my little mind! Thank you sir
3:36 - "We use an absolute unit" 💪💪💪 😂 Great vid thanks! 😃🙌 It would be cool if you framed them as challenges and then show how you solved them! I had fun pausing to figure out if my idea for tip 4 would work! 🙌 I had a different idea so it was great to see yours after testing mine!
I love how some of those feel outdated just after a year. CSS evolves so fast and browser support of "more obscure" features becomes better every release.
First of all, I love the design of your video and presentation. It's really simple and pleasing. Thank you so much for explaining things and how it works because that's how I would understand it very well. Thank you.
blend modes & filters are great css features, but they are not that performant. Therefore, if it's not a dynamic value, I would still use Photoshop for this
hi, is a great video but in video composition (like UX on APPs or web)... don´t show your head over css code... if you wanna show css code on left side, overlap your head on right side. i'm following your videos, thanks for all this knowledge
is your professional role as a designer? front-end developer? lately i get confused. i started an internship and am basically recreating figma designs down to a T but i want to do more react, graphql type stuff as well... isn't this all design stuff? i get confused lately about the overlapping of html and css in everything
I had always been wondering if there was a way to centre div elements in CSS grid like you would in Flexbox using align-items and justify-content. I didn't know about this place-content before. Thanks for that. I also wasn't really a pseudo elements person, but I think I'd started using it after seeing this video. Nice video. Thanks a lot for sharing.
Gary I would much like a video about explaining differences between flexbox & grid properties like ‘justify-content’ vs ‘justify-items’ & grid.. etc. I use felxbox & grid all the time but still haven’t got a solid idea on what are these under used properties do, thanks!!
What are some other tips/techniques did I leave out that YOU use commonly?!
When putting the overlay on a background image, I put a gradient before the image, and that also does the same thing as you showed.
background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url("picture.jpg");
Your video is great but maybe you should not put your head right in front of the code you are trying to demonstrate 😅 (ex: 8:23)
Maaaaate. Why did you put your head on top of the code haha.
Any chance of a GitHub demo repo for it at least?
Wats the future of frontend?
Might wanna use Flexbox instead of the Grid.
great presentation!
Super video, thanks!
Thanks man
thanks
Absolute unit.
2:36 I think the correct is h1::before
Eventhough the content is excellent and useful, I considered subscribing on the outro music lol. Nice video !
love it
Thanks for the last one
Simply WoW! Thanks a lot!
Presentations are always well thought out and clean
please make a tutorial that places a 2 center image in a div that the 1 image overlaps to the first image and it is fluid.
learned a lot, thanks Gary
Good stuff thanks
Thanks Gary for some tips!!
This channel is awesome
Awesome , love these tips 👍
i knew all of the tricks, all discovered by myself, thanks
Everyone, I want you all to congratulate Swaroop D. for being the first human being to organically discover all of these CSS techniques straight from the womb!
@@DesignCourse Thanks Gary... Anyhow not to mention, i am a kid, just 13 years old...
@@DesignCourse love your work and tips, thanks
wtf?!
The Mentalist is teaching me CSS :-O
Cool content! Thank you!
i tend to avoid grid; its relatively difficult to mold into something complex when the time comes to do so.
Saving life?? Sure!!. Thanks Gary.👍👍
Grid-template-areas!! I'm a beginner as a front end dev... (backend experienced) , that's my tip
Thanks for the great tips. For tip 2, I would be interested in how I can place a small photo (JPG or PNG) instead of the blue line. Can you help me with this? Thank you!
great stuff man, thx:)
Hello, I don't know how to apply the trick 2 kindly anyone guide me
I understand the whole part but, i am not got the line which is no the top of heading
More of these! Thanks Gary!
hey gary can you suggest me a free hosting service because i am a beginner
Please do react animation and reacty design stuffs please
I'll be honest, I don't really touch react at all. So, that video is unlikely to happen ;)
@@DesignCourse ahh no problem i love your videos and enjoy them very much. Love from Myanmar ❤❤❤
You have covered part of the code....
#garrysHead{ display: none; }
Curious why you used a grid not flex box which would be more forgiving if you were to add more divs.
Also would love some clarification on why span elements are going outside of my divs? I can’t find very good answers when googling.
I am going to start youtube 😁 all I need is a little goodluck
Garry thank you for the tips i loved this video please make more !!!!!!!!
You can draw clip-path in Firefox!
Thanks for all the tips, was looking for this tip 2:07 today and finally got it now
Please, place yourself at the right bottom side. You overlap content in all videos!(
A lot of css tips and tricks videos are not necessarily real world usable. This one is great! Every property you can use on every project. Thanks, gary
These are absolute gold🔥
the clip-path is pretty neat and pretty simple
Your head is a bit over the code and we can't see the whole code, but I really appreciate these tips !
html is what his head covered
Woooaaahhhh, didn't realise that's why people use rems n such, though rems were just statically set as 16px. This has blown my little mind! Thank you sir
In the second tip where did you put color to the blue thing ?
you can put styles in pseudo elements, in that case should be :before{ background-color: blue }
Your head is blocking some of the code
Great video Gary! Looks like you've increased the width and height of your hair? I've heard going to a barber can decrease them for you
Awesome Stuff
More of these for sure. Well done thanks, learned a few great tips there
Would filter not work for the photo effect?
In that tip 6 you can use Mask property and add a gradient and blend it's done ✅😌
👍
It's the perfect time for this!
Loved the video. Definitely would love more of these!
Was waiting for something new
Thank you for it
What program is it that you are using?
👌🏻👏🏻Thanks! You gave some awesome🔥 tips Dude! 😀
So in #2 where did the line come from?
lmao, gary just slapped me with tips number 6
8:55 why when we can use linear - gradient ?
love this video, makes some stuff a lot easier haha
You're looking younger 😉
gary-hair-width:5em; :-)
Compact, nicely explained, with examples. Very good video. I'd love to see more of this in the future (preferably with more visual examples).
Keep it up and keep the hair growing ✌🏼
Thanks for the tips. I could use these on current projects I am working on. Going to add this to the Sass lib I have been building out.
Going to give Scrimba a try. Been needing to up my UX game.
3:36 - "We use an absolute unit" 💪💪💪 😂 Great vid thanks! 😃🙌
It would be cool if you framed them as challenges and then show how you solved them!
I had fun pausing to figure out if my idea for tip 4 would work! 🙌
I had a different idea so it was great to see yours after testing mine!
I love how some of those feel outdated just after a year. CSS evolves so fast and browser support of "more obscure" features becomes better every release.
Now that's what I'm talking about Gary. Please make series of these that would be really awesome
I've had the issue that my rem units didn't scale, now you say the font size has to be defaulted in pixels for the rem to scale properly?
There is another trick, it is kind of old school but cool to have it. We can use a fit-content property value for width property.
What about using % for fluid padding/margin?
Looking good Gary 👍
.gary_mini_video {
position: fixed;
bottom: 0;
right: 5vw;
}
Position relative is setting a positioning context. In this case position this child element relative to its parent
Comparing Gary Simon 10 years ago and today tells us that you dont eat
Great tips! But your head is in front of the code at the bottom left. Why not put the code on the right? :)
great content, but your head covering the code is very irritating, sorry ;)
First of all, I love the design of your video and presentation. It's really simple and pleasing. Thank you so much for explaining things and how it works because that's how I would understand it very well. Thank you.
Love your haircut, handsome 🤗
I can't believe that when he was editing the video that he decided to overlay his head in precisely the worst possible position.
MORE VIDEOS LIKE THIS PLEASE. A JS VERSION WOULD ALSO BE AMAZING.
I've used most of these, apart from the clip path, I need to try it. Another nice video 👍
blend modes & filters are great css features, but they are not that performant.
Therefore, if it's not a dynamic value, I would still use Photoshop for this
hi, is a great video but in video composition (like UX on APPs or web)... don´t show your head over css code...
if you wanna show css code on left side, overlap your head on right side.
i'm following your videos, thanks for all this knowledge
You should make your face bigger so the code is completely covered because that you trying to achieve I believe.. or just move your face to the right.
Pseudo elements should be double colon. e.g. h1::before { }
Hola como estas, podrías subir los videos con subtítulos al español, saludos desde Ecuador.
This would have been great if you weren't blocking the code. Maybe be on the other side.
I'm designing a tribute page for my tutors and you're one of them, Gary Simon. Thank you for helping me in my self taught journey ✌🏾
Hooooooooooooooooo❤❤❤❤❤
I like to attend your class.
is your professional role as a designer? front-end developer? lately i get confused. i started an internship and am basically recreating figma designs down to a T but i want to do more react, graphql type stuff as well... isn't this all design stuff? i get confused lately about the overlapping of html and css in everything
I had always been wondering if there was a way to centre div elements in CSS grid like you would in Flexbox using align-items and justify-content. I didn't know about this place-content before. Thanks for that. I also wasn't really a pseudo elements person, but I think I'd started using it after seeing this video. Nice video. Thanks a lot for sharing.
BTW these are 🆒 CSS properties.
Only few days ago Fireship channel explained these stuff very handily 👍👍😊
Sir,I want to ask you a question....
Do you have any front end developer job,sir?
Hey there! That was one of your amazing videos, thank you so much #garysimon I love it 🤗️👐️
poor choice of face-camera placement
Gary I would much like a video about explaining differences between flexbox & grid properties like ‘justify-content’ vs ‘justify-items’ & grid.. etc. I use felxbox & grid all the time but still haven’t got a solid idea on what are these under used properties do, thanks!!
I have a tip, MOVE YOUR HEAD