one of the best videos I've seen in long time. 1. Great tips for more advanced knowledge / and perfect amount 2. Good examples and presentation 3. Shout-outs to the "original creators" 4. Pace 5. Decent voice over and no annoying music
I am following Lun Dev for a long time by now, and he has some great, highly valuable content. What you both are sharing is the great content and information, strict to the point. Not much, blah blah.
this is the perfect pace of teaching, no time wasted, perfect examples, quality content. I actually learned something new about css and that's rare in youtube videos
The problem with the columns for masonry is that it's gonna read down instead of across. Which would be be problematic for dynamic content if you're using an Ajax load more for example. How ever a display grid masonry is in the works. Also with the accordion it's best to stick with the details summary tag for acessability purposes. If yiu go the JavaScript route you're also gonna have to do your aria exampled states and your tab keyboard support.
I am no frontend dev. I am backend dev. But I run my personal projects, so I need to do frontend too sometimes. Because I am not a frontend dev, I am not great at making things look nice. This video should help - really good ones there, and easy to implement.
I was suprised that you also watched lundev which i watch when you are explaining masonry layout my mind goes to his video and kudos for giving him credit i really appreciate it.🎉
2:53 position:absolute will place the element according to the page boundaries and not the viewport, it's rather the position:fixed that places it according to viewport
You can have an expandable panel with an opening transition even without any javascript at all. Just use a hidden checkbox and .container:has(input:checked). Make the "summary" its label so that when it's clicked the invisible checkbox is checked and toggles the 1fr for the container as shown in the video.
@@ErikBlomqvistSwe That was my first take but I tried and surprisingly those didn't work for me. Maybe I did something wrong, idk. It worked in general but the transition did not happen.
I am a pro and I don't use that column trick. The images often get sorted in the wrong way. There will be a real masonry soon tho. They just need to implement visual tab order feature first, for screen readers.
On tip 8 you talk about JS for adding some custom classes, please take care about the [open] attribute of the details/summary elements to not add unnecessary JS on the web
I had actually thought about using a cobblestone design recently but was not sure how feasible it would be. I went with a simpler rotating marque but its cool that its actually really simple to do.
So the columns property must be used with caution, simple layouts doesn't have problem, but complexes can cause performance issues because of how the propertie column-count works, I'm 2 weeks trying to sove a problem in my work and the cause is the column-count
The columns property stacks stuff, but it's like a newspaper; you read the content top to bottom before starting at the top again. Masonry has a reading order left-to-right, but each row dynamically squashes upward to fill in gaps. Using columns won't work if you want your latest content at the top of the page, for example. It also won't work with streaming in assets. I feel like you probably know that, but it's important to say, so you're not fooling people into thinking that masonry layouts natively exist, because they don't.
I failed on Tip #1. Simple image viewer. I see the border when page refreshes, but then image expands past the border, thus hiding/covering it. Will keep trying. width: 1100px; height: auto; border-image: linear-gradient(to right, #0066ff, #ff32d6) 1 / 3px; After a good night's sleep, I got it. Needed to add padding.
When i saw the thumbnail, i thought you brought me a timely solution to an issue I'm having, but it's not the case 😅 I'm trying to have three horizontal text blocks across the top on desktop viewing, but have them align vertical when the window is made smaller/when viewing on mobile. Can anyone make any suggestions? Grid will swap to vertical if i specify the box size by pixels (okay, but I'd like 1, 2, or 3 images to fill up a given space), and trying out the columns has my boxes melding over one another when i change the window size
Your example with columns is naive. The thing about a proper masonry layout is that it's still read from left to right, then top to bottom. Your order fills a column from top to bottom, then left to right. This especially matters if you try to add more items in dynamically, then you can't just scroll down to see the new stuff.
The thumbnail is outrageous; suggesting grid is for noobs and columns for pros. Very different layout mechanisms, solving clearly different problems. Excellent rage bait. Great content. 👍
About the tip #7, there's a new way to animate the auto value with no javascript. .container{ overrflow: hidden; height: 1.5rem; transition: height 150ms ease; ... interpolate-size: allow-keywords; } .container[open]{ height: auto; } And that's it! but of course, the interpolate-size property isn't widely accepted yet for the browsers, at this date it has 44.68% of acceptance (: Btw, I loved tip #9!
Big don came to TH-cam who is very passionate to build and teach coding every one who want to become a professional in this field... Good work, make complete video on full stack web development . Love from Pakistan, I can not speak English but l like so much your videos as well as your coding 2 go channel. By the way, your channel is gift for me to learn coding in my life, your videos and your coding level on the next level, before watching this video, I would say that you have a great experience Fabian Sir... Thanks for this amazing and informative video...
Columns has been around since the early days of CSS? No, not even close. Firefox and IE introduced it in 2012, Chrome in 2016. CSS is from 1996. Chrome had Flexbox (prefixed) since 2010, Firefox (prefixed) since 2007. Also do not build a custom accordeon using JS. Always use the checkbox-hack for such things and leave JS out. This way, users can already navigate your site, even if the js is still loading (hello mobile data)
one of the best videos I've seen in long time.
1. Great tips for more advanced knowledge / and perfect amount
2. Good examples and presentation
3. Shout-outs to the "original creators"
4. Pace
5. Decent voice over and no annoying music
I am following Lun Dev for a long time by now, and he has some great, highly valuable content. What you both are sharing is the great content and information, strict to the point. Not much, blah blah.
this is the perfect pace of teaching, no time wasted, perfect examples, quality content. I actually learned something new about css and that's rare in youtube videos
If you want to add transition to height : auto; simply add "interpolate-size: allow-keywords;" property
If the entire user base uses only chrome, sure.
Chrome, the new IE
The column property really helpful. Definitely gonna be using it
I'm about to get burned at the stake for this CSS witchcraft.
Witch!
I love you, the `columns` property is exactly what I was looking for for a project! Thank you!
The problem with the columns for masonry is that it's gonna read down instead of across. Which would be be problematic for dynamic content if you're using an Ajax load more for example. How ever a display grid masonry is in the works.
Also with the accordion it's best to stick with the details summary tag for acessability purposes. If yiu go the JavaScript route you're also gonna have to do your aria exampled states and your tab keyboard support.
This is pure gold, thank you.
I am no frontend dev. I am backend dev. But I run my personal projects, so I need to do frontend too sometimes.
Because I am not a frontend dev, I am not great at making things look nice. This video should help - really good ones there, and easy to implement.
You don't have to say "like and subscribe" when you drop a bomb like this. Thanks mate ❤
Only saw 2 videos by you and already subscribed. Great content!
I subscribed on the first😅his content is super cool
I was suprised that you also watched lundev which i watch when you are explaining masonry layout my mind goes to his video and kudos for giving him credit i really appreciate it.🎉
This tips are great, thanks, I usually use the max-height property instead of height for dropdown purpose and works well..
Thank you for this video 😊
Greatest informative teaching... Thanks for the valuable ideas..
2:53 position:absolute will place the element according to the page boundaries and not the viewport, it's rather the position:fixed that places it according to viewport
You can have an expandable panel with an opening transition even without any javascript at all. Just use a hidden checkbox and .container:has(input:checked). Make the "summary" its label so that when it's clicked the invisible checkbox is checked and toggles the 1fr for the container as shown in the video.
Or just use the details and summary elements, as were shortly mentioned, and add your CSS to details[open] { … }
@@ErikBlomqvistSwe That was my first take but I tried and surprisingly those didn't work for me. Maybe I did something wrong, idk. It worked in general but the transition did not happen.
Great content and straight to the point!! Thanks for teaching me something new
7:11 Dude. Tip #9 is a game changer!
Love the video, thank you. Learnt new things.
Wow this channel is becoming one of my favorites, amazing content and really good explanation
I love your videos. It's amazing how much one can learn even after working as a web developer for years 😅
One question is that all topic you discuss here are they covered in udemy course?
I am a pro and I don't use that column trick. The images often get sorted in the wrong way. There will be a real masonry soon tho. They just need to implement visual tab order feature first, for screen readers.
I consider myself an expert as CSS. This vid made me feel outdated and back to beginner 😲
Thanks buddy
I have learnt something very useful, thank you
yeah perfect video, i love this video
I use conic radiants to make light pie charts
On tip 8 you talk about JS for adding some custom classes, please take care about the [open] attribute of the details/summary elements to not add unnecessary JS on the web
Awesome! A lot of useful informations here, subscribed!
03:29 It's absolutely different code for different cases.
Your videos are amazing! Thank you very much!
Hey which Visual Studio Code add-ons do you use?
I had actually thought about using a cobblestone design recently but was not sure how feasible it would be.
I went with a simpler rotating marque but its cool that its actually really simple to do.
Magic !!! Thank you so much!
Bro I really love css and I thought that I would not learn anything new but I must admit I was wrong!
2:49 You mean "top right bottom left", not "top right left bottom"
CSS:Constant State of Suffering
2:50 it's top right bottom left
Can you show us your setup, i.e. how you have the browser immediately show results whenever you change your code?
Set files to auto save
@@leroydennisaidoo7968 and for auto refresh what does he use, webpack? 🤔
And then what else, webpack? 🤔
Nice video!
شكراَ لك
the accordion transition problem you can solve much easier, use not height but max-heigth
Thank you! This is valuable info!
Amazing Tipps, Thanks Fabian
Nice!
This is amazing
So the columns property must be used with caution, simple layouts doesn't have problem, but complexes can cause performance issues because of how the propertie column-count works, I'm 2 weeks trying to sove a problem in my work and the cause is the column-count
this is so nice
The columns property stacks stuff, but it's like a newspaper; you read the content top to bottom before starting at the top again.
Masonry has a reading order left-to-right, but each row dynamically squashes upward to fill in gaps.
Using columns won't work if you want your latest content at the top of the page, for example. It also won't work with streaming in assets.
I feel like you probably know that, but it's important to say, so you're not fooling people into thinking that masonry layouts natively exist, because they don't.
I failed on Tip #1. Simple image viewer. I see the border when page refreshes, but then image expands past the border, thus hiding/covering it. Will keep trying.
width: 1100px;
height: auto;
border-image: linear-gradient(to right, #0066ff, #ff32d6) 1 / 3px;
After a good night's sleep, I got it. Needed to add padding.
thank you so much for making informative videos ♥️
Lun dev is fkin underrated I love his videos
When i saw the thumbnail, i thought you brought me a timely solution to an issue I'm having, but it's not the case 😅
I'm trying to have three horizontal text blocks across the top on desktop viewing, but have them align vertical when the window is made smaller/when viewing on mobile. Can anyone make any suggestions?
Grid will swap to vertical if i specify the box size by pixels (okay, but I'd like 1, 2, or 3 images to fill up a given space), and trying out the columns has my boxes melding over one another when i change the window size
Such a nice video, well done boss ❤
border-radius wont take any effect if border-image is used !!
Clip path to the rescue?
Amazing!
Your example with columns is naive. The thing about a proper masonry layout is that it's still read from left to right, then top to bottom. Your order fills a column from top to bottom, then left to right. This especially matters if you try to add more items in dynamically, then you can't just scroll down to see the new stuff.
Also you said inset was shorthand for "top, right, left, and bottom", but that's the wrong order. It's "top, right, bottom, left".
great mashallah i leart from you so meny thing thanks alot
Pls make a playlist on DOM manipulation
congratulation
Great again!
Lun Dev you and Kevin, three channels for CSS i like and follow
Awesome 💯👌
Inset-0 m-auto 🥵
Awesome! 👌🤩
very usefull tips
Good
In Tip #7. You can use the property: interpolate-size:
allow-keywords; then when you Click on the element give it a height: auto;
That's not fully supported yet
Bravo
wow, thanks for sharing
The thumbnail is outrageous; suggesting grid is for noobs and columns for pros. Very different layout mechanisms, solving clearly different problems.
Excellent rage bait. Great content. 👍
tip #7 is actually awesome!! I still don't know why the f*** we can't transition height into auto
PS: #10, I didn't know you could animate variables 🤯
Filter: drop-shadow is WILD lol
100 CSS PRO Tips and Tricks you NEED to know 🙌🙌😘😘💕💕
About the tip #7, there's a new way to animate the auto value with no javascript.
.container{
overrflow: hidden;
height: 1.5rem;
transition: height 150ms ease;
...
interpolate-size: allow-keywords;
}
.container[open]{
height: auto;
}
And that's it! but of course, the interpolate-size property isn't widely accepted yet for the browsers, at this date it has 44.68% of acceptance (:
Btw, I loved tip #9!
Only works on Chrome
Superb
for tip 1 me using box shadow
Bro how to use inset ?
Every pro was once a noob😊
how to give the border-image some radius?? doesn't work with border-radius
Great
Please launch JavaScript course
8:40 exactly 💯 :(
nice
pure gold video, cant explain more usefull things in less time, no possible
Big don came to TH-cam who is very passionate to build and teach coding every one who want to become a professional in this field...
Good work, make complete video on full stack web development .
Love from Pakistan, I can not speak English but l like so much your videos as well as your coding 2 go channel. By the way, your channel is gift for me to learn coding in my life, your videos and your coding level on the next level, before watching this video, I would say that you have a great experience Fabian Sir...
Thanks for this amazing and informative video...
Columns has been around since the early days of CSS? No, not even close. Firefox and IE introduced it in 2012, Chrome in 2016. CSS is from 1996.
Chrome had Flexbox (prefixed) since 2010, Firefox (prefixed) since 2007.
Also do not build a custom accordeon using JS. Always use the checkbox-hack for such things and leave JS out. This way, users can already navigate your site, even if the js is still loading (hello mobile data)
Bring js
any body knows how to make border image circular?
its always in square no matter what i do
Sadly in Safari the margin-bottom inside columns is not working
If only all users were using a modern browser....
These tips all works on 90% of browser that's considered acceptable as a developer
6:23 cmon man just use max-height
lun dev is fking genius
Thomas Frank Martin Scott Robinson Timothy
Man, CSS is horrible
What happend with you voice? Not cool
Damn rasist much? He's always sounded like that
I WISH I DIDNT USE A WYSIWYG BUILDER AT MY JOB I WANT FREEDOM LOL