Like yours "...this should work..." and a second of tension before it finally works. That let us know you're a human just like the rest of us. The magic of CSS.
@kikkym85
4 жыл бұрын
I really like that about him too. Also very easy to follow
@facundocorradini
6 жыл бұрын
man this is seriously one of the best channels on web development. Just a sidenote for your tooltips example: transitioning the position (such as bottom, left, etc) is resource intensive; you should rely on transforms whenever possible, as they can be GPU accelerated. In this case, transform:translateY would do the trick you were looking for. Or even much simpler, using "transform-origin:bottom;" would achieve the "growing from the text" effect in a much more efficient way. Cheers!
@KevinPowell
6 жыл бұрын
Yeah, someone else pointed the same thing out, it was a complete oversight on my part. I got lazy :\. Thanks for mentioning it though! Another thing to be more careful with going forward.
@KevinPowell
6 жыл бұрын
Also, thank you so much for the high praise. There are some other good web dev channels out there, so I really appreciate the sentiment!
@joeldcanfield_spinhead
5 жыл бұрын
I like simpler, but I'm way fuzzy on some of these effects. Could one of you two gents show exactly where to put the "transform-origin: bottom" and which other lines of code to leave out? I'm putting together a bunch of code snippets to study in order to get my head around this.
@laplasparadox3138
4 жыл бұрын
saved
@noajelsch6945
2 жыл бұрын
Hello, I hope I understood what you meant. I don't know if the bottom and left attributes needed to be changed but I still used transform-origin, that I didn't know about and it worked! Thanks :) If some people want to have the code snippet for that (which I don't guarantee the quality ^^), here it is: a[data-tool-tip]::after { content: attr(data-tool-tip); background-color: $clr-gray; padding: 1em 3em; color: white; border-radius: 8px; font-size: 0.8em; display: block; position: absolute; bottom: 100%; left: 0; white-space: nowrap; // allow to remove the wrapping transform: scale(0); transform-origin: left bottom; transition: transform 0.2s; } a[data-tool-tip]:hover::after { transform: scale(1); }
@jeromesnail
4 жыл бұрын
"I hope you learned something", yes, I just learned that I know nothing about CSS ^^
@mtiive3598
3 жыл бұрын
Same lol
@rakeshkumar-zr8du
3 жыл бұрын
@@mtiive3598 Same lol lol
@frostag4821
3 жыл бұрын
Don't wprry.. nobody knows
@sumukhasureban8249
3 жыл бұрын
true 100%
@jonathan-3008
3 жыл бұрын
You probably know more than you think because the dunning Kruger effect
@AndresNaulaB
4 жыл бұрын
I'm so glad I found this channel. I'm a backend developer and I know almost nothing about the capabilities of CSS. This classes are amazing! New subscriber right here, you got me pumped to learn
@D3ADPIX
2 жыл бұрын
As a Jr front end dev, this has honestly been the most enlightening CSS tutorial. Was working on editing list styling on something where I don't have access to the HTML and this is a godsend!
@TheDesignCreative
5 жыл бұрын
When you did the scale effect on the hover I almost wet myself. I never thought to use something like that to hid and display stuff. I would have defaulted to JavaScript automatically
@sweettoy3824
3 жыл бұрын
I, too, have a fetish for code that works.
@yildirimanil
6 жыл бұрын
This one is one of the most instructive videos I've seen on KZitem about CSS. Definetely worth to watch every part. Many thanks for the effort. I feel like I've found a treasure. We are so lucky to have you on KZitem. (writing a comment to a video first time in my life :) )
@KevinPowell
6 жыл бұрын
Thanks so much for the kind words Anil, and really glad that you enjoyed it enough to leave your first KZitem comment! Thanks for taking the time to let me know how much you liked it :)
@lathifahnda7821
3 жыл бұрын
me too!! luckiest recommendation on youtube :')
@JoolsParker
3 жыл бұрын
I don't understand how 44 people have disliked this video - literally, what is there to dislike??? Kevin's videos couldn't be improved on - pitched perfectly with almost every detail and question explained.
@edwardholmes91
3 жыл бұрын
Wow! Thanks Kevin. I knew of the ::before and ::after selector, but I hadn't realised how powerful they were and you've certainly given me plenty of ideas for using them in the future. I'm grinning from ear to ear at how cool this is!
@MatthewWeiler1984
4 жыл бұрын
I'm so glad I found your videos. I learned a lot so far and these pseudo elements are a great addition. I just added a ::after to a project I'm working on and I was able to get rid of some useless markup making my code much cleaner :) Thank you
@capsey_
Жыл бұрын
Small additional tip: If you don't want your link tooltips to be clickable along with the link itself, you can add `pointer-events: none` and now it is only visual
@MartinHAndersen
5 жыл бұрын
I just realised how little I know about CSS (-: I really love your teaching style
@mmazatae
3 жыл бұрын
Kevin, I like when you explain the reason of doing this or that step and why. I do appreciate the efforts you have put in your videos.
@GrantHawkey
6 жыл бұрын
Man, I've been working with CSS for 15+ years and had not come across these CSS3 rules before - so thanks heaps Kevin!
@KevinPowell
6 жыл бұрын
So happy that I've been able to help out a little Grant! CSS has so many amazing properties that go under the radar it's crazy. Some of them are more useful than others, but it's crazy how many there actually are! One benefit of having this channel is I get to discover a lot of them when doing research for videos :)
@X5gYVzwfLEMUX1H6z3eoJm
4 жыл бұрын
This tutorial is what i've been looking for! Very clear and easy-to-understand for a non-techie like me to understand what i can do with pseudo elements for my design. Awesome!!
@seemsas
6 жыл бұрын
Thank you. I didn't realize the power of sudo elements. Very interesting and a big field for creativity.
@KevinPowell
6 жыл бұрын
Yeah, we can do some really awesome things with them, two of which I'll be looking at next week :)
@develscrapper
6 жыл бұрын
i understand (as coming from linux) same as you: 'sudo element', but i think its just Kevin Powell's pronunciation? I think it should say "Pseudo element" ... + nice voice but he swallows letters while speaking. Which makes it really hard to understand for non native English speakers as i am.
@seemsas
6 жыл бұрын
haha, thanks for the correction :)
@KevinPowell
6 жыл бұрын
I didn't even realize he'd spelled it wrong, lol. Sadly in this case, it's English being English and the 'P' is silent, so it actually is pronounced the same as 'sudo'.
@thiagovilla970
6 жыл бұрын
Yeah. In Portuguese, for instance, the "p" is plosive and non-silent, i.e., it is pronounced loud and clear. It varies with language.
@prathameshtakane7354
3 жыл бұрын
in first 9 minutes i learned so many thing i did not knew about css, im so glad i found your channel, every top you discuss and demonstrate makes perfect sense and i understand it very quickly, thank you kevin.
@igordasunddas3377
Жыл бұрын
This is definitely my favorite CSS channel.
@akariskk4065
6 жыл бұрын
I am quite a beginner and now feel too thankful that I found your channel! Your lessons are always so resourceful, intensive and helpful. Still cannot believe those videos are free! I always look forward to any upcoming videos from now on! Thanks a lot!!!!!!
@KevinPowell
6 жыл бұрын
You're very welcome! I'm super glad that they've helped you out 😁
@simenl1289
3 жыл бұрын
Thank you so much for this video! I needed that content: attr(data-tool-tip) for my project, but didn't know how to do it!
@luiscolome75
5 жыл бұрын
OMG!! Kevin one of the best videos about ::after and ::before. Thanks million for all the info. I'm gonna watch it again an put some of the content in practice today.
@NeroIvanY
6 жыл бұрын
So useful tips! You make all this wierd pseudos look very easy to understand! Will definitely use them more confident now. Thanks a lot, Kevin!
@KevinPowell
6 жыл бұрын
Glad that they're easier to understand now Ivan!
@mgltm9963
2 жыл бұрын
u got a subscriber best person on youtube coding community that actually cares to talk about minor to major things in css. appreciate ++
@brennaharden7354
4 жыл бұрын
Recommending your videos to everyone in my class- I learn SO much from your explanations. I have to understand the 'how it works' to really internalize these tools... thanks so much!
@Escko
8 ай бұрын
Thx Kevin , these 2 videos will be extremely influential in my future cssing. Awesome job brother. ❤
@tubespring
3 жыл бұрын
Thanks for showing how much can be done with pseudo elements.
@SimonFabcic
Жыл бұрын
OMG, so many new things in one video :O I have so much more to learn :) Nice job!
@abubakarwaqas9807
3 жыл бұрын
@Kevin Powell you are awsome, I have never seen css pattern like you have wrote. I have seen your many videos and learn too much to you. Again thanks to you to deliver too much costly knowledge freely. Thanks
@tan.435
3 жыл бұрын
That quote....i saw them on so many websites i didnt even knew it was that easy ..thx
@gusnwosu
4 жыл бұрын
Very glad to subscribe and go to Patreon for this channel. Everything I have seen here is more than gold. Thanks, Kevin, and keep doing this. You are really good at it!
@scorpio2t
3 жыл бұрын
Just learned about before and after from checking out csszengarden, these two videos are awesome! thanks for making these
@sbtoolman12123
2 жыл бұрын
I loved the video but realized it is WAY advanced for me i am just learning about css, so i need to watch your easier stuff. Keep up the GREAT work! Can anyone suggest things i should work on first?
@TheDevilscrap
2 жыл бұрын
No comments...perfect one, thanks so much for this videos!!!
@RainOnline
4 жыл бұрын
its the voice and the tone that makes my brain focus 100% to his explanations
@reginafatimagibson
5 жыл бұрын
Congratulations! The best channel on web development!
@CRJakaAnfer
2 жыл бұрын
So good for a beginner like me to realize how pseudo elements work, thank you!!!!
@zariachenshui7386
Жыл бұрын
This is SUCH a helpful video. Thank you so much for your time and shared expertise. I love that you explain each step as you're doing it, and that you start simple and ugly and build into complex and beautiful.
@josseramirez3752
6 жыл бұрын
I was all badass suggesting javascript to count the number of divs and then appending the numbers, and another dude posted 5 lines of CSS that would do the same, I was like, no way, but it worked, so now i'm re-learning CSS and see what other advanced stuff can offer, thank you, great channel.
@KevinPowell
6 жыл бұрын
No problem Josse! There are a lot of unknown little tricks and stuff that you can do with CSS, hopefully, I can undig a few more too :). If you've got any questions or suggestions, let me know!
@OLDACCOUNT_notfireman
2 жыл бұрын
Sorry if I’m 4 years late, I’m very fortunate to found this hidden gem of the internet. Absolutely great content! I build websites and I’m always confused on & ::before elements, you just earned a subscriber.
@mohamadtabbakh9887
2 жыл бұрын
Ah man. I feel like such videos are waisted on my small brain😢. It's too much information for me. I actualy saved this video on bookmarks bar so that I can revisit it over and over. Great work Kevin and I wish you the best!
@jeffdickey
5 жыл бұрын
I've been doing web dev since well before PHP was a thing, and this video scratched two of my longest-standing "how the *foxtrot* do they do that?!?" off my list. Up to now, I'd write code (Sinatra, Django, Phoenix) to generate the HTML from a template _just to get these effects._ No more. Thank you!
@KevinPowell
5 жыл бұрын
So glad that the video helped!
@vertigoz
5 ай бұрын
6 years... It's like a fine wine, it gets better with age! ;)
@kushaldave2382
4 жыл бұрын
Learned CSS Counter looking cool & lots of use case... Thanks a Lot
@ecstaticcreed
4 жыл бұрын
The thing you did with the quotes was very beautiful. And thanks for your awesome tutorial. How could I not discover your channel for so long! Once again awesome tutorial. Please keep it up and yeah! I followed you on Instagram.
@teriyakov
5 жыл бұрын
I normally do server side tinkering but really enjoying this. it's like magic being revealed to me, haha. I didn't know i had this much power at my fingertips. Cant wait to craft some not-so-ghastly UIs soon. Thanks
@iselaregain9301
3 жыл бұрын
WOW Kevin!!! Your videos are amazing filled with great information!!
@KevinPowell
3 жыл бұрын
Thank you!
@nizamuddinshaikh3185
5 жыл бұрын
There is so much you can do with the help of ::before and ::after! Thank you very much for sharing
@Nadia-wu9hk
3 жыл бұрын
I didn't know that you could do all that with ::before and ::after! Thank you!!
@vijayrawat09
5 жыл бұрын
I came here to clear my confusion but now I have learned a bunch of new shitty things which is unbelievable.
@bassemkhozam
6 жыл бұрын
Great tutorial, and definitely one of the best KZitem channels. thanks a lot Kevin.
@HenningBerggren
4 жыл бұрын
Nice speak, nice speed, very good work - thanks!
@nauni07
2 жыл бұрын
All of your content is awesome....best in web development
@nikhiltyagi1080
6 жыл бұрын
VIDEO REQUEST! Responsive image gallery with lightbox (modal) effect, dark overlay, next previous buttons, image title and description with each image. Coded with vanilla js or jquery but without any plugins or libraries.
@KevinPowell
6 жыл бұрын
I have it on my to-do already! I'll get there one day, but might be awhile!
@jesseshugart
6 жыл бұрын
Jquery is a library.
@RavindraSDhande
4 жыл бұрын
This video showed me first time real power of css and the way you teach i am starting to gain interest into css power. Thank you for this fantastic video. Please suggest me how to learn css right way as good as you. Suggest us from where.
@GingerKiwiDev
2 жыл бұрын
This would be a good way to style a menu page for a cafe or restaurant - especially one that has multiple different categories.
@lakshaynz
4 жыл бұрын
Thank you, I have been coding for some time now but I'm not so great at css, these videos help a lot
@mayuu_
2 жыл бұрын
Merci beaucoup pour ce tutoriel, bien que ce soit en Anglais tu expliques mieux que certain tutoriel en Français !
@NoCrispin
6 жыл бұрын
I really like your videos. I like that you're explaining how to use this stuff and also why one would want to use it.
@KevinPowell
6 жыл бұрын
Glad to hear that Tim, it's great to know that there are so many people out there who really want to understand the why behind things!
@Furki4_4
Жыл бұрын
this is getting more exiting
@yourfriend547
4 жыл бұрын
Thank you, it was explained very clearly and not too fast. I am just starting out on CSS.
@KevinPowell
4 жыл бұрын
Glad it was helpful!
@KamelJabber1
6 жыл бұрын
I strangely can't stop watching these. GG!
@KevinPowell
6 жыл бұрын
Glad you're enjoying them!
@arraybytes
2 жыл бұрын
I hope you never give up teaching this very annoying CSS thing. I have learned more from you in a weekend than I have learned in 2 years.
@KevinPowell
2 жыл бұрын
No plans to stop any time soon, specially with all that's coming to CSS! Glad that you're enjoying my content :D
@shirleynweke310
2 жыл бұрын
wow ! I love the way you explain everything, thanks
@anawhite2562
4 жыл бұрын
You are quickly becoming my favorite, goto instructor.
@petarkolev6928
2 жыл бұрын
Kevin, you amaze me with every video!!! You are my CSS God :D Thank you so so much for providing us wish such precious knowedge ❤❤❤
@norm_olsen
2 жыл бұрын
I recently stumbled upon this channel and subscribed! This content is freakin' GOLDEN! Thank you so much for making these types of clear, easy to understand videos! I now have a much better understanding of how these pseudo selectors works! Kudos!
@hoangtronglap2015
5 жыл бұрын
another awesome new stuff I 've just learned from your tutorial, Kevin! keep it up and thanks a looooot!
@dr__ey
2 жыл бұрын
thank you so much for this video Kevin, it helped a lot
@carolmckay5152
5 жыл бұрын
Thank you so much for the counter demonstration, reading about it and seeing it implemented are two very different things. I hope to have call to use it some day.
@kristianulvund4274
4 жыл бұрын
Great video, Kevin! 👏🏻😁
@wonga07
6 жыл бұрын
Thank you Kevin. I'm learning so much from your tutorials!
@KevinPowell
6 жыл бұрын
Awesome Stephen, so glad to hear that :)
@beyon-limits
2 жыл бұрын
The lesson was great Mr Kevin, and if you can eliminate a little bit the extra details the video will be shorter and much better.Thank you.
@kieran2347
3 жыл бұрын
Hey Kevin this really is an amazing video thanks for taking the time to do this. I didnt know how to use ::before / ::after and now I do.
@brucemariga3909
3 жыл бұрын
This can de cool when creating a textbook like list for headings, chapters and sub-headings without needing to nest lists
@mrz1764beatle
2 жыл бұрын
Great, exactly what I needed. TXS !🚀
@kisanb
5 жыл бұрын
Kevin, one can add sub ol between main ol and update css li to li::before { counter-increment: ordered-list; content: counters(ordered-list, '. ') ' '; font-size: .8em; color: $clr-red; } then the sub ol will start numbering 4.1, 4.2, 4.3 if the ol is inside 4th li.
@KevinPowell
5 жыл бұрын
That's awesome, thanks :)
@bryanyien
4 жыл бұрын
I really learn something! Kevin Thank you so much !
@nishad3445
5 жыл бұрын
You sir are absolutely top notch. Simply the Best Css explainations I've seen
@mustafaalawad2667
5 жыл бұрын
I don't understand why 13 person not like this video!!!! thanks alot for everything, that' awesome *_*
@KevinPowell
5 жыл бұрын
What's KZitem without a few haters? 😂
@mustafaalawad2667
5 жыл бұрын
Kevin Powell 🤣🤣🤣
@mustafaalawad2667
5 жыл бұрын
@@KevinPowell The purpose I saw this videos was, I have a slider images and each image have a description and button and these in div, I want this div come smoothly in my image. and I made the parent position: relative; and the description div is position: absolute; but how can I have this delay and animate every times the image come. I hope you can Helpe me and Thanks in Advance
@carlosrangel4500
2 ай бұрын
Awesome content, I'm come from CSS Demystified :)
@jenniferward6821
4 жыл бұрын
Agree he is best on web just focus on Kevin
@ssigitas69
3 жыл бұрын
When you are doing, looks perfect. But I didn't understand nothing, almost :( especially about counter. I need to learn more css
@rakibahmed-tr6mf
4 жыл бұрын
too much to learn. I thought I know css. love and respect...
@ZeusMcKraken
5 жыл бұрын
Amazing css instruction. Great video. You got me with that box-sizing move 😂
@KevinPowell
5 жыл бұрын
Hah, awesome :) Glad you enjoyed the video
@botlapatinarasimha8215
5 жыл бұрын
i have learn best class today on this video.
@johnm4141
5 жыл бұрын
man your tutorials are amazing
@surajitdas94
6 жыл бұрын
Learned a ton. Thank you so much! lots of love.
@netking767
4 жыл бұрын
MIND.BLOWN!
@omyeole7221
6 ай бұрын
Nice video. I loved it. Thx for sharing.
@sororbudwiser
6 жыл бұрын
Great examples on how to use the pseudo elements, Kevin ;). Though, I would like to ask a couple of questions: 1. When would it not be wise to use pseudo elements like these and others in a website? 2. Why would you use pseudo elements if you can do the same with regular html and css? Thanks.
@KevinPowell
6 жыл бұрын
We'll see a bit more on the next video (coming out this week). For the most part, it's when you want to add simple things without adding markup, like design elements, or a counter, or even those icons. It's nice that I can have icons added automatically after links, instead of having to remember to do it each time.
@SebastianBernhardtz
6 жыл бұрын
Woow that is awesome!! Thank you very much, I learned something new from you again! ;)
@nitinrachabathuni4025
3 жыл бұрын
this is amazing, thnks KP
@udaykulkarni5639
4 жыл бұрын
Please keep uploading brother.. You got some serious skills.. You are a Savior. Thanks again.. Do you have a udemy course?
@KevinPowell
4 жыл бұрын
Not Udemy, but I have one on Scrimba - scrimba.com/g/gresponsive
@SparklesBohanson
5 жыл бұрын
Kevin, again ..mind === blown
@vivekvanga737
6 жыл бұрын
your video are really life changing... Thank you Kevin..:)
@mokmok4986
4 жыл бұрын
This video is amazing !
@ednewcome
2 жыл бұрын
Brilliant stuff!
@danielbocelli
5 жыл бұрын
Super, super informative! Can you touch upon pseudo elements and accessibility? Aria-labels? Thank you.
@KevinPowell
5 жыл бұрын
I'll be doing some videos on accessibility soon!
@happyfreeky
4 жыл бұрын
Great tutorial. But I went through your Codepen code and could not find out how you linked to any Font Awesome CSS file. I do not see it in your video description above, either. Any advice?
@Allformyequine
6 жыл бұрын
I love this THANK YOU!!! My hero of the day!! You rock!
Пікірлер: 477