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
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 😍
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.
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 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.
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.
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!
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!
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
Hey man, i tried making it like you but the problem is that when i use mask-image it colors whole bg black and stays that way, how do i fix that? Thank you in advance.
![Noob To Max With DRAGON REWORK In Blox Fruits [FULL MOVIE]](http://i.ytimg.com/vi/LnBMOinoOvA/mqdefault.jpg)
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 🗣️🗣️🗣️
You are literally the most OP webdesign source! Thank you very much!
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.
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.
Genuinely the best yt channel
Man, I'm really impressed on how you are great not only on CSS but Design in general too :O !! that's insane
شكرا لقد كان رائعا Thank you very much it was realy helpful
This is genius! Very nice work!
Wouah. Very nice. I am not a front end developer, but I must say that this is great!
Thank you for sharing.
I have saved your video for infinity
Danke!
Thank you so much 😍😍
Keep up the great work my friend.
Insane content as always, can't consider using CSS without LunDev help 😘
Thank you, there's a lot more crazy things to come 😁
Awesome effect and clear explanation. Thanks. 👍👍👍
3.55 MiB?! Dude...
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 😍
this is amazing. you're the best!
I love this channel. Tutorials are professional
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.
Indeed ! Superb....keep uploading like this .... Its looking like a wow and I tried this effect in Taj Mahal ....looking so fascinating... thanks 🙏👍
Thanks for these tutorials!
Thanks for watching 😍😍😍
Amazing! That was new for me,
Thank you for your great content
Please make more tutorials about handling images
you are awesome no words for your creativity 🥰🥰♥
also possible with png for higher quality. just have a wide image with the frames back to back and animate the mask-position horizontal.
You can also use animated webp instead of GIF.
You are absolutely legend bro
Thank you for watching my content 😍
That Amazing i love your Channel and i love your tutoriel really you take CSS for ather level
just AMAZING ❤
This is really good!
Thanks!
Professional idea bro thank u ❤
Watching your videos, mesmerized, knowing I'll probably never use anything I see here 😅.
Anyway keep up the good work 👏🏻
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?
wowwwwwwww bro top level ✌🏼✌🏼
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
I love your content thanks for sharing your knowledge for free thanks a lot 🙏
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.
This channel has some great content, but wow the audio is like listening to nails on a chalkboard.
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 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.
wow Idea Thanks alot bro
aitutorialmaker AI fixes this. Crazy Ink Animation Effect Video
OMG 😱😱😱😱😱😱 so coolllllllllllll
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.
Oh my god, I never saw this in my 9 years as developer.
Greetings from Brazil!!
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.
❤ You're the Best... Great.!!!
Thanks for watching 😍
just awesome
wow it is soo easy but the effect is damn good
I LOVE THIS
Thanks brother 😍
Really great. 👏
Thank you , that was Awesome
And here I was thinking you were gonna scale the Png with linear transition. 😅 this is much better
Subbed 🚀
Thank you 😍
bro you are just awesome
❤love it
Simply amazing
Wonderful.
you're css king
Awesome. How will it work for a video background?
your a god for real
When he said we need to do animation. I became really attentive 😂😂😂.
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...
Bro what extension do you use to test the responsiveness of the screen? Love your content btw ❤
Mobile simulator - responsive testing tool
@@samiredits001 Thankyou ❤️❤️
Where is that dramatic music for guessing wrong?
*farts*
awesome video! What's the responsive tool your using?
I would like to know that too 🙏🏼
This is mobile simulator in chorme
Awesome 😎
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!
It actually is possible to get videos with transparent backgrounds. Providing both HEVC and VP9 formats gives you chrome and safari coverage.
Awesome Bhai
Great demo, thanks for sharing.
Fantastic!
🔥🔥🔥
good technique 💯
bruhhh 🔥
Big fan brother ❤
Thank you brother 😍
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
PLS tell me what that device extension is?
Search simulator extension
CoooooL!!!!!
thanks!
Thanks sir.
What do you use for mobile view switching ?
So cool
wow , thanks
Hi! What chrome extension dis you use to view it in Iphone view at 3:29 ? Thanks
Fantastic
thanks pal
excellent
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?
holly shit that was beautiful
Hey man, i tried making it like you but the problem is that when i use mask-image it colors whole bg black and stays that way, how do i fix that? Thank you in advance.
what the live server u use ?????? i like how browser showing responsive in mobile.......
From Ukraine with love ❤
Ohh.. thank you.
Ink 🗣️💨💥💯💯‼️‼️💣💣🔥🔥🔥🦅🦅
btw: Videos can have transparent background. Just MP4 does not support it. Webm videos do support transparent backgrounds :)