I’m totally new to html/ css. The stuff that you create with css just totally makes me keep pushing myself to learn more. Your an inspiration to me. Keep up the awesome work.
@KevinPowell3 жыл бұрын
Thanks so much, and keep at it!
@kaustubha73713 жыл бұрын
I am down on the same path and its true it helps me keep pushing myself to learn more.
@daleryanaldover65453 жыл бұрын
keep it up guys, the same reason why I started learning css 7 years ago
@primalscream403 жыл бұрын
@@daleryanaldover6545 I’ve got a question. When I’m in html/css and have live server open. How can I make my browser scale to adjust without having to release the window to see the changes take effect. Make sense.
@daleryanaldover65453 жыл бұрын
@@primalscream40 if you mean the same as in Kevin's videos where he saves the file and browser automatically updates the saved changes. Then, try searching for the term "Hot reloading or Live reloading". You need to install some dependency depending on what framework you are working on. If you are using VS Code, you can install Live Server extension as it features live reloading out of the box.
@captainray74653 жыл бұрын
That steps function is really cool.
@MrMeszaros3 жыл бұрын
Hey, to get a better bink cursor: change to steps(2, start) - with infinite, this will cycle through the two end-states use visibility: hidden instead of background: transparent - this will ensure no transparency blending occurs.
@gykonik2 жыл бұрын
Wow, really improves the look. Thanks! :)
@alysonsantos46862 жыл бұрын
Thank you! It got better.
@govindptl Жыл бұрын
well, this kills the practical typing animation.
@ujjawalmaru8048 Жыл бұрын
@@gykonik hvhgbhj
@Reloko3693 жыл бұрын
Thanks, men. What you do is gold to me. I'm 36 years old and learning from 0 HTML, CSS, and JS. You make me realize the power of CSS in all this. I love the passion you put into it. Also, I have to say, your English is crystalline for me (Argentinian). I reconnect to learn this language with your videos.
@AbdicateDotNet3 жыл бұрын
Wow!! I've been "playing" in HTML/CSS since their inception (revealing my age) and I am so happy for CSS 3! What a difference! Thank you for teaching an old dog new tricks! I am going to WOW folks now! 👍🙌❤😊😷
@emmanuelibuaka41183 жыл бұрын
The first sign of a good tutor is that he's not afraid to refer you to persons or resources that he knows can help in your learning journey. Much ❤️ Kevin
@soumyajitdey57203 жыл бұрын
I love Kevin so much. A CSS guru! I used to hate CSS so much because I didn't understand it properly and now after knowing the basics what he is doing in each line absolutely makes sense. I will surely integrate this in one of my projects.
@unnervingibet1172 жыл бұрын
I’m learning python but watching this on CSS was such a blast, I think I’m just obsessed with code, it’s so fun to watch and learn and to make matters better, you’re very entertaining
@charusharma7872 Жыл бұрын
animated Box With CSS kzbin.info/www/bejne/nXPQqWaIormbeqc
@deathstarhz34263 жыл бұрын
Pro Tip: If you want to find out how many characters are in any given amount of text, highlight it in vs code, and look at the bottom bar, it should say "Ln ##, Col ## ( [number-of-characters] selected)
@b3nj4m1nyt Жыл бұрын
I already knew it but somehow I forgot it, so I actually opened notepad because I remembered that it has the same feature 😆
@zneverending35853 жыл бұрын
You are the reason of why i still can't start learning JS after Html and Css
@xrgiok2 жыл бұрын
I'm 33 year old and just start to learn html/css , and you inspire me! Thanks Kevin, you're really really good teacher!
@Victor_Marius3 жыл бұрын
Yet again I learned something new from you. Didn't knew about steps() for animation
@charusharma7872 Жыл бұрын
animated Box With CSS kzbin.info/www/bejne/nXPQqWaIormbeqc
@calin-andreipantis-simut62412 жыл бұрын
Man, your videos are so inspiring, I am following you since the beginning where I didn't know what CSS even is. Now I am a developer and still find your videos to be so amazing. Keep going, you're doing a great job. I really appreciate your work! Congratulations!
@Ana-hc1cf3 жыл бұрын
Ugh, I needed this so badly two weeks ago, I just wanted to add this animation to my website and didn't find any good tutorials, I am happy now
@UniqueBots3 жыл бұрын
Dude this is PURE GENUISNESS! Loved the tricks.
@AshishKumar-rq8gb3 жыл бұрын
Man. Thankyou so much. I have been working as a front end dev for 1 year and I was so afraid of using animations. Rather I should say, I never tried them. And you taught them through this so easily. Thanks a ton. I am going to follow all your tuts now and see how well I can do. :-)
@charusharma7872 Жыл бұрын
animated Box With CSS kzbin.info/www/bejne/nXPQqWaIormbeqc
@johndoggett46573 жыл бұрын
Dood Kevin you are a mind reader. I wanted to learn this effect for work and my portfolio.
@ibrahimkedir22802 жыл бұрын
You are the best mate, cheers really; sometimes I just hit the like buttons of your videos with out even watching them.
@advanceringnewholder3 жыл бұрын
this is probably the channel i need to finish my project
@mimoduocss3 жыл бұрын
Dang clever trick and nice explanation! Clip-path would help remove the dependency on the background color ;)
@xXYourShadowDaniXx3 жыл бұрын
Good episode, I made the clip path version here: codepen.io/Event_Horizon/pen/RwpQNyB?editors=1100
@_AverageGuy2 жыл бұрын
I know it's late but can you explain how to use clip path cuz I have an image as background
@theshowwatcher34143 жыл бұрын
In your every video I learn something new.
@softvibes16023 жыл бұрын
dude, you are a pro in CSS, I'm subbing to you right now!
@__matthi3 жыл бұрын
You're brilliant at explaining things. Thank you so much!
@AdityaDhungana3 жыл бұрын
You're great Kevin.
@Morrile13 жыл бұрын
I love tips like this, straightforward and simple.
@CloudBroadcasts3 жыл бұрын
Thanks for the content - I’ve learned a lot from you. Keep ‘em coming!
@commentmyideas45233 жыл бұрын
Hair cut done 😂😂 styling looks good css
@prithwimanmazumdar47063 жыл бұрын
You know you could actually get the caret without using a pseudo element, just set the left border of the covering div to 2px solid black. It would give the same effect without the need of a pseudo element, but great work man, totally loved this.
@mmaismma3 жыл бұрын
What would have been more clever would be adding a border-left to :before instead of going with :after.
@mataca92 жыл бұрын
Cool trick! Another way to do this, is if you are using sass, you can split a word in letters and then use a for to create the steps of animation putting the letters as an acumulation on the content property. Using flex and before in the main div and inside this div the cursor, as the cursor and the before are children, the cursor will move as the content is incremented. :D
@dylancam8122 жыл бұрын
How do you use sass to split up the word. I’m trying to do it this way but I’m having some trouble
@charusharma7872 Жыл бұрын
animated Box With CSS kzbin.info/www/bejne/nXPQqWaIormbeqc
@rezarahman17823 жыл бұрын
CSS animation is really really strong.🥰
@lyckagennie60393 жыл бұрын
Yay! New Learning Thanks Mr. From a Grade 12 student😊
@ankurc3 жыл бұрын
Very fun might have to try in my portfolio page
@Pierregouchet2 жыл бұрын
It would be interesting to pause the blinking while it's "typing", as a normal caret acts when you type something, and then blink only when it's idling. I guess you could do it by adding a few steps to the keyframes, but that would require a lot of maths to have it right ! :D I might try it anyway.
@AJman142 жыл бұрын
And there shouldn't be a fading animation. Just a blink. On/Off.
@Pierregouchet2 жыл бұрын
@@AJman14 yup !
@cwang99453 жыл бұрын
So amazing. Thank you sir. I really love this typing effect.
@waseem_4982 жыл бұрын
Are we not going to talk about the Chicago accent at 1:07 “javascript” lol great videos I learn so much
@KevinPowell2 жыл бұрын
Haha, first time I get someone saying I have a Chicago accent, but I definitely hear it there, lol. I'm in Montreal, Canada, so not a common accent to sneak in, lol
@waseem_4982 жыл бұрын
@@KevinPowell I just got back from Chicago so I heard it immediately 😂
@bahar_hussain3 жыл бұрын
very amazing idea i am so excited from this.
@AA-oi9ru3 жыл бұрын
dear sir one piece of advice when you are trying to connect over codepen to see this amazing video it is saying refuse to connect to fix this you can use TARGET inside the link
@ChrisPirillo1473 жыл бұрын
I was thinking about this a few days ago, and it finally popped up :)
@Baljeettest3 жыл бұрын
Super idea, hats off Kevin..... ✌️
@bobrobertsNotUrBob3 жыл бұрын
Very smart, if I knew about "steps" then I guess I could have figured it out...the more you know
@brunomocellin2 жыл бұрын
I'm just entering the world of programing but i already understand the logic behind it. Your video is so cool as you add steps to it. I'm willing to make an Alert (StreamElements) with that effect, just need to think how the variables of text, text size and names will fit.
@SuatBarlak2 жыл бұрын
With the @Keyframes blink like this, you get a shorter transformation from transparent to black and back, which in my opinion looks a bit better @keyframes blink { 20% { background: black; } 25% { background: transparent; } 75% { background: transparent; } 80% { background: black; } }
Thanks for the lovely tutorial. I have observed that while we are typing something, the blinking isn't there. The blinking kicks in once the typing is done. So maybe we should've had the blinking effect only before and after the typing animation. Also, the fade-blink is looking weird. Can make it abrupt using steps I guess.
@Tiger1AuasfE2 жыл бұрын
Nice, thnx for uploading.
@dave60123 жыл бұрын
Steps! i had no idea. Thank you.
@codecruz2 жыл бұрын
Now add the codename kids next door typing sound and we have a banger
@habibthekhan3 жыл бұрын
wow this was cool I didn't know about this steps animation thank you soo much
@marketinginhouse2 жыл бұрын
What good videos, greetings from Peru
@MrStefanica3 жыл бұрын
Very nice ! Thank you Kevin !
@GeorgeNorberg2 жыл бұрын
Love your videos!
@binitdemta37933 жыл бұрын
Really great. Thanks for the wonderful videos.
@jpzro31583 жыл бұрын
This is pretty cool!
@himalmevada79893 жыл бұрын
I Just dive in animation and it's really Fun. the video is awesome nicely explained
@jenniferward68213 жыл бұрын
Clever boy!!!
@anjor32063 жыл бұрын
CSS guru 🙌
@howabadworld3 жыл бұрын
Nice video, Good Job!
@susityy20302 жыл бұрын
Thank you!
@angelocina59143 жыл бұрын
Thka mate!! you are a master!!!
@devc_3 жыл бұрын
Great explanation, love your videos
@BenRogersWPG3 жыл бұрын
Very cool
@mdazizulislam24983 жыл бұрын
wow nice explanation. thank you so much
@dawatcherz2 жыл бұрын
for the speed of the cursor you could use calc( var(--typewriterspeed) / var(--typewriterCharacters))
@charusharma7872 Жыл бұрын
animated Box With CSS kzbin.info/www/bejne/nXPQqWaIormbeqc
@Dexter101x3 жыл бұрын
Hilariously ingenious
@aaeonCodes2 жыл бұрын
Thank you very much for such a great content
@BrunoMussoi3 жыл бұрын
I guess it can also work by shrinking the h1 to 0, and animate it back to its normal size. This way you would not need to cover the letters with the background color.
@Victor_Marius3 жыл бұрын
And use the right border for the caret. But if you have anything to the right of the element it would be moved around, but maybe this side effect is the target result.
@KevinPowell3 жыл бұрын
The issue here is you can't animate to `max-content` (same with auto). If you had a fixed final size it would work, but I wanted to make it easy to update :) - You could use JS to figure that out too, if you really wanted to use that approach, but it seems like more work than using an extra pseudo-element :)
@Victor_Marius3 жыл бұрын
@@KevinPowell what if you set width to 24ch or same number as the custom property used for the animation steps?
@sanjaysushiv133 жыл бұрын
Awesome
@alirajabli3 жыл бұрын
Excellent , Thank you man!
@charusharma7872 Жыл бұрын
animated Box With CSS kzbin.info/www/bejne/nXPQqWaIormbeqc
@X6millionways2di6 ай бұрын
Hi Kevin 1st of all respect for your whole work. Now my question. Is it possible to put a typewriter retro sound with the typewriter animation together. Beginning at a mouse pointer action.
@saineeraj21634 ай бұрын
what to do if we have a paragraph, it is all coming in one line as only the width is increasing
@wolfrust02 жыл бұрын
“To make the ease easier “ tug tuh
@navidmafi3 жыл бұрын
Thank you, very useful
@kristofkallo2 жыл бұрын
One idea. The caret should not be blinking while typing.
@jeka22332 жыл бұрын
awesome
@raykutan3 жыл бұрын
You should put the blink animation to _infinite alternate_ so that it doesn't jump from transparent to black. Also I don't understand why you put the timing function to _step_ since the blinking has nothing to do with the text length, _linear_ would make more sense and _ease-in-out_ looks also nice
@charusharma7872 Жыл бұрын
animated Box With CSS kzbin.info/www/bejne/nXPQqWaIormbeqc
@cintron3d3 жыл бұрын
lol I feel naked without my headphones on and will wear them whenever I'm at my desk, music or not.
@cameronhumphries23773 жыл бұрын
im the opposite, if no music is playing i feel weird with headphones in
@codedynamics12 жыл бұрын
Lol
@ktytar3 жыл бұрын
Thanks, you rock !
@boghost2997 Жыл бұрын
Thanks for the video, amazing as always but wouldn't it be easier to just put a black border-left on the before rather then an after to make the black ligne waiting after each character. And sorry if my English is bad, I'm French
@Fixit__3 жыл бұрын
There is no reason to use steps with the blink animation, is there? The difference is minimal with that many steps, but I'd just use ease.
@rageking15943 жыл бұрын
left border might have also worked instead of changing background color
@scubahick8 ай бұрын
Single line typewriter is good how about multi line typewriter affect? I don’t see any of those on KZbin.
@fazlerobi3 жыл бұрын
Thanks for the video.
@lessons3141 Жыл бұрын
Nice
@jameshansen8013 жыл бұрын
This is so cool, thanks for doing a video on this! I'm currently working on a project where I'd like to incorporate a dynamic version of this that could be applied to whole paragraphs instead of single lines. So far, my biggest issue is that every line in the paragraph animates at the same time with the caret animation being the same height as the paragraph. Any help would be greatly appreciated Kevin. Thanks again!
@MrSupdup2 жыл бұрын
Did you ever have any success with this? Trying to do this on a current project and I'm fearful its not possible using only CSS. It's simple enough to make the height of the pseudo's the height of one line (making the caret and the background block out just one line), but it doesn't seem possible to animate multiple lines staggered one after the other if they are all in the same element.
@jameshansen8012 жыл бұрын
@@MrSupdup Currently, the only answer I have now is to chop up the paragraph and create a timed loop that animates each individual line. Obviously, this isn't a dynamic solution. However, it's still on my todo list!
@charusharma7872 Жыл бұрын
animated Box With CSS kzbin.info/www/bejne/nXPQqWaIormbeqc
@yxshv2 жыл бұрын
Instead of a background u could use overflow hidden
@black_sinister Жыл бұрын
how to do that typewriter effect when there is bg img behind because i think that approach will no longer work with that type of situation
@berndeckenfels3 жыл бұрын
Hm, that steps(24) for the blink looks strange, why not use steps 3 or 5 or so?
@CSIRID3 жыл бұрын
So it moves at the same rhythm than the text reveal.
@berndeckenfels3 жыл бұрын
@@CSIRID hm, it has a different timespan. So it’s 24 steps in 350ms not 24 steps in 6s…
@undergroundmonorail3 жыл бұрын
Hm I thought maybe I could get around needing to count the characters by doing calc(100%/1ch) but I guess you can't just divide out the dimension with calc sadly
@lucario43993 жыл бұрын
Not so sure about kev but this project based video take a hell lot efforts , first making totally different content and next editing it (i tried to put video on internet 😂)
@expressproductions14582 жыл бұрын
i have a picture on my background is there a way where i could implement this type of logic on a transparent background?
@preciousorjiude2 жыл бұрын
Hello This makes my navbar not respond to clicks because the ::after pseudo element covers the whole viewport
@amanjotsingh001 Жыл бұрын
how to make this restart after ending....like a loop with a sec pause in the end
@theophiled2 жыл бұрын
Instead of using top, bottom, left and right:0 why not use inset:0; ?
@codedynamics12 жыл бұрын
really cool thanks, however when you are developing for smaller sized screens and the h1 content takes up 2 lines the "caret" reveals both words at the same time so it looks like its typing out 2 words which are on different lines at once ? How do you fix this
@melvinnuslahdtuah2693 жыл бұрын
Kevin the genius Powell 😏😏😏
@tejasvijb42282 жыл бұрын
what if the background is faded?
Жыл бұрын
For H1, what is the meaning of two position: relative?