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
@daniellindegren11823 жыл бұрын
Yeah, that was a new one for me too.
@yenumulasrinivasareddy58253 жыл бұрын
That's a new one for me too..
@-leovinci3 жыл бұрын
Yeah, I see it the first time, I used z-index as well...
@vinnym94793 жыл бұрын
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......
@simonswiss3 жыл бұрын
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 👍
@DevMadeEasy3 жыл бұрын
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!🙏
@gwemula3 жыл бұрын
You blew my mind again with these tricks! KP, you’re the man!
@T0NYD1CK3 жыл бұрын
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.
@Rallosz3 жыл бұрын
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!
@maandesai523 жыл бұрын
THANKS FOR MAKING SUCH INFORMATIVE VIDEOS KEVIN !!!!!!
@bikinglikebecker Жыл бұрын
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
@vasyaqwe20872 жыл бұрын
I keep coming back here, this video is so helpful. Thanks, best teacher
@iDATUS3 жыл бұрын
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!
@chhavimanichoubey94373 жыл бұрын
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.
@benja-min15883 жыл бұрын
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.
@rickardelimaa3 жыл бұрын
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)`.
@KevinPowell3 жыл бұрын
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... 🤔
@benja-min15883 жыл бұрын
@@KevinPowell I must have missed those, my fault!
@ronpalmer726010 ай бұрын
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.
@westernpigeon3 жыл бұрын
i was just doing research on ::before and ::after and you posted this. THANK YOU
@capellaguitar3 жыл бұрын
Man, you're just amazing! I've been learning so many new things thanks to you, so: thank you! Cheers from Rio!
@vukkulvar97693 жыл бұрын
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.
@Darkray2013 жыл бұрын
Wow that were some great tips! Nice doubletime at the end 😂😂 Have a nice weekend, Kevin 😊👍
@AaronGrogg3 жыл бұрын
Love the filter: blur(), especially for the :hover!! :-)
@passioncorners3 жыл бұрын
Always learning something new with Kevin !
@eliasgarcia11463 жыл бұрын
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!
@LorenHelgeson3 жыл бұрын
Thanks for this. A big fan of these two pseudo elements, and always looking to do more with them.
@bySterling2 жыл бұрын
Fantastic tips and styles!! Thank you KP sir 🙌🏻
@shivansh9013 жыл бұрын
Awesome content Kevin, thanks a lot.. that gradient border looks so awesome.. yes I'll steal it 😌
@viyanmd1183 жыл бұрын
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
@alem29883 жыл бұрын
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.
@HuoShengChiou3 жыл бұрын
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 :)
@giocaonguyen3 жыл бұрын
Isolation is really cool. I'd never known it before. Thank you!
@GauravKumar-ue7nz3 жыл бұрын
Thank you Kevin 😃, Last one was Coolest.
@_PixelNinja3 жыл бұрын
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!
@evanhardek29943 жыл бұрын
Love the shirt man! Also a very helpful video keep it up!
@CarAudioInc3 жыл бұрын
you production quality looking fire!
@KevinPowell3 жыл бұрын
Thanks!
@truvc3 жыл бұрын
`isolation: isolate`!! I'd never seen that before. Love it!
@chriskasatka20953 жыл бұрын
CSS Tricks and Kevin are the GODS of CSS.
@ledgentai12273 жыл бұрын
Brilliant teacher! Thank you Kevin!
@minhchau3594 Жыл бұрын
I love your works, thank you
@boy3m3 жыл бұрын
I'm glad I stumbled upon your channel. Cool stuff -> subscribed.
@genesdada7045 Жыл бұрын
wow! men powerful css tips (mix-blend )mode beautiful sir.
@akramdahmani72143 жыл бұрын
Great content like usual, you're the GOAT!
@sovereignlivingsoul Жыл бұрын
good video, i am always fighting to get my images setup properly and i haven't done much with mixed blend mode
@pushkaryadavin3 жыл бұрын
Came to your channel for the first time. Great content 😊
@KevinPowell3 жыл бұрын
Welcome!!
@zachjensz3 жыл бұрын
Ah yes, text is the king of css
@andreaskarz3 жыл бұрын
Wow, I love it -- I will checkit out for my next project
@Turabbo3 жыл бұрын
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.
@@KevinPowell Wow I've never heard of that term before, thank you. 93 percent!
@AlBenChris893 жыл бұрын
Helpful video, awesome shirt!
@evolutionxbox3 жыл бұрын
isolation css is a new one for me
@2222974Vairus3 жыл бұрын
Great video. Now I do not need to edit my images manually with a dark overlay for text visibility.
@imviratpandey3 жыл бұрын
U r the best in css love from India 👍
@truvc3 жыл бұрын
if you have `inset:0` you don't need to declare width and height. I love trimming code down to just minimum necessary.
@simonswiss3 жыл бұрын
Love the t-shirt! 🤣
@AbhinavKulshreshtha3 жыл бұрын
I had no idea what "isolation" was. Now i have to explore it.
@karsyz10 ай бұрын
That shirt is dope!
@MeDoGAMERS3 жыл бұрын
Basically brilliant!
@PapaG-01013 жыл бұрын
Wow, Not only school'n people in code but design! That was very informative! Thanks eh!
@picool133 жыл бұрын
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 😁
@johnkeck3 жыл бұрын
Kevin, *you* are awesome!
@codingchannels41033 жыл бұрын
With first use case isnt using multiple background much simpler option?
@MosDev__3 жыл бұрын
love your shirt !
@MrSuprashadow3 жыл бұрын
Wow! Thank you.
@henkiet78443 жыл бұрын
Kevin, will you do a video on input type range styling ?
@KevinPowell3 жыл бұрын
My one from last week would work for changing the color of it. I don't have anything that involves more custom work though.
@amirshamekhy7673 жыл бұрын
Yooohooo king of css new videooo
@yashkamath99693 жыл бұрын
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
@KevinPowell3 жыл бұрын
Oh, never thought of making that public... hrm, I'll look into getting it up :)
@yashkamath99693 жыл бұрын
@@KevinPowell Ohk. By the way love your content 🙂🙂
@pablosantamaria8246 Жыл бұрын
Is "Hello my friend and friends" what he says at the beginning of each video?
@srgberni2 жыл бұрын
What is the reason of declaring 'inset: 0', isn't it 0 by default?
@TobiasBechtleFotograf3 жыл бұрын
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?
@TobiasBechtleFotograf3 жыл бұрын
nvmd, just my removing the isolation of the parent element it goes behind if ut has z-index: -1
@genesdada7045 Жыл бұрын
These content its so sweet.
@sonicseaweed3 жыл бұрын
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? 😮
@wendysburgers4326Ай бұрын
Hiw to use this when Radio Button click and show specific Div containers
@MyDistortedWorld3 жыл бұрын
Nice t-shirt dude
@shecodes946233 жыл бұрын
you are dope, love your energy... thnaks for the awesome content
@BeansEnjoyer9113 жыл бұрын
That shirt speaks to me on a level that no shirt ever has
@andrewrea27993 жыл бұрын
Super cool 😎 tricks
@leomonz3 жыл бұрын
can you do css part, thank you
@cryptolicious37383 жыл бұрын
so nice! ❤ this video
@commelinales2 жыл бұрын
Thank you
3 жыл бұрын
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).
@KevinPowell3 жыл бұрын
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.
@XxObserver3 жыл бұрын
"Alright Kids, next lessons i'll show you how to replace Photoshop by using CSS3 pseudo-Elements and a peeled banana." - Kevin Powell
@savankumar03 жыл бұрын
Thanks man 😀👏❤️
@richardkirigaya82543 жыл бұрын
0:55, "Good coders borrow, great coders steal"
@melania2392 жыл бұрын
I fell in love with Kevin 💕
@jasurmusaev72343 жыл бұрын
thank you a lot
@javierolazaran72273 жыл бұрын
Thanks!
@KevinPowell3 жыл бұрын
Thanks so much Javier!
@AlThePal783 жыл бұрын
rgb(/) takes away rgba way that is something new very awesome :)
@michelaveline3 жыл бұрын
Awesome!!!
@atouchofa.d.d.58523 жыл бұрын
Killer shirt!
@dancarter60443 жыл бұрын
Wow!
@MoayadChannel3 жыл бұрын
Unfortunately, pseudo elements have rendering issues with iOS
@rickardelimaa3 жыл бұрын
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?
@KevinPowell3 жыл бұрын
What type of issues? I can't think of any that I've run into 🤔
@MoayadChannel3 жыл бұрын
@@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.
@MoayadChannel3 жыл бұрын
@@rickardelimaa I mentioned one here.
@atarixle3 жыл бұрын
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.
@atarixle3 жыл бұрын
I found out that in my case this only works with overflow:visible;
@DenisovichDev3 жыл бұрын
Amazing
@NotKyleChicago Жыл бұрын
0deg = to top?
@amandeepchauhan60913 жыл бұрын
6:00 CSS wizard is talking about another CSS wizard
@Stoney_Eagle3 жыл бұрын
Maybe Merlin and the king should do a colab to make something cool 😉
@RobRockTwister3 жыл бұрын
Cool shirt :)
@JohnStrandt2 жыл бұрын
Are you Canadian?
@KevinPowell2 жыл бұрын
I sure am :D
@JohnStrandt2 жыл бұрын
@@KevinPowell it was the "zed"
@robertzeurunkl84013 жыл бұрын
1:40 - Keep in mind that for us Premium KZbin subscribers, your popups do not appear. So, the link in the description is helpful.
@mhdfr3 жыл бұрын
didn't know element can be Isolated too
@kamaboko13 жыл бұрын
Clever shirt message
@GlennPhilp3 жыл бұрын
"Stealing stuff from it"? LOL Wow that was harsh.
@muhammadsiddiqui22443 жыл бұрын
Hmmm ... so, what I learnt is: This can also be done with CSS.
@kestonsmith13543 жыл бұрын
I love absolute positioning , relative positioning is not for me .