I thought I had no talent for designing recently and wanted to rectify it. I watched a lot of videos researched a lot. I thought this was a huge task at first but your videos gave me the push of encouragement I needed. Now I am confident that I can make beautiful websites thanks to you. I really want a figma tutorial plz. Love your videos
A simple slider transition would be kind of ink stroking up and down from right to left or vice versa. Kindof like caligraphy style I guess?? anw this is really SICK! like I will definitely send these to my designer.
Brother I really admire your work, I am creating a project using different master css properties that you've told , I will share the project with you :) , THANK YOU BRO
First of all, I really like your video and the idea of this effect. But please do a follow up with a real world scenario so newbies don't think it's okay to put a big GIF on a homepage. Performance matters. And you may want to use a real instead of a background image, since in real life in a content management system you want the editors to be able to change the image. Should work well with your approach. Thanks for sharing. ❤
In the video I have chosen the best options for creating high quality gifs (image size, number of frames per second). If you choose other options during gif creation, it will be less than 1MB 😍
This is a really cool effect, but a 3.5mb image just kills it. Will have to try to compress it further to see if we can get it to a reasonable size. Even if it gets pixelated, that’s still a pretty cool effect.
Cool idea and effect, not sure about the gif though ;D you probably don't want this on every refresh either. But I guess that for people to figure out and implement ;D
If it comes to this, better use webp as it will be way smaller image (gifs are humongous in size and low quality due to 256 color quantization). And you could probably just use svg with filters to make something looks like ink. and animate it.
So... Just CSS masking basically. Still a nice video about that subject though. I do have one request: I think it's common curtisy to always mention (at least in your video description) that you use an AI text-to-voice tool. No problem if you do, off course!
Awesome effect, but 3.5MB just for the mask animation (not counting the background image) is absolutely huge for web standards, you better not use that in you header section I'd suggest converting it into webp which also supports animation just as GIFs to try to shrink it a little bit Great and useful content, keep it up!
I get really odd vibes from this entire video - Using the free stock video without mentioning or adhering to the license, using a 3.5MB gif, what I presume to be an AI voice, and lots of comments that feel astroturfed with multiple coming from programmers who have supposedly been around for ~10 years? I understand the creator making a living, but this also seems not great for newer developers.
playing with gif is sort of time killer🤣At this moment I'm trying(hope I could🤞) to bake a 3d animation in blender animation to multiple slides (aka gif or in your "step animation" video) and then use it in a touch gui(it not uses hover interactions so) to make a low-performance transitions and interactions(like if button 1 touched -> show slides 1-10, if scrolled -> 30-50 and etc) so this one timed perfectly:)) thanks again for your content wait every video
If you find it interesting, don't forget to subscribe to the channel to watch more interesting videos about programming and web design
awesome, i never seen this before in 15 Years of programming journey.
Thank you so much, I believe if you watch my other videos you will repeat this many more times 😁
@@lundeveloper 😄basically i always do
You're helping people a lot. You're such a legend🔥🔥😍😍
Thanks for watching my content 😍
@@lundeveloper don't thanks me you're such a great person Arigato!🙏🙏❤❤
@@YakxyBoy are you japnese
I think animated SVG mask can be used for this, GIF files are large and not scalable.
animated svg would be a much, much better solution
wish there’s a tutorial on that one..
Didn't even know that was possible 🫥 Great video as always 😊
☺️☺️☺️
Baby wake up, lundev cooked a new video 🗣️🗣️🗣️
I thought I had no talent for designing recently and wanted to rectify it. I watched a lot of videos researched a lot. I thought this was a huge task at first but your videos gave me the push of encouragement I needed. Now I am confident that I can make beautiful websites thanks to you. I really want a figma tutorial plz. Love your videos
Hey are you a designer?
@abusufyan1352 I am not a designer, but I want to branch out my skill set.
You are literally the most OP webdesign source! Thank you very much!
Man, I'm really impressed on how you are great not only on CSS but Design in general too :O !! that's insane
Genuinely the best yt channel
If you apply this technique to slider design, what will it look like?
A simple slider transition would be kind of ink stroking up and down from right to left or vice versa. Kindof like caligraphy style I guess?? anw this is really SICK! like I will definitely send these to my designer.
Wouah. Very nice. I am not a front end developer, but I must say that this is great!
Thank you for sharing.
it looks amazing. thanks man for details and ur ideas, wish u 1.000.000 followers. Lun Dev, what thing do u use for adaptivity in this video?
This is genius! Very nice work!
Indeed ! Superb....keep uploading like this .... Its looking like a wow and I tried this effect in Taj Mahal ....looking so fascinating... thanks 🙏👍
Awesome effect and clear explanation. Thanks. 👍👍👍
I have saved your video for infinity
Brother I really admire your work, I am creating a project using different master css properties that you've told , I will share the project with you :) , THANK YOU BRO
Ok brother 😍
I love this channel. Tutorials are professional
First of all, I really like your video and the idea of this effect. But please do a follow up with a real world scenario so newbies don't think it's okay to put a big GIF on a homepage. Performance matters. And you may want to use a real instead of a background image, since in real life in a content management system you want the editors to be able to change the image. Should work well with your approach. Thanks for sharing. ❤
this is amazing. you're the best!
Insane content as always, can't consider using CSS without LunDev help 😘
Thank you, there's a lot more crazy things to come 😁
just awesome
Watching your videos, mesmerized, knowing I'll probably never use anything I see here 😅.
Anyway keep up the good work 👏🏻
you are awesome no words for your creativity 🥰🥰♥
Keep up the great work my friend.
Danke!
Thank you so much 😍😍
wowwwwwwww bro top level ✌🏼✌🏼
OMG 😱😱😱😱😱😱 so coolllllllllllll
When he said we need to do animation. I became really attentive 😂😂😂.
Wonderful.
you're css king
just AMAZING ❤
3.5Mb just for the GIf, OMG !
In the video I have chosen the best options for creating high quality gifs (image size, number of frames per second). If you choose other options during gif creation, it will be less than 1MB 😍
Useless for real world application.
You are absolutely legend bro
Thank you for watching my content 😍
Simply amazing
Awesome Bhai
❤ You're the Best... Great.!!!
Thanks for watching 😍
Amazing! That was new for me,
Thank you for your great content
Please make more tutorials about handling images
That Amazing i love your Channel and i love your tutoriel really you take CSS for ather level
Professional idea bro thank u ❤
Thanks for these tutorials!
Thanks for watching 😍😍😍
Really great. 👏
I love your content thanks for sharing your knowledge for free thanks a lot 🙏
wow Idea Thanks alot bro
This is really good!
Thanks!
I LOVE THIS
Thanks brother 😍
This is a really cool effect, but a 3.5mb image just kills it. Will have to try to compress it further to see if we can get it to a reasonable size. Even if it gets pixelated, that’s still a pretty cool effect.
your a god for real
Fantastic!
Awesome 😎
bro you are just awesome
Cool idea and effect, not sure about the gif though ;D you probably don't want this on every refresh either. But I guess that for people to figure out and implement ;D
If it comes to this, better use webp as it will be way smaller image (gifs are humongous in size and low quality due to 256 color quantization). And you could probably just use svg with filters to make something looks like ink. and animate it.
❤love it
And here I was thinking you were gonna scale the Png with linear transition. 😅 this is much better
also possible with png for higher quality. just have a wide image with the frames back to back and animate the mask-position horizontal.
So... Just CSS masking basically. Still a nice video about that subject though. I do have one request: I think it's common curtisy to always mention (at least in your video description) that you use an AI text-to-voice tool. No problem if you do, off course!
Bro what extension do you use to test the responsiveness of the screen? Love your content btw ❤
Mobile simulator - responsive testing tool
@@samiredits001 Thankyou ❤️❤️
wow it is soo easy but the effect is damn good
aitutorialmaker AI fixes this. Crazy Ink Animation Effect Video
Thank you , that was Awesome
Fantastic
Awesome effect, but 3.5MB just for the mask animation (not counting the background image) is absolutely huge for web standards, you better not use that in you header section
I'd suggest converting it into webp which also supports animation just as GIFs to try to shrink it a little bit
Great and useful content, keep it up!
At the video to gif conversion step, if you choose lower video parameters, the result will be less than 1mb
@@lundeveloper that's still 800kB too big...
This channel has some great content, but wow the audio is like listening to nails on a chalkboard.
Thanks sir.
3.55 MiB?! Dude...
excellent
Great demo, thanks for sharing.
Btw which responsive extension are u using here and thanks for the great content
I think it’s Mobile Simulator for Chrome
@Sprnrml btw can u know best extension for web development is u know then can u suggest me
@@COD_Warfare_Master-sair7 for front end checking and looking at styles, I personally use CSS Peeper a lot.
good technique 💯
awesome video! What's the responsive tool your using?
I would like to know that too 🙏🏼
This is mobile simulator in chorme
So cool
Animated SVG, APNG or WEBP are all a better option.
Header images requiring > 100kb is just asking for bad UX on slower connections.
I get really odd vibes from this entire video - Using the free stock video without mentioning or adhering to the license, using a 3.5MB gif, what I presume to be an AI voice, and lots of comments that feel astroturfed with multiple coming from programmers who have supposedly been around for ~10 years? I understand the creator making a living, but this also seems not great for newer developers.
CoooooL!!!!!
Subbed 🚀
Thank you 😍
You can also use animated webp instead of GIF.
Awesome. How will it work for a video background?
Big fan brother ❤
Thank you brother 😍
thanks!
Ink 🗣️💨💥💯💯‼️‼️💣💣🔥🔥🔥🦅🦅
It actually is possible to get videos with transparent backgrounds. Providing both HEVC and VP9 formats gives you chrome and safari coverage.
holly shit that was beautiful
thanks pal
wow , thanks
Ohh.. thank you.
🔥🔥🔥
From Ukraine with love ❤
Awesom
playing with gif is sort of time killer🤣At this moment I'm trying(hope I could🤞) to bake a 3d animation in blender animation to multiple slides (aka gif or in your "step animation" video) and then use it in a touch gui(it not uses hover interactions so) to make a low-performance transitions and interactions(like if button 1 touched -> show slides 1-10, if scrolled -> 30-50 and etc) so this one timed perfectly:)) thanks again for your content wait every video
Oh my god, I never saw this in my 9 years as developer.
Greetings from Brazil!!
goodjob
bruhhh 🔥
Where is that dramatic music for guessing wrong?
*farts*
Very cool idea. Could this be possible without a gif by changing contrast on a static image that reveals the edges of the inkblot from white to black?
Hi! What chrome extension dis you use to view it in Iphone view at 3:29 ? Thanks
I love you bro ❤
Thanks bro 😍
cool
Wow
I suppose you can do something similar with animated svgs and the size would be much smaller than a gif that size with so many frames.