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.
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 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.🎉
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 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 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.
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.
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
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
27 днів тому
Bro I really love css and I thought that I would not learn anything new but I must admit I was wrong!
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.
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 UA-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.
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
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.
The column property really helpful. Definitely gonna be using it
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 love you, the `columns` property is exactly what I was looking for for a project! Thank you!
This is pure gold, thank you.
You don't have to say "like and subscribe" when you drop a bomb like this. Thanks mate ❤
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
I use conic radiants to make light pie charts
This tips are great, thanks, I usually use the max-height property instead of height for dropdown purpose and works well..
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.
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.🎉
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 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.
03:29 It's absolutely different code for different cases.
7:11 Dude. Tip #9 is a game changer!
Love the video, thank you. Learnt new things.
I'm about to get burned at the stake for this CSS witchcraft.
Witch!
Greatest informative teaching... Thanks for the valuable ideas..
Only saw 2 videos by you and already subscribed. Great content!
I subscribed on the first😅his content is super cool
One question is that all topic you discuss here are they covered in udemy course?
I consider myself an expert as CSS. This vid made me feel outdated and back to beginner 😲
Thank you for this video 😊
Great content and straight to the point!! Thanks for teaching me something new
the accordion transition problem you can solve much easier, use not height but max-heigth
Hey which Visual Studio Code add-ons do you use?
I love your videos. It's amazing how much one can learn even after working as a web developer for years 😅
I have learnt something very useful, thank you
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.
Thanks buddy
Wow this channel is becoming one of my favorites, amazing content and really good explanation
Magic !!! Thank you so much!
Your videos are amazing! Thank you very much!
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.
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? 🤔
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
Pls make a playlist on DOM manipulation
yeah perfect video, i love this video
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
Bro I really love css and I thought that I would not learn anything new but I must admit I was wrong!
Thank you! This is valuable info!
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.
Awesome! A lot of useful informations here, subscribed!
Nice video!
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
Amazing Tipps, Thanks Fabian
شكراَ لك
2:49 You mean "top right bottom left", not "top right left bottom"
thank you so much for making informative videos ♥️
great mashallah i leart from you so meny thing thanks alot
2:50 it's top right bottom left
this is so nice
border-radius wont take any effect if border-image is used !!
Clip path to the rescue?
Amazing!
Nice!
congratulation
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".
Lun dev is fkin underrated I love his videos
Lun Dev you and Kevin, three channels for CSS i like and follow
Such a nice video, well done boss ❤
Great again!
CSS:Constant State of Suffering
Awesome! 👌🤩
Awesome 💯👌
very usefull tips
This is amazing
Bro how to use inset ?
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 🤯
for tip 1 me using box shadow
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!
Only works on Chrome
wow, thanks for sharing
how to give the border-image some radius?? doesn't work with border-radius
Superb
Please launch JavaScript course
Inset-0 m-auto 🥵
Bravo
Good
8:40 exactly 💯 :(
Filter: drop-shadow is WILD lol
Great
100 CSS PRO Tips and Tricks you NEED to know 🙌🙌😘😘💕💕
nice
Every pro was once a noob😊
any body knows how to make border image circular?
its always in square no matter what i do
Big don came to UA-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...
pure gold video, cant explain more usefull things in less time, no possible
Bring js
Sadly in Safari the margin-bottom inside columns is not working
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)
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
Thomas Frank Martin Scott Robinson Timothy
lun dev is fking genius
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