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
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.
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 😍
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. ❤
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
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.
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!
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.
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!
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
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.
We could also do this with sprite images, like this: mask-image: url('path_to_sprite_image.png'); animation: dye 1.3s steps(20) forwards; then the dye animation would just shift the mask-position bit by bit until it’s done at 100%. @keyframes dye { 0% { mask-position: 0% -100px; } 100% { mask-position: 100% 0%; } }
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
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
Animated SVG, APNG or WEBP are all a better option.
Header images requiring > 100kb is just asking for bad UX on slower connections.
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 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.
Oh my god, I never saw this in my 9 years as developer.
Greetings from Brazil!!
You are literally the most OP webdesign source! Thank you very much!
Baby wake up, lundev cooked a new video 🗣️🗣️🗣️
I have saved your video for infinity
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.
Man, I'm really impressed on how you are great not only on CSS but Design in general too :O !! that's insane
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?
3.55 MiB?! Dude...
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.
Didn't even know that was possible 🫥 Great video as always 😊
☺️☺️☺️
This is genius! Very nice work!
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. ❤
Genuinely the best yt channel
Awesome effect and clear explanation. Thanks. 👍👍👍
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 😍
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.
Indeed ! Superb....keep uploading like this .... Its looking like a wow and I tried this effect in Taj Mahal ....looking so fascinating... thanks 🙏👍
You can also use animated webp instead of GIF.
Bro what extension do you use to test the responsiveness of the screen? Love your content btw ❤
Mobile simulator - responsive testing tool
@@samiredits001 Thankyou ❤️❤️
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 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.
It actually is possible to get videos with transparent backgrounds. Providing both HEVC and VP9 formats gives you chrome and safari coverage.
Amazing! That was new for me,
Thank you for your great content
Please make more tutorials about handling images
I love this channel. Tutorials are professional
also possible with png for higher quality. just have a wide image with the frames back to back and animate the mask-position horizontal.
Insane content as always, can't consider using CSS without LunDev help 😘
Thank you, there's a lot more crazy things to come 😁
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 🥰🥰♥
this is amazing. you're the best!
awesome video! What's the responsive tool your using?
I would like to know that too 🙏🏼
This is mobile simulator in chorme
And here I was thinking you were gonna scale the Png with linear transition. 😅 this is much better
This channel has some great content, but wow the audio is like listening to nails on a chalkboard.
That Amazing i love your Channel and i love your tutoriel really you take CSS for ather level
I love your content thanks for sharing your knowledge for free thanks a lot 🙏
Thanks for these tutorials!
Thanks for watching 😍😍😍
Keep up the great work my friend.
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!
wow it is soo easy but the effect is damn good
Awesome. How will it work for a video background?
you're css king
Simply amazing
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
This is really good!
Thanks!
You are absolutely legend bro
Thank you for watching my content 😍
Professional idea bro thank u ❤
just awesome
Where is that dramatic music for guessing wrong?
*farts*
just AMAZING ❤
❤ You're the Best... Great.!!!
Thanks for watching 😍
Great demo, thanks for sharing.
wow Idea Thanks alot bro
When he said we need to do animation. I became really attentive 😂😂😂.
Really great. 👏
Thank you , that was Awesome
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?
wowwwwwwww bro top level ✌🏼✌🏼
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.
Awesome 😎
your a god for real
Awesome Bhai
I LOVE THIS
Thanks brother 😍
One question though : why gif and not svg? Gif are larger file size that will effect performance. Can you do this with svg? Would be cool.
bro you are just awesome
btw: Videos can have transparent background. Just MP4 does not support it. Webm videos do support transparent backgrounds :)
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
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.
❤love it
From Ukraine with love ❤
excellent
Fantastic!
CoooooL!!!!!
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.
Thanks sir.
wonderful animation using CSS only. Thank you for making this video. Good health.
Ohh.. thank you.
good technique 💯
Fantastic
thanks!
is there a video explaining the early part of the video of the images disappering and appearing ?
So cool
thanks pal
We could also do this with sprite images, like this:
mask-image: url('path_to_sprite_image.png');
animation: dye 1.3s steps(20) forwards;
then the dye animation would just shift the mask-position bit by bit until it’s done at 100%.
@keyframes dye {
0% {
mask-position: 0% -100px;
}
100% {
mask-position: 100% 0%;
}
}
Then you won’t get the animation that GIF gives
yeah with gif it feels smoother however depending on the what you need both are good options
holly shit that was beautiful
wow , thanks
need full front-end development course 😢😢
what the live server u use ?????? i like how browser showing responsive in mobile.......
How could we use transparent animated images who are smaller then the most GIFs? APNG?
Subbed 🚀
Thank you 😍
Please, do the animation-timeline tutorial.
What's that chrome extension he uses to toggle between mobile and desktop?
Awesom
Looks pretty awesome, however I noticed that the gif file is more than 3MB large. Any tips for optimization?
Don't worry in the gif inage creation step, i chose the highest parameters. if you choose other parameters the size is only about 1mb
Can i use this effect using GSAP and Scrolltrigger?
Will try to add the gif animation while scrolling
which extension you're using to view in different mobiles?