I can't believe I get all this value for free! Since I've been following these trainings, my knowledge and skill has increased exponentially. Please keep 'em coming, Kevin.
You know what?... That was the best lesson on pseudo elements. I've been watching w3school like an idiot for 1 week and I still don't know anything. With this tutorial I am completely reborn :)
Kevin, you are my hero. Thank you for explaining this on a step-by-step basis and the reasoning behind every single line. I understand way more CSS even though I've been using it for a long time. That is detailed oriented. These are #valuevideos.
OMG ... came here to have a quick look how to do "pseudo" in Bricks (coming from Oxygen) ... and boy did I stay till the end. A bit overwhelming with all these variables, but certainly it pays off to do it that way. Well worth the effort. Kevin, such a great video to learn from ... THANK YOU.
Such a character, you make tutorials interesting and your manner keeps viewers engaged. From an old school C and C++ developer, its interesting to see how much further they have taken the CSS language. All though the terminology you use is a bit different, like for instance , a variable that holds the value of the name/location of another variable is called a pointer variable. Not that it matters to much. It only helps when your students work in large teams and referencing code structure at a communication level with others in different units. eg. Front end team talking to back end, etc. Thank you for all your hard work in creating this educational source and making it all open source. BIG UP and Kudo's to you in making this available to everyone including those with no income or means to afford this first class resource.
Your style provides tremendous confidence to your audience. I use pseudo elements all day in my day job that has little to do with web design (re: advertisement) but picked up on some really cool ideas. I need a linkable TOC to all your videos/posts that I can reference later on a click. A GearyPT, if you will 😂
It's such a tremendous value for free, Kevin....I can't imagine what's inside the Inner Circle...and now I want to join. Really, want to improve my skills🙂
I have been a member for a while now and consider myself a total Novice. I can't imagine a better community for anyone wanting to learn. Kevin is incredible and seems to attract people of the same spirit and energy. I would recommend it to anyone trying to learn, improve or keep up.
Parametrize everything! A great lesson that I learn with functional programming: it allows you to keep central control & clean code. A great lesson as always Kevin, thanks!
Nice video, Kevin! I guessed how locally scoped variables work, thanks to seeing a lot of them in Frames components 😊 Would like to see a following up tutorial on how you animate this with GSAP. Maybe an advanced InnerCircle tutorial?
Absolutely awesome tutorial Kevin. Overgasted and flabberwhelmed. Really opened my mind to better and more efficient development. Please more indepth and dumbed down tutorials like this. I am sure a lot of us are more of visual learners and we would gain a world of knowledge from these. Thanks so so so so so much. God Bless.
My father always said, "you don't know anything unless you can teach it!" Your lessons are always packed with just great, generous amounts of value, and this one is no different. Your interesting, simplified breakdown, is truly life-changing for older beginners, trying to adopt a new mindset, skill, and knowledge base. Thanks again!
This is such a thorough and insightful tut Kevin - thank you so much! Now I'm trying to figure out how to not blow out my margins on mobile. Media queries?
Great value, I just run into a strange problem with the before-bg variable. No matter what I do, the shape just disappears while the after works just fine with the after-bg variable. Sorry, forgot a closing ; on the previous line.
Awesome dude, thanks! The only thing I was wondering about is why you used custom CSS to style up pseudo? You could simply style everything up by using Bricks' Layout, Background, Transform panels (isolation prop excluded). Essentially, every custom class (including the custom class + pseudo) can be styled up via the Bricks panels. Even the CSS filters. Cheers!
Elementor has the ‘spacer’ widget with gradients effect, and there is a good UA-cam video on it on their channel, and this same effect can be achieved without using a line of code and in minutes. This was unnecessarily complex. Sometimes your videos make me love the simplicity of Elementor more and more.
@@Gearyco It seems you watched the wrong video on spacer. The title of the correct video is ‘Create Vibrant Gradients Background in Elementor’ it uses the Spacer element.
I was like " I CAUGHT THAT ROTATE ERROR" - I've learned more the last 5 months with your videos than i've learned my previous 6 years as a developer... I'm sure people learn more with these small mistakes than just a "robot" talking...
Interesting episode but I don't understand one thing. Why create a local scoped variable? What are the benefits of this? I can achieve the same effect: Create a new section, add the .blur class, copy the css code (like You did in 42:24 but You copy local scoped variables) with before and after functions (which you did 24:48) and paste it into the section with the .blur class deselected - just change the parameters (degree of deviation, color, etc.) .
There was a version of Bricks where they set things to position relative by default. I can't remember if this was one of those versions or not. But then we persuaded them to fix that because it caused so many issues. But absolute elements will also somewhat behave relatively until they're given inset coordinates. I'd have to go back and watch the full video to see what order I did things in to really know.
Another Great video. qq: If you had a huge site that needed 15+ Post Types and 30+ posts per type, would you structure it differently? How would one manage all those post types on the admin side panel? Thanks
Great one! Didnt knew about inset and neither isolation! So that makes it great already, but with the details about the locally scoped variables it even became more clear! So basically i create a mater css file with a bunch of classes like blur, dropshadow and what not, add it into wpcodebox its repository to reuse it where I want as long as I add the vars to the id, im good to go. What more scenarios could be added to the master css file? Looking for a determination for wether I go this route or the acss class route. I guees it has to have a need for a pseudo classes right?
@@Gearyco ok maybe I explained it wrong. In your video you explain that root inside a class is basically the replacement for the class itself. So .blur::after and .blur::before within the class. so I meant that im going with .blur with the vars in wpcodebox and inside the class in the builder I leave the root::before and root::after stuff since that is not relevant for inside wpcodebox right?
Hey Kevin, great job as always. :) I have a question, I followed your tutorial video, but with your css code I always get an overflow on the entire website.: %root% { isolation: isolate; } %root%::before { content: ""; width: 30rem; height: 30rem; background-color: var(--action); position: absolute; left:; bottom: auto; right:; display: flex; z-index: -1; transform: rotate(10deg); filter: blur(70px); opacity: .2; } I really don't know what I'm doing wrong or what else needs to be done to make it work. Best regards
@@Gearyco Ah ok, I should put the hidden on the section, I only tried it with the individual containers. But what's still very strange is that I have to enter the hidden again for mobile even though it was already grayed out. Regardless, it's probably a bug, but entering it later helped. Thank you Kevin for your great support and what you do for the community.
Hi, thanks for the tutorial! But I don't get it to work. If someone has an idea why, I would really appreciate the help. I don't get the pseudo-element to show up in the preview or on the actual site. I have done a new class named: blur. And I have clicked on the pseudo-state to write in the CSS code. Is there something I missed? root::before { content: ""; height: 40rem; width: 40rem background-color: red; display: Flex; position: absolute; }
Kevin I noticed you actually typed out the variable @16:30 like a chump LOL instead of using the Variable Expansion feature. Joking. Great video though
The first version of variable expansion had a bad bug that broke pseudo element strings in the CSS, so I have PTSD. I'm slowly building my confidence back in using the expansion feature in the CSS field. Lmao.
Could someone explain in more detail what Kevin meant by saying "pseudo elements are impacted by what goes around it".? W3 schools say that pseudo elements (pseudo classes) only work on block-level elements. So the height should be dictated by the content and the width dictated by the parent. So how does flex change anything.? Would just like to understand this part of the video.. 11:30 / 49:37
This looked so complex when looking at it on the frontend, but it's actually super simple and effective! Thank you so much for putting out all this content 🙏🏼🤩
Kevin, this is very nice and helpful tutorial, keep going. My wife is gonna divorce me because she said I watch these videos more than I talk to her. :D hahahahaha"
Hi Kevin, I wanna thank you for all the great stuff you are teaching us! I’m also a member of your fantastic Inner Circle Community and it offers an incredible value 🎉 I’ve got a question here. I can’t get the pseudo element to become visible, if I add the class to the image. I’ve tried it in Bricks and in Oxygen… when I take the class to the div which wraps my png, then it works. What am I doing wrong?
perfect 😊 then I got it. I made it through this whole ‘crazy’ variables stuff 😊 with the use of a little chocolate 😂🎉 and now I’m convinced that every project needs it’s pseudo element variables to play around with…😅
Thanks very much Kevin Geary, this is an excellent video and mind blowing. I am currently learning CSS and this video really made me understand better Pseudo (::before and ::after).
Is it that much better from just overwriting only those properties which I need? Like add blur to a new element and then in css do :root .blur::before {color: red}. I don't see much difference, it also has some advantages like no creating of a lot of local variables, no need of remembering them and also they can become a bit hard to read.
Thanks for watching! If you can toss up a like and drop a comment, it's always appreciated!
I can't believe I get all this value for free! Since I've been following these trainings, my knowledge and skill has increased exponentially. Please keep 'em coming, Kevin.
💪🏻
Same here
You know what?... That was the best lesson on pseudo elements. I've been watching w3school like an idiot for 1 week and I still don't know anything. With this tutorial I am completely reborn :)
🙏🙌
Kevin, you are my hero. Thank you for explaining this on a step-by-step basis and the reasoning behind every single line. I understand way more CSS even though I've been using it for a long time. That is detailed oriented. These are #valuevideos.
I'll take a few months off work in order to watch all your videos 😅. Can't stop anymore. So nicely explained and very knowledgeable.
OMG ... came here to have a quick look how to do "pseudo" in Bricks (coming from Oxygen) ... and boy did I stay till the end. A bit overwhelming with all these variables, but certainly it pays off to do it that way. Well worth the effort.
Kevin, such a great video to learn from ... THANK YOU.
You're welcome!
Thanks young man. This was a good lesson. May you be blessed ❤
Mind....blown! You have no idea how much value this one video created!
(Theme song "A whole new world...." currently playing in my mind. Thank you!
Love this - a really simple method of spicing up designs without using images.
Take my Like for living dangerously by running tutorials on your live site! And a huggeee thank you for being this fountain of knowledge!
That was like drinking from a fire hose! Awesome job. Masterfully done Kevin.
Tremendous value. You are right, I have never seen this much in-depth and easy tutorial on Pseudo elements. Thank you so much :)
Such a character, you make tutorials interesting and your manner keeps viewers engaged. From an old school C and C++ developer, its interesting to see how much further they have taken the CSS language. All though the terminology you use is a bit different, like for instance , a variable that holds the value of the name/location of another variable is called a pointer variable. Not that it matters to much. It only helps when your students work in large teams and referencing code structure at a communication level with others in different units. eg. Front end team talking to back end, etc.
Thank you for all your hard work in creating this educational source and making it all open source. BIG UP and Kudo's to you in making this available to everyone including those with no income or means to afford this first class resource.
💪🏻
Your style provides tremendous confidence to your audience. I use pseudo elements all day in my day job that has little to do with web design (re: advertisement) but picked up on some really cool ideas. I need a linkable TOC to all your videos/posts that I can reference later on a click. A GearyPT, if you will 😂
🙏
My CSS IQ just went up a few notches. Thank you Kevin!
It's such a tremendous value for free, Kevin....I can't imagine what's inside the Inner Circle...and now I want to join. Really, want to improve my skills🙂
Come on in!
I have been a member for a while now and consider myself a total Novice. I can't imagine a better community for anyone wanting to learn.
Kevin is incredible and seems to attract people of the same spirit and energy. I would recommend it to anyone trying to learn, improve or keep up.
Parametrize everything! A great lesson that I learn with functional programming: it allows you to keep central control & clean code. A great lesson as always Kevin, thanks!
Dude, you're amazing. I think I love you.
🤭
Nice video, Kevin! I guessed how locally scoped variables work, thanks to seeing a lot of them in Frames components 😊
Would like to see a following up tutorial on how you animate this with GSAP.
Maybe an advanced InnerCircle tutorial?
Absolutely awesome tutorial Kevin. Overgasted and flabberwhelmed. Really opened my mind to better and more efficient development. Please more indepth and dumbed down tutorials like this. I am sure a lot of us are more of visual learners and we would gain a world of knowledge from these. Thanks so so so so so much. God Bless.
🙏
I hit like before I even watch because I know its gonna be gold.
🙌
My father always said, "you don't know anything unless you can teach it!"
Your lessons are always packed with just great, generous amounts of value, and this one is no different.
Your interesting, simplified breakdown, is truly life-changing for older beginners, trying to adopt a new mindset, skill, and knowledge base.
Thanks again!
Love that!
This is such a thorough and insightful tut Kevin - thank you so much! Now I'm trying to figure out how to not blow out my margins on mobile. Media queries?
Overflow hidden usually
Wonderful - incredibly valuable content, thank you Kevin :)
So grateful for your excellent training here! I went through and did everything step by step, and it works like a champ!!
Glad it helped!
Great lesson, thanks Kevin!
My pleasure!
Great value, I just run into a strange problem with the before-bg variable. No matter what I do, the shape just disappears while the after works just fine with the after-bg variable. Sorry, forgot a closing ; on the previous line.
This was absolutely brilliant. Thank you so much for making these videos. Amazing!
Huge value as usual! Really hope you will make a video about your Perfmatter setup for optimization :) Thanks a lot!
Will do!
Super video Kevin - wonderfully explained.
Awesome dude, thanks! The only thing I was wondering about is why you used custom CSS to style up pseudo? You could simply style everything up by using Bricks' Layout, Background, Transform panels (isolation prop excluded). Essentially, every custom class (including the custom class + pseudo) can be styled up via the Bricks panels. Even the CSS filters. Cheers!
It’s way slower and less efficient and less organized.
The portal to a new dimension 🤯
Very nice tut indeed Kev, thanks for your time!
Very welcome
Between Kevin Geary and Kevin Powell that's all you really need to learn about css.
Αmazing!!! Kevin you are a css genius
Just Beautiful !👍 so amazing learning
Tremendous content as always. Thank you Kevin!
My pleasure!
Kevin! This is phenomenal! :)
🎉
Your a good teacher..
I appreciate that!
Another great tutorial, Kevin. Thanks. Can you tell us how did you do the hero bg showing those lines? Is it a jpg or is CSS?
It’s just a repeating pattern image
Elementor has the ‘spacer’ widget with gradients effect, and there is a good UA-cam video on it on their channel, and this same effect can be achieved without using a line of code and in minutes. This was unnecessarily complex. Sometimes your videos make me love the simplicity of Elementor more and more.
The spacer widget would be the absolute worst way to implement this. Horrific for scalability and maintainability.
@@Gearyco It seems you watched the wrong video on spacer. The title of the correct video is ‘Create Vibrant Gradients Background in Elementor’ it uses the Spacer element.
Kevin, would if you also had chapters in the video. Way easierto navigate and when I come back to this look at it again 😊
I normally add them. Forgot!
I was like " I CAUGHT THAT ROTATE ERROR" - I've learned more the last 5 months with your videos than i've learned my previous 6 years as a developer... I'm sure people learn more with these small mistakes than just a "robot" talking...
Love it!
Great Stuff.
Interesting episode but I don't understand one thing. Why create a local scoped variable? What are the benefits of this?
I can achieve the same effect: Create a new section, add the .blur class, copy the css code (like You did in 42:24 but You copy local scoped variables) with before and after functions (which you did 24:48) and paste it into the section with the .blur class deselected - just change the parameters (degree of deviation, color, etc.) .
ua-cam.com/video/pqguxVBa18o/v-deo.htmlsi=eymjcxpl0Ped2aaL
12:00 unsure why absolute works like this. We have not defined anything as relative, so should it not align from the whole DOM instead when absolute?
There was a version of Bricks where they set things to position relative by default. I can't remember if this was one of those versions or not. But then we persuaded them to fix that because it caused so many issues. But absolute elements will also somewhat behave relatively until they're given inset coordinates. I'd have to go back and watch the full video to see what order I did things in to really know.
Great content! Thank you!
My pleasure!
Join inner circle, Kevin needs a new shirt and cap 😅
I’ve got like 12 hats but this one is so damn comfortable!
@@Gearyco no dig. My wardrobe is pretty consistent.
Another Great video. qq: If you had a huge site that needed 15+ Post Types and 30+ posts per type, would you structure it differently? How would one manage all those post types on the admin side panel? Thanks
Depends on what they’re for.
Amazing tips thanks
Happy to help!
Great one! Didnt knew about inset and neither isolation! So that makes it great already, but with the details about the locally scoped variables it even became more clear!
So basically i create a mater css file with a bunch of classes like blur, dropshadow and what not, add it into wpcodebox its repository to reuse it where I want as long as I add the vars to the id, im good to go. What more scenarios could be added to the master css file? Looking for a determination for wether I go this route or the acss class route. I guees it has to have a need for a pseudo classes right?
What you're describing would be globally scoped variables. Those are different.
@@Gearyco ok maybe I explained it wrong. In your video you explain that root inside a class is basically the replacement for the class itself. So .blur::after and .blur::before within the class. so I meant that im going with .blur with the vars in wpcodebox and inside the class in the builder I leave the root::before and root::after stuff since that is not relevant for inside wpcodebox right?
Hey Kevin, great job as always. :) I have a question, I followed your tutorial video, but with your css code I always get an overflow on the entire website.: %root% {
isolation: isolate;
}
%root%::before {
content: "";
width: 30rem;
height: 30rem;
background-color: var(--action);
position: absolute;
left:;
bottom: auto;
right:;
display: flex;
z-index: -1;
transform: rotate(10deg);
filter: blur(70px);
opacity: .2;
}
I really don't know what I'm doing wrong or what else needs to be done to make it work. Best regards
Add Overflow hidden on the section
@@Gearyco Ah ok, I should put the hidden on the section, I only tried it with the individual containers. But what's still very strange is that I have to enter the hidden again for mobile even though it was already grayed out. Regardless, it's probably a bug, but entering it later helped.
Thank you Kevin for your great support and what you do for the community.
Sensei lms ( related to the previous commemt)
Hi, thanks for the tutorial! But I don't get it to work. If someone has an idea why, I would really appreciate the help.
I don't get the pseudo-element to show up in the preview or on the actual site.
I have done a new class named: blur. And I have clicked on the pseudo-state to write in the CSS code.
Is there something I missed?
root::before {
content: "";
height: 40rem;
width: 40rem
background-color: red;
display: Flex;
position: absolute;
}
Raw Images don’t support pseudo elements so make sure your image is using a figure tag.
@@Gearyco Another nugget! Thanks!
Thnx
more gangsta gold.
Kevin I noticed you actually typed out the variable @16:30 like a chump LOL instead of using the Variable Expansion feature. Joking. Great video though
The first version of variable expansion had a bad bug that broke pseudo element strings in the CSS, so I have PTSD. I'm slowly building my confidence back in using the expansion feature in the CSS field. Lmao.
hahahaha..blur... zero control... yeah... I feel called out. lol
yeeeeeeey
Could someone explain in more detail what Kevin meant by saying "pseudo elements are impacted by what goes around it".?
W3 schools say that pseudo elements (pseudo classes) only work on block-level elements. So the height should be dictated by the content and the width dictated by the parent.
So how does flex change anything.?
Would just like to understand this part of the video.. 11:30 / 49:37
This looked so complex when looking at it on the frontend, but it's actually super simple and effective! Thank you so much for putting out all this content 🙏🏼🤩
Glad it was helpful!
Very helpful and informative! Thank you.
Kevin, this is very nice and helpful tutorial, keep going. My wife is gonna divorce me because she said I watch these videos more than I talk to her. :D hahahahaha"
🚨
This training was so helpful! I haven’t used locally scoped variables but am going to in the next project!
You. Know. Your. Shit. That's all I got to say.
💪🏻
Hi Kevin, I wanna thank you for all the great stuff you are teaching us! I’m also a member of your fantastic Inner Circle Community and it offers an incredible value 🎉 I’ve got a question here. I can’t get the pseudo element to become visible, if I add the class to the image. I’ve tried it in Bricks and in Oxygen… when I take the class to the div which wraps my png, then it works. What am I doing wrong?
Pseudo elements don’t work on images. It’s a CSS limitation.
perfect 😊 then I got it. I made it through this whole ‘crazy’ variables stuff 😊 with the use of a little chocolate 😂🎉 and now I’m convinced that every project needs it’s pseudo element variables to play around with…😅
Excellent video. Thanks for such a great technique 👏🏼👏🏼👏🏼
I'm totally going to start doing this with everything, Great technique, thanks for sharing!
Great video Kevin! My collection of CSS notes/concepts/tricks is growing.
Thank you Kevin for sharing those golden nuggets. Such great value !
Awesome tutorial, packed with all kinds of valuable nuggets as always, thank you!
Another golden nugget of dechumpification. 👍
Very very good, extremely handy
Thanks very much Kevin Geary, this is an excellent video and mind blowing. I am currently learning CSS and this video really made me understand better Pseudo (::before and ::after).
You're very welcome!
Is it that much better from just overwriting only those properties which I need? Like add blur to a new element and then in css do :root .blur::before {color: red}. I don't see much difference, it also has some advantages like no creating of a lot of local variables, no need of remembering them and also they can become a bit hard to read.
The variable way is far more efficient and more organized. You’re welcome to try it both ways. Multiple classes is far messier.
Amazing! You always give the best instruction and encourage us to work smarter not harder! Thanks!
Happy to help!
Supercool just what i meed dor the next website!! Thank you kevin!!! Wondering if in inner circle are issues about sensei
Haven’t ever used it :/
Is because a client already is using it , son i have to mantin it. It’s a pretty simple lms that does the job , and its fee open source. Thank you.
This may be a dumb question, but if I create variables outside of the bricks builder window, do I place them on my CSS style sheet or WP Code box?
I put mine in codebox