I seem to learn a new thing with every video, even if it's not what the video is about! I have never used isolation: isolate; before and have always been left with a mess of z-indexing on different elements. This is going to help so much going forward so thank you Kevin
OMG I've just covered pseudo selectors today in boot-camp. Your tutorials are life saving Kevin. I mentioned to my tutor today you'd tweeted me a solution to an answer about box sizing & my tutor questioned my source.When your name was mentioned he said ahhh the guru, no arguing with his answer......
Hey Kevin Powell {Position: 👑King of CSS} ::before and ::after is not an easy thing for beginners, so great content, as always!!! I just 💜loved it. Thanks for sharing it!🙏
hover on the cards with oversizing i like... TY for sharing.. articulated.. you and network chuck are noticeably my favorite so far as I learn from scratch... i also really like how @ 10:24 when you blur, the color on the right image in bottom left corner really starts to "glow"(shadow), haven't seen color like that since the 80's & the ski bunny jackets. fascinating learning these other things while I get over learning to connect sql to my webpage design for customer application doing a simple delivery scheme.. So far I figure I have to make some tables in the db for taking orders, sending orders & keeping track of orders to their userID(acct)... It's fun learning like getting to know a video game... set goals, save gold.. 8D
Instead of a gradient you could use a drop shadow for the text. Center it, reduce opacity and blur the edges. That way you do not notice it but the text becomes easier to read.
You can use a linear-gradient() of translucent black instead of doing weird things with ::after You can also use text-shadow to only improve contrast around the text background-image allows for multiple images, not just one.
I don’t know if it is you or my personal spy from Apple, but every time I am thinking about css tricks I want to dive deeper in, you are posting a video about one like within a couple of days. I appreciate you man
absooooolut ely awesome content, long time ago I really didn't understand the concept of pseudo-classes but after watching your videos I'm in love with the pseudo concept.
I was just watching this for fun but you solved an issue I had with border-radius. I have images in divs with rounded corners and I struggled finding a way to keep the square corner images from showing past the rounded corners. I found a way and made it work but missed one and needed to fix it. This overflow: hidden solved the issue easily. I have yet to master the overflow feature but this trick is nice.
Thank you Kevin! How about some tips on content: openquote, content: attr() and content:counter(). I found these super helpful recently and wish I knew them years ago! Keep it up man.
attr() is super handy, but I wished I could use it on more than just `content`. Sure, I can style using [attribute="something"], but it would be nice to be able to use something like `color: attr(data-color)`.
I talked about open and close quote not too long ago, and I've done a deep dive on counters in one of my videos in my ::before and ::after series :). Not sure if I've touched on attr() though... 🤔
Thanks for sharing. For the latest point, I may use multiple line box-shadow setting to achieve. But you give me another road to go. I think the gradient border card is also the interesting task for this part :)
Hi Kevin, how are you? I am taking your responsive course and tell you that a few days ago (on August 30, my birthday 😋) google chrome supported the "gap" property since in the course you use margin-left because it was not supported yet xD I am finally learning responsive web with that course is excellent. Thank you so much!
Absolutely loving your channel, learning so much as a beginner! Do you have a repo/ link to any of your code before you start making adjustments please? Personally find it easier to learn and make changes along side you whilst you explain your thought process and can experience the changes on screen at the same time.
Hi Kevin, I know it's not the best for legibility, but is there any chance in the future you would touch upon the subject of Neumorphism? Love your videos and thanks for sharing your knowledge!
You have such a great knowledge on CSS and Im watching your videos since 3 years back even joined some of your free courses too. But Im little afraid for you that your channel will not grow as it should be it's because you have very thorough knowledge on the topic and you are putting everything so this makes your videos complexity level very high which target very specific audience. I can see you love your work and you are enjoying every bit of it through this channel but above what I said is just a thought which needs to be conveyed to a legitimate person like you. Love you Kevin 😁
Fun video dude. Great way to finish a difficult day. Any tips on the cool syntax for RGBA? I've wanted to use it, but I'm hesitant because I can't find literally anything on Google about browser support.
Very nice, i love the last one what also seems to work with images if they are set to background. But how would you then use the blur only behind the box? Bcs in the gradient u do not see it, but if you use the background you see it clearly that the blur is over the gradient itself. Any ideas?
"Alright Kids, next lessons i'll show you how to replace Photoshop by using CSS3 pseudo-Elements and a peeled banana." - Kevin Powell
3 роки тому+1
While it looks fine I find the examples a bit too 'magical' for practical purposes. It makes sense when you have no influence on generated HTML so you use a bunch of CSS to simulate missing elements but I find that is a rare occasion. IMHO its much more practical to just generate additional elements and apply 'normal' CSS to them. It would be interesting if you would provide an additional video where you replicate the effects but where everything is more maintainable and understandable (just an idea).
For me, when it comes to the decorative stuff I'm doing here, I find pseudo-elements sooo much more practical than requiring spans or divs with no content in them, and just a class. If I want a card that has a gradient background, I want to throw that class on there, and it handles the rest. I've done it a lot with testimonials as well, with the open and closed quotes generated through pseudo-elements as they're often bigger and decorative. It takes a bit more work to set up the CSS, but then when you, or a team member, applies the one class, everything comes with it and it just works.
3 роки тому
@@KevinPowell Thanks for the reply. Keep doing what you do. I love your channel.
I only had rendering issues when I used `width: 100%` with `position: absolute`. I needed to use `left: 0` and `right: 0` instead. What kinds of problems did you have?
@@KevinPowell I tried to make a layer over the body with ::after and it wasn’t rendered across iOS devices. However, not all pseudo elements have issues.
Last example is not working for me... somehow this all in locked inside the div-container. I bet, like always I will find the solution after I asked, but before I find an answer myself.
I seem to learn a new thing with every video, even if it's not what the video is about! I have never used isolation: isolate; before and have always been left with a mess of z-indexing on different elements. This is going to help so much going forward so thank you Kevin
Yeah, that was a new one for me too.
That's a new one for me too..
Yeah, I see it the first time, I used z-index as well...
OMG I've just covered pseudo selectors today in boot-camp. Your tutorials are life saving Kevin. I mentioned to my tutor today you'd tweeted me a solution to an answer about box sizing & my tutor questioned my source.When your name was mentioned he said ahhh the guru, no arguing with his answer......
Hey Kevin Powell
{Position: 👑King of CSS}
::before and ::after is not an easy thing for beginners, so great content, as always!!!
I just 💜loved it.
Thanks for sharing it!🙏
Nice use of the `isolation:isolate` property here! It's always kinda hard to teach with real life examples, and that was a good one 👍
hover on the cards with oversizing i like... TY for sharing.. articulated.. you and network chuck are noticeably my favorite so far as I learn from scratch...
i also really like how @ 10:24 when you blur, the color on the right image in bottom left corner really starts to "glow"(shadow), haven't seen color like that since the 80's & the ski bunny jackets.
fascinating learning these other things while I get over learning to connect sql to my webpage design for customer application doing a simple delivery scheme.. So far I figure I have to make some tables in the db for taking orders, sending orders & keeping track of orders to their userID(acct)... It's fun learning like getting to know a video game... set goals, save gold.. 8D
You blew my mind again with these tricks!
KP, you’re the man!
You're going to make me look like a genius with all of these tricks in front of my classmates!! Even the small things you do are so useful!
THANKS FOR MAKING SUCH INFORMATIVE VIDEOS KEVIN !!!!!!
Instead of a gradient you could use a drop shadow for the text. Center it, reduce opacity and blur the edges. That way you do not notice it but the text becomes easier to read.
1:40 - Keep in mind that for us Premium UA-cam subscribers, your popups do not appear. So, the link in the description is helpful.
You can use a linear-gradient() of translucent black instead of doing weird things with ::after
You can also use text-shadow to only improve contrast around the text
background-image allows for multiple images, not just one.
I don’t know if it is you or my personal spy from Apple, but every time I am thinking about css tricks I want to dive deeper in, you are posting a video about one like within a couple of days. I appreciate you man
i was just doing research on ::before and ::after and you posted this. THANK YOU
I clicked the popup link and got a Kevin before and 3.5 years after. not sure if he was relative, fixed or sticky but he was an absolute on the topic!
absooooolut ely awesome content, long time ago I really didn't understand the concept of pseudo-classes but after watching your videos I'm in love with the pseudo concept.
I was just watching this for fun but you solved an issue I had with border-radius. I have images in divs with rounded corners and I struggled finding a way to keep the square corner images from showing past the rounded corners. I found a way and made it work but missed one and needed to fix it. This overflow: hidden solved the issue easily. I have yet to master the overflow feature but this trick is nice.
CSS Tricks and Kevin are the GODS of CSS.
I keep coming back here, this video is so helpful. Thanks, best teacher
Wow that were some great tips! Nice doubletime at the end 😂😂 Have a nice weekend, Kevin 😊👍
Thank you Kevin! How about some tips on content: openquote, content: attr() and content:counter(). I found these super helpful recently and wish I knew them years ago! Keep it up man.
attr() is super handy, but I wished I could use it on more than just `content`. Sure, I can style using [attribute="something"], but it would be nice to be able to use something like `color: attr(data-color)`.
I talked about open and close quote not too long ago, and I've done a deep dive on counters in one of my videos in my ::before and ::after series :). Not sure if I've touched on attr() though... 🤔
@@KevinPowell I must have missed those, my fault!
Man, you're just amazing! I've been learning so many new things thanks to you, so: thank you! Cheers from Rio!
Love the filter: blur(), especially for the :hover!! :-)
Ah yes, text is the king of css
Always learning something new with Kevin !
`isolation: isolate`!! I'd never seen that before. Love it!
you production quality looking fire!
Thanks!
Thanks for this. A big fan of these two pseudo elements, and always looking to do more with them.
Fantastic tips and styles!! Thank you KP sir 🙌🏻
wow! men powerful css tips (mix-blend )mode beautiful sir.
Isolation is really cool. I'd never known it before. Thank you!
Thanks for sharing. For the latest point, I may use multiple line box-shadow setting to achieve. But you give me another road to go. I think the gradient border card is also the interesting task for this part :)
Thank you Kevin 😃, Last one was Coolest.
Awesome content Kevin, thanks a lot.. that gradient border looks so awesome.. yes I'll steal it 😌
Came to your channel for the first time. Great content 😊
Welcome!!
Love the shirt man! Also a very helpful video keep it up!
Hi Kevin, how are you? I am taking your responsive course and tell you that a few days ago (on August 30, my birthday 😋) google chrome supported the "gap" property since in the course you use margin-left because it was not supported yet xD I am finally learning responsive web with that course is excellent. Thank you so much!
Love the t-shirt! 🤣
Brilliant teacher! Thank you Kevin!
if you have `inset:0` you don't need to declare width and height. I love trimming code down to just minimum necessary.
Great content like usual, you're the GOAT!
I love your works, thank you
Yooohooo king of css new videooo
That shirt speaks to me on a level that no shirt ever has
I had no idea what "isolation" was. Now i have to explore it.
isolation css is a new one for me
I'm glad I stumbled upon your channel. Cool stuff -> subscribed.
U r the best in css love from India 👍
0:55, "Good coders borrow, great coders steal"
Absolutely loving your channel, learning so much as a beginner! Do you have a repo/ link to any of your code before you start making adjustments please? Personally find it easier to learn and make changes along side you whilst you explain your thought process and can experience the changes on screen at the same time.
Wow, I love it -- I will checkit out for my next project
good video, i am always fighting to get my images setup properly and i haven't done much with mixed blend mode
Hi Kevin, I know it's not the best for legibility, but is there any chance in the future you would touch upon the subject of Neumorphism? Love your videos and thanks for sharing your knowledge!
Helpful video, awesome shirt!
Kevin, *you* are awesome!
Great video. Now I do not need to edit my images manually with a dark overlay for text visibility.
hey kevin, i had asked this in the your previous video, pls link ur secondary monitor's wallpaper, the one with the logo thing on it
Oh, never thought of making that public... hrm, I'll look into getting it up :)
@@KevinPowell Ohk. By the way love your content 🙂🙂
That shirt is dope!
You have such a great knowledge on CSS and Im watching your videos since 3 years back even joined some of your free courses too. But Im little afraid for you that your channel will not grow as it should be it's because you have very thorough knowledge on the topic and you are putting everything so this makes your videos complexity level very high which target very specific audience.
I can see you love your work and you are enjoying every bit of it through this channel but above what I said is just a thought which needs to be conveyed to a legitimate person like you. Love you Kevin 😁
Wow, Not only school'n people in code but design! That was very informative! Thanks eh!
Basically brilliant!
Thanks!
Thanks so much Javier!
Kevin, will you do a video on input type range styling ?
My one from last week would work for changing the color of it. I don't have anything that involves more custom work though.
In the last example, why were the box corners sharp when he only had the before element and rounded when he had the before and after elements? 😮
With first use case isnt using multiple background much simpler option?
love your shirt !
Fun video dude. Great way to finish a difficult day.
Any tips on the cool syntax for RGBA? I've wanted to use it, but I'm hesitant because I can't find literally anything on Google about browser support.
Everything except IE - caniuse.com/?search=Space-separated%20functional%20color%20notations
@@KevinPowell Wow I've never heard of that term before, thank you. 93 percent!
Nice t-shirt dude
Hiw to use this when Radio Button click and show specific Div containers
Wow! Thank you.
Super cool 😎 tricks
These content its so sweet.
Is "Hello my friend and friends" what he says at the beginning of each video?
What is the reason of declaring 'inset: 0', isn't it 0 by default?
Very nice, i love the last one what also seems to work with images if they are set to background. But how would you then use the blur only behind the box? Bcs in the gradient u do not see it, but if you use the background you see it clearly that the blur is over the gradient itself. Any ideas?
nvmd, just my removing the isolation of the parent element it goes behind if ut has z-index: -1
you are dope, love your energy... thnaks for the awesome content
Thanks man 😀👏❤️
I fell in love with Kevin 💕
so nice! ❤ this video
6:00
CSS wizard is talking about another CSS wizard
Thank you
thank you a lot
rgb(/) takes away rgba way that is something new very awesome :)
can you do css part, thank you
Awesome!!!
"Alright Kids, next lessons i'll show you how to replace Photoshop by using CSS3 pseudo-Elements and a peeled banana." - Kevin Powell
While it looks fine I find the examples a bit too 'magical' for practical purposes. It makes sense when you have no influence on generated HTML so you use a bunch of CSS to simulate missing elements but I find that is a rare occasion. IMHO its much more practical to just generate additional elements and apply 'normal' CSS to them. It would be interesting if you would provide an additional video where you replicate the effects but where everything is more maintainable and understandable (just an idea).
For me, when it comes to the decorative stuff I'm doing here, I find pseudo-elements sooo much more practical than requiring spans or divs with no content in them, and just a class.
If I want a card that has a gradient background, I want to throw that class on there, and it handles the rest. I've done it a lot with testimonials as well, with the open and closed quotes generated through pseudo-elements as they're often bigger and decorative.
It takes a bit more work to set up the CSS, but then when you, or a team member, applies the one class, everything comes with it and it just works.
@@KevinPowell Thanks for the reply. Keep doing what you do. I love your channel.
Killer shirt!
Wow!
Maybe Merlin and the king should do a colab to make something cool 😉
Amazing
0deg = to top?
Unfortunately, pseudo elements have rendering issues with iOS
I only had rendering issues when I used `width: 100%` with `position: absolute`. I needed to use `left: 0` and `right: 0` instead. What kinds of problems did you have?
What type of issues? I can't think of any that I've run into 🤔
@@KevinPowell I tried to make a layer over the body with ::after and it wasn’t rendered across iOS devices. However, not all pseudo elements have issues.
@@rickardelimaa I mentioned one here.
Last example is not working for me... somehow this all in locked inside the div-container. I bet, like always I will find the solution after I asked, but before I find an answer myself.
I found out that in my case this only works with overflow:visible;
didn't know element can be Isolated too
Cool shirt :)
Are you Canadian?
I sure am :D
@@KevinPowell it was the "zed"
Clever shirt message
"Stealing stuff from it"? LOL Wow that was harsh.
Hmmm ... so, what I learnt is: This can also be done with CSS.
I love absolute positioning , relative positioning is not for me .
What