Never thought I would see GW2 and ArenaNet featured in your content. Those are ones of my favorite franchises and favorite videogame companies.
@francb1634
Жыл бұрын
@@holodocprime it's actually thriving. released a lot of important content this year, including an expansion, and the active population has grown
@antoninodellalbani431
Жыл бұрын
The game got released on steam too. But awesome video! Thanks
@xaoc3003
Жыл бұрын
@@holodocprime Not even close to
@aarovas
Жыл бұрын
This animation shocked me, when I was 16. I had nothing with programming and stuff and wondered how this worked. And now, I am 27, and you open that secret for me. Thank you, Kevin!
@proudyy
9 ай бұрын
was mask-image even available back then 10 years ago? xD
@hikari1690
Жыл бұрын
Oooh its been more than 10 years since I saw this game... Seems like its still alive. I like those masking effects. Thanks for this video, I'll definitely abuse this new power you have bestowed unto us
@tr7zw
Жыл бұрын
We got a new expansion and steam release earlier this year, and a new player peek too. So yea, more than alive :D
@peter8261
Жыл бұрын
One thing to mention is that in Adobe After Effects you can export an animation as an image sequence. So you can create an animated splatter, which is what it looks like is the case here, and then make it black/white, and then export it as a bunch of images. Then all you need to do is pick out the frames of the animation you want--or you can just use the whole thing.
@mykalimba
Жыл бұрын
What do "image sequence" and "a bunch of images" mean in this instance? Is the export a single file, or are each of the images in the sequence exported to their own file? If so, that seems more troublesome. The approach Kevin shows here seems like the cleanest way you can accomplish this.
@danielbengtsson9833
Жыл бұрын
@@mykalimba no, doing what Peter said, but instead exporting it as a video instead and then simply embedding that is by far the easiest and cleanest way you can accomplish this.
@mykalimba
Жыл бұрын
@@danielbengtsson9833 Hmm, I might agree that using a video could be an "easiest" approach in some aspects, but there are so many other considerations that would steer me away from that: 1) Bandwidth - How large is that animation file, compared to the two images + mask image? 2) Fidelity - How does the visual quality of a frame of the video asset compare to that of the still images? 3) Versatility - With the approach Kevin demonstrates here, you maintain a low level of run-rime control over the animation parameters that I don't believe you have when the browser in playing back a video asset.
@aadreein
Жыл бұрын
Maybe not as an image sequence, exactly, but you could certainly use a plugin to export it as if it was a sprite for a video game. That way you get to create a smooth animation with Ae, but still only having to work with a single image for the mask in the CSS, as shown in the video
@t3hpwninat0r
Жыл бұрын
@@mykalimba Make a 1-bit black and white PNG and use pngquant to get the smallest file size. Use 'mask-mode: luminance;' so that the white parts are visible because there is no transparency in your mask PNG. You can have a much higher number of pixels in your mask image this way (though some bad browsers have a limit) which allows more animation frames which means smoother animation so you get both bandwidth and quality optimisation. Of course, most people are lazy and will make a 32-bit PNG with the default mask-mode of Alpha as the mask 🤦
@ichiroutakashima4503
Жыл бұрын
Things I really do want to learn. Most tutorials only apply on being "login etc let's be productive, fashion website, shopping store." We really need tutorials that tackle designs like these.
@olezhonnv3215
Жыл бұрын
Amazing! I never met mask-image in the code, and did't knew it even exist. Thank you!
@benny123tw
Жыл бұрын
This animation is pretty mind-blowing. Thanks for making this tutorial.
@istratos
Жыл бұрын
Love css and love GW2, what's not to like about this video?
@cibuyomo
Жыл бұрын
Oh no I got clickbaited by Guild Wars. But I was really happy that it was by someone who makes really good videos. I wondered how they do the website effects but now I want to do them myself even more. Thanks for the great tutorial.
@RichardTran
Жыл бұрын
Hot tip, combine this masking effect with filter: drop shadow to add some "burnt edges" flair.
@Swedish_Brute
Жыл бұрын
Thank you! I've always wondered how they did that effect!
@Eslabo
Жыл бұрын
Their art is just amazing. Thanks for exlaining
@Lord_Arkham
Жыл бұрын
Is very impressive what you can do with something so "simple" as is css, along with the right tools. Thanks for sharing!
@mundane4546
Жыл бұрын
I'm learning JavaScript soon be with you on CSS and HTML
@MatthiasSchulthei
11 ай бұрын
Okay now I HAVE to comment. I saw that Guild Wars Thumbnail and I was instantly in love. I can not believe someone outside of that bubble is talking about it hahaha
@nanozone3706
Жыл бұрын
wow cool transition there
@j-janz
Жыл бұрын
Neat! Thank you for fleshing that out!
@truvc
Жыл бұрын
You could use an expanding radial gradient or a bunch of clip paths as the mask as a much simpler and easier way to accomplish a similar effect
@DeLaFaKoNaM
Жыл бұрын
Amazing. I will try it. Thanks to the King of CSS.
@khaledalhayek8176
Жыл бұрын
You're my best ever Instructor in developing my career in CSS and I always watch your videos, BUT in this video, I'm just watching you how you make things happens, that's mean I've spent around 14 minute just watching how things is done. I didn't have any income or learn new things as usual. I understand that it all depends on the design, but the question is what is the purpose from this video? If you're matching your channel creation purpose without exiting from the core of its goal((frontend dev.)) then i'll definitly will struggle while learning from you. Sorry for the long message, but it from a heart of person that learned a lot from you and will always be thankful to you for what I've achieved because of you :)
@theodorealenas3171
Жыл бұрын
CSS techniques like these are a fun hobby and I'm having a blast. Should I expect to apply them though?
@KevinPowell
Жыл бұрын
This isn't something that would come up often, but like you said, it's fun :D
@michaelsantiagoart
Жыл бұрын
I'm planning on implementing this on a sample website for creative businesses like filmmakers that may want something like this on their website so as to land a sale. Lots of possibilities with this!
@Senayoshy
Жыл бұрын
awesome video but i think we really need some guidance on how to actually make the mask which you mention is the most time consuming process. I see many other comments here also facing this issue, would appreciate a guide or some directions on how us non-photo editors can accomplish and learn this process!
@caroline2569
Жыл бұрын
Thanks for the video 🔥! Have you published the video explaining the creation of masks on photoshop ? I couldn't find it :)
@blakedavis229
Жыл бұрын
Kevin, I'm really wanting to try this technique, but have no experience with editing photos. Can you provide a bit more information on creating the long png file (with multiple frames) or the masking process? Even providing a few relevant links would be very helpful.
@dresan48
10 ай бұрын
Did you ever figure it out?
@blakedavis229
8 ай бұрын
@dresan48 I figured out enough to satisfy my curiosity. Essentially, you can use an editing program to create a completely transparent background, then wherever you paint black over that background will become the mask that will allow your original image to change to the secondary image wherever you have painted black. I did a few streaks and saw that it worked, so I was satisfied. However, to do what Kevin does, you would need to use one of the photos as a point of reference when drawing the mask to ensure you are revealing the precise area you intend; this is the majority of the work he does in photoshop - I slowed down the video to .25 speed to get a better understanding. Hope you figured it out if you were also on the struggle bus too.
@dresan48
8 ай бұрын
@@blakedavis229 thank you! this is very helpful. What tools did you use?
@blakedavis229
8 ай бұрын
@@dresan48 I ended up using the free to download and use program "GIMP" which has similar features to Photoshop, helpful tutorials on their website to teach in-depth features, and a large enough user base that there are youtube "how to" videos. It's been so long since I fiddled with it, that I can't remember the exact process, but it wasn't too painful to figure out how to make it work. It worth mentioning that you should note the dimensions of the image you are wanting to mask if you want to do a stepped transition like Kevin shows in his video - if the original image is 100px wide and 50px in height, you can make a mask that is 300px wide and 50px in height and do a transition in 3 steps and scale upwards as desired. Tracking those dimensions will be critical if you want precision elements, like making a cactus appear as in the video. You can also look at the video info, as Kevin provides his files as a good point of reference, to use as proof of concept, and to play around with the mechanics without a huge time investment. I hope that gets you started in the correct direction. Good luck, you've got this!
@d.l.3807
Жыл бұрын
I learned something with this one. Very nice! Thank you! More tricks please :)
@luisramirez7361
Жыл бұрын
Woooow It's amazing!!! Thanks for shared! You're inspire me on the design much
@quantyquanty3724
Жыл бұрын
A lot of work, lot of thoughts and good contents. Thank you and all the best for next year.
@torind2000
Жыл бұрын
thats cool for sure, thanks for that
@TheGunii18
Жыл бұрын
This is amazing!! Thank you Kevin! Can I ask for some instructions on how to do “mask part” in Affinity Photo? I'm a beginner 😊 Thank you very much for help
@dresan48
10 ай бұрын
Did you ever figure it out?
@shiro_nekos
Жыл бұрын
IDK css do it like this wow applause
@marcelloaz
Жыл бұрын
Kevin you are awesome! Thanks for your explanations! Greetings from 🇧🇷
@ZackPyle
Жыл бұрын
If you're using gsap, animating the mask position on scroll is super easy too with scrolltrigger!
@Zakum
Жыл бұрын
Superb explanations as always!
@ethernaelis
Жыл бұрын
Nice effect !
@CodingAbroad
Жыл бұрын
Kevin have you explored Phaser for front end games? I know it’s different to css but still it’s cool the things you can do
@KevinPowell
Жыл бұрын
I might take a look at it, thanks for the recommendation 😃
@nomad100hd
Жыл бұрын
Great video Kevin!
@mldemigod
Жыл бұрын
super something amazing I'm a beginner, but it blew my brain :), but I think it's better to use After Effect to paint the mask faster workflow. Thanks for the great tut
@pauljohn3898
Жыл бұрын
This is really amazing
@KacperMarciniak_
Жыл бұрын
Thanks, great video as always 😁
@sdn2280
Жыл бұрын
Cool effect!
@PascalHorn
Жыл бұрын
On the one side I'm amazed by this effect and want to use it right away. On the other side, my inner pagespeed optimization monkey is yelling "don't do it, don't you dare." Buuuuut Javascript and onload events could prevent sudden changes by simply waiting for the image, as well as Intersection Observer and preloading the second image could help out, too. Hmmm.... so interesting, so many use cases, yet so much work for one effect on only one single image... But thank you Kevin for this amazing show case. Even those little things like using steps() is news to me and I love every little bit I can learn from your tutorials. 😊
@asdfasdfuhf
Жыл бұрын
What do you mean about pagespeed optimization? I mean, you only need to load two images and then some masks, is that really that bad? It's not like you are loading an entire video. I would think that loading a series of masks requires much less than loading a video; am I in the wrong here?
@PascalHorn
Жыл бұрын
@@asdfasdfuhf Yes, you are actually right. I’m thinking of using this effect in the header image though, and as I saw Kevin’s 300+ KB PNG mask file I was like “that’s not gonna happen on mobile.” But there are ways around that, as Kevin also mentioned. WebP or Avif could help with the file size, preloading as well, and of course not using this effect in the header. 😅
@Maviya-Hasan
Жыл бұрын
Sir these animations are outstanding ,thank you for this tutorial.I request you to make a video on making mask image frame..thank you . -your youtube student.
@Mike-jq7os
Жыл бұрын
mask-image property is very interesting
@RyuBateson218
Жыл бұрын
Very cool effect
@lowEndAppsAndGames
4 ай бұрын
Hey kevin how did you make the mask in photoshop frame by frame?
@HelloThere-xs8ss
Жыл бұрын
Calling things *easy* does injustice to the work it took to think of the idea. This applies to anything.
@nagualdesign
Жыл бұрын
Yep. This is a very, very creative use of relatively simple techniques. Much like a great artist can use a few brushes and paints to create a masterpiece. Kudos to whoever came up with the original idea.
@Tiger1AuasfE
Жыл бұрын
Very nice video, thnx for uploading.
@rodbrowning
Жыл бұрын
Great!!! That's why you are the king.
@rrd_webmania
Жыл бұрын
Amazing az always
@arkemiffo
Жыл бұрын
Just a quick thought I had before I saw the actual solution. Wouldn't be possible to get a very similar effect if you have a colored picture on the bottom, with a jagged picture (transparent edges) layered on top of it, and use mix-blend mode to get the intersection to be black and white, and then just move that picture? If you do it in about a second or so, I don't think it would show that much it's just an edge moving, specially if you do other things to it, like rotate it a bit as well. Sort of a "poor mans" version of the solution. Won't work with adding new elements to the scene though, only the colorchange.
@amjedh7133
Жыл бұрын
great work like always keep going sir
@simplyabdou8425
Жыл бұрын
OMG !!! I play the game and qlways wondered how they did it 😯😯😯
@tercon8870
Жыл бұрын
Fantastic and interesting!
@thanapoomjantararuangtong3797
Жыл бұрын
Superb! it is very nice effect. I couldn't find the link video of how to do the mask in photoshop. Would you mind to provide me a link? I would be greatly appreciated. ^ ^
@HenrikBgelundLavstsen
Жыл бұрын
I think this is one of those: "Its hard to do, until you know how its done."
@j-janz
Жыл бұрын
One thing: 13:01 - *Intersection* Observer, instead of _Observation_ Observer. 😉
@KevinPowell
Жыл бұрын
Yeah... I always call it that for some reason, lol
@j-janz
Жыл бұрын
@@KevinPowell I never thought it was already a habit, it seemed like a distraction at the moment. It sounds funny, like a job where you pretend to be doing something, _observing the observation_. 😆
@metameme_yt
Жыл бұрын
Very observant of you.
@j-janz
Жыл бұрын
@@metameme_yt Excellent one! 😆
@stroutco2070
Жыл бұрын
Hey Kevin! This is a great tutorial, super appealing to me as I have some video editing experience and did something similar to this with a video once! Thanks for the consistent great content, you are one of 4 or 5 channels I would definitely recommend someone check out. I have a question for you, I'm wondering where you stand on WordPress. I have avoided it until recently just because I keep seeing jobs available for it but I'm still... beyond skeptical however also desperate to get a job sooner than later( see bills and food, etc.) Would love some thoughts. Look forward to the next video! -Strout
@stroutco2070
Жыл бұрын
p.s. I did use this to make a cool intro to a site
@code75581
Жыл бұрын
Thanks for this amazing video. Please can you make a video on how use effectively css units like em, rem, px... I mean the best use case to use each one of them. Thanks
@KevinPowell
Жыл бұрын
got you covered :D - kzitem.info/news/bejne/r2ut1nhviKiQh6Q
@code75581
Жыл бұрын
@@KevinPowell Thanks a lot😃
@HomerJSimpson999
Жыл бұрын
if you explain your HTML, i never see an article element in use but instead sections. do you have a video about article semantic meaning? if not could you do a video about articles and usage?
@KevinPowell
Жыл бұрын
Articles are for elements that can stand on their own in a different context. So, like, an actual article, but also a bit more than that. I don't think I have a video specifically on itnthough
@bojidartenev9366
Жыл бұрын
Sponsored by Kevin Powell's knowledge, freely helping your front end career
@Draconicrose
Жыл бұрын
CSS had evolved a LOT since I last played with it! Gamers, go check out Guild Wars 2, it's a thriving MMO and free to play!
@slipoch6635
Жыл бұрын
Could you not use a css filter layer that forces greyscale over it's areas then modify that via mask? This would remove the need for 2 images.
@FranciscoGuardado-kr6pb
Жыл бұрын
Awesome video as always! Question: Can you please make videos of Sine Waves Shapes with code. As in, how to do a romboid, triangle, sphere, many many shapes. I'd really appreciate it so much!!!!
@KevinPowell
Жыл бұрын
When math goes beyond the very basics, I tend to falter a little bit, so I'm not sure I'm the best one for that topic, lol.
@turolretar
Жыл бұрын
I’d say look at clip-path property along with the polygon() function. You can just interpolate any function linearly, which means you can create basically any curve you want. Realistically you would want to use some CSS preprocessor though. I did this to draw squircicles (like an iOS icon).
@maxick
Жыл бұрын
lol, full screen 4k, on a decent PC, and this site is so sloooow, i would try with background movie maybe?
@gamebox8170
Жыл бұрын
thanks kevin you are help me
@marlinho206
Ай бұрын
Goodnight! Amazing video! Parabems! My name is Marlon, I accompany you here in Brazil, in Rio de Janeiro. I'm a fan of your work and your classes. I have been following you for a long time and I have learned a lot from you and I have also been improving my CSS with your help. You are reference here in Brazil. I accompany you in congress also through youtube. In this video I understood the html and css step by step. But the photoshop part to create that kind of mask, to give effect to the css later I did not understand and also could not replicate like you because of the image. Could we teach how to leave the image that way, another way or a simpler and more effective method? Strong embrace!
@pratikpaudel7624
Жыл бұрын
Kevin, Thanks you so much for this video. I tried it and it works great. However, it didn't work in Edge browser. I added -webkit- in the mask property but still it didn't work in edge. Can you guide me how do I solve it? Thanks in advance!!
@lisali6205
Жыл бұрын
it is so cool
@highonlife77
Жыл бұрын
Great Video
@relja_
Жыл бұрын
I just cant get the steps(24) part to work. When i add it to my code it does nothing everything stays the same. Any thoughts on why that might be? (I got it working to this part 10:08) Okay i just figured it out. I used my own animation with 12 frames. But you need to put steps(11) not steps(12) because the first frame doesn't count. Maybe you explained it wrongly here (10:41) or i just didnt understand it right. Anyways great tutorial!
@KevinPowell
Жыл бұрын
Sorry I should have been a little more clear on that part, I sort of brushed quickly over it when it's kind of important!
@clevermissfox
4 ай бұрын
I’m currently struggling with a reverse mask where I have a toggle and some images where the toggle moves back and forth to highlight the image that’s “checked. I want anything not within the toggles circle to be desaturated and only what’s enclosed in the toggle to be saturated, so it’s like a lens or a filter whet only what is underneath that circle has saturation. Used some filters and got close but not a clean curved cut. Hoping that I can use a mask and make an act with a cutout transparent circle and black box frame … tried a radial gradient that’s the same idea but I think how I’ve setup the html is wrong. Sigh. I’ll figure it out though!
@danielbengtsson9833
Жыл бұрын
This feels like the old addage of "when you have a hammer, every problem looks like a nail that needs to get hammered in" - Why not just simply embed a video instead? Seems like less work, for a better end result.
@KevinPowell
Жыл бұрын
I donno, two optimized images plus the mask can be easily under 100kb here, whereas, even with a simple video like this, I'm not so sure you could get it down in size like that? Could be worth looking into though
@SLRModShop
Жыл бұрын
Your question is the equivalent of asking cyclists why they don't use a car instead... This is a channel dedicated to CSS, he did it in CSS... I can't think of a less shocking outcome...
@joelferraz8649
Жыл бұрын
What are the benefits of using this instead of a gif or web animation?
@dabbopabblo
Жыл бұрын
There are so many random ass website that look so cool yet are so random you wonder who they are even made for, or like how that company can even survive considering they are just one in a million
@KharlCabrera
Жыл бұрын
Is there a page or a way to find those mask already created? My skills with PS and that kind of stuff are = -5
@JIu4Ho
Жыл бұрын
I am wondering if you can mask in squares kind of "pixel" like for porfolio website
@pokefreak2112
Жыл бұрын
It's cool we can do this kind of stuff with CSS but it looks kinda janky. Its frustrating knowing this would perform better and be 100x easier to implement with a simple shader
@lubu2960
Жыл бұрын
amazing
@xentric313
Жыл бұрын
Is there a way to use a SVG mask instead of those transparent png frames?
@eaminarafat9130
Жыл бұрын
kevin bro what is mask-animation class explain plz for my comments
@vladropotica5687
Жыл бұрын
Hello Kevin, can you also make those masks in figma? or do you know other apps besides photoshop that can make them?
@vladropotica5687
Жыл бұрын
Also thank you for your videos, i am pretty new in web design, i am currently doing a course and your videos helped me to build a passion for css.
@goodnessdavid6583
Жыл бұрын
Can anyone help me out on how to create the mask image? At 1:36
@francescos7001
Жыл бұрын
With images containing some transparent parts, isn’t it better to use the .webp format?
@KevinPowell
Жыл бұрын
Definitely would be smaller :)
@khemirialaeddine4651
Жыл бұрын
you're cool man
@vinitkasture5471
Жыл бұрын
I was the guy to ask that question! Huh, Thank me later!
@shauny9149
Жыл бұрын
Could you explain the mask image, I'm trying to figure it out. Are the dimensions of the mask the same as the image it is masking, your mask seems to go from top to bottom so I guess the height is some multiple of the image height. or am I thinking about this wrong?
@KevinPowell
Жыл бұрын
I link to a video on the very basics of them in the description, but yes you want the same aspect ratio. Originally my mask had the same dimensions for each frame, but then I made it 1/10th the size so the file size for it wouldn't be incredibly big
@logiccomputer8000
Жыл бұрын
What's you thoughts on chat gpt
@gaychin8654
Жыл бұрын
Good stuff! But I am wondering how to achieve the scrolling effect of the ArenaNet website, anyone has any brief idea on that?
@Sunk72
Жыл бұрын
He adds a link at the end of the video that explains it.
@TheRavageFang
Жыл бұрын
Isn't it using an image instead of a fixed width & height div bad because of layout shifts?
@KevinPowell
Жыл бұрын
Because of the image loading in? You could give the image an actual width and height value to prevent that. Even if you resize the image with CSS after, it tells the browser the aspect-ratio, so it holds that space for it before the image loads in and no content shift :)
@abdufattoxrasulmuhamedov4094
Жыл бұрын
How to create an image mask like this in Photoshop? if anyone knows please answer
@irohwin4336
Жыл бұрын
😌✨🤯🤯
@mareklara
Жыл бұрын
how can i make this png sequence inn photoshop?
@julienkerute3029
Жыл бұрын
hi, I download the code file to try it, but nothing happen, I have only the button " replay the animation " with IE, chrome or firefox , it's the same, maybe someone know how to del with that ? thx
@Ciao_Bambino
Жыл бұрын
some for me with Brave, it isn't working
@priyanshushh
Жыл бұрын
hey guys, is there anyone who can suggest me any blog or video about how to create that mask that he created in this video in photoshop....
@DaDevid
Жыл бұрын
Wow
@ev721
Жыл бұрын
Damn!
@vvvorlds
Жыл бұрын
Before watching - animated svg mask?
@garvani
Жыл бұрын
Why not using .webp instead of .png?
@KevinPowell
Жыл бұрын
webp would've been better and I should have mentioned it during the video.
Пікірлер: 150