You Don’t Need A Lot Of Pixels To Be Classy
Vložit
- čas přidán 26. 08. 2024
- Watch as I show you how to recreate the super classy hover effect from chroniclehq.com.
Support the channel: bit.ly/Support...
Tools used: HTML, CSS
CodePen: bit.ly/CodePen...
Music licensed by Artlist:
WOOLFSON - Learning
I'm not a designer but I think this 1 pixel of interactive color highlight creates an immersion that there's more to the website besides the card you're hovering on. Like something you don't see creates that glow
attracts your eyes (moving objects stands out much more easily)
"And with great power comes grrrrrrrrrrrradient responsibility."
- Hyperplexed, March 21st, 2023
I am a designer!!!! What makes this or feel so special is that it is so small, yet included, its something that only appears on your own interaction, which makes it feel personal to you, and it's such an elegantly small detail (that is just large enough for you to notice) that you really appreciate it, especially along with all the other items on the page that are super easy to hover over, and you almost automatically do so, and all the other items on that card respond, either via rotation, scale, or this light prism showing on them. and its these little details that you notice, but notice are small and think they could be neglected by the normal user that make them seem so damn nice!
TL;DR these items are super eassy to hover over, and these items coming from them trick your brain into thinking theyre small, normally neglegable details, and because they resemble crystals and light beams, they give off some really good vibes.
The fireship of css and design videos. I love your content so much! Thank you!
this
The quality of your videos is beyond impressive, by far my creator at the moment, keep up the amazing work.
Okay, this is my favorite front end tutorial channel. Hands down.
I love that you go about making all of these videos trying to copy the best websites out there and learn what makes them so good. And that's exactly what you want us to try as well.
Could you possibly make a video where you pretend you're a beginner at coding and break down a normal website? Something that you would see in free wix or Squarespace templates?
I would love to see this on your channel. You explain things so nice, quick, and clearly. It's truly inspiring. Thank you!
You might like Kevin Powell
"With great power comes grrrrrradient responsibility"
- some high developer + youtuber
I, too, watched the video.
He did, in fact, say that.
i feel that the line gives off the effect of a realistic high quality card that you could pick up. and along with the rounded corners of the elements actually helps us relate it to real life cards and so it looks pleasant and "correct"
Gradient responsibility 😂 this one liner humour is enough to make my day
The end was the cherry on top. Grrrrrreat work as always :)
Watching you implement things with great simplicity by your comprehensive CSS skills makes me believe I can do so toxicly
You can't believe how thankful I am for these kinds of videos. As a webdev-autodidact, you're helping me so much with my imposter syndrome. Seriously, thanks
Amazing video ! Keep up the hard work
Bro Really Makes Top Quality Content !
Your videos are therapeutic, I wish you made more
more please
0:06 thank you Hyperplexed, I appreciate it, even tho I don't know what I did
Ever since I started watching your videos my thought process has change and my CSS game have improve 😁⭐⭐⭐
Nice
The end got me bro 🤣🤣🤣
It's a neat effect, however, although something this simple won't use much resources at all, people should get in the habit of animating transforms, not the position properties.
In one minute you've compacted and articulated what many take 20 mins to do. My hero 😎💖
I just love your videos, it's so nice to watch, I can understand easily!
i am a simple man. i see a new hyperplex video. i click.
your explanation is impressive! Short and clear I really like it !!
Another banger, and I love it.
I just ran into your channel and you are amazing
I really do aspire to be able videos as amazing quality as you.
We find this so appealing because it reminds us of Chatoyancy! The band of bright lustre caused by reflection on certain stones or... on stainless steel fridge doors.
Do u ever plan to do something like a portfolio review for some of your subscribers, we really look up to you and we want to get your honest opinion about the stuff we create.
elegant and cool
U know what , I m in love with ur videos …..
loved it, don't have words to describe the satisfaction I got!
Dude wake up! There's a new Hyperplexed video!
these re called splices and were used for some old sites they where great for gradients back when tables were popular for layouts and were single pixel (wide or tall) images. man i feel old
Great way to represent how one builds stuff by exploring concepts! Thx yt algorythm 🎉
wise words 🙌
You're good with after effects too
love your channel!! Thanks for this!
you can also observer this design in windows's calendar
Classy!
Nice.
Great video as always!
i am loving your video ❤
That ending xD
Please do a breakdown on iPhone 14 carousel 🙏
I love your channel
"Grrradient responsibility."
lol
You can create a whole series of Micro Interactions in the UX/UI.
my god you are a wizard!
That Pun😂😂
Windows 10 also has this effect when hovering over tiles and settings
Soo cool 🎉
They're fascinating because lizard brain sees minor but fancy interactivity details -> goes brrrr
Please release more vids regularly 😭😭
yeah like... just make more videos. it's that simple
I see it more of a glint, like a shiny object caught in the light
You could use an svg with stroke dash and offset to make this even cooler.
Very cool! Could someone explain why content is set to ""?
Bro left before we could get him
Hey, Hyperplexed! It's an awesome video and tutorial, I'm impressed.
Can you share a tutorial not on a frontend, but on BTS, how do you create this awesome videos? Which programs are you using to create, which tools etc?
Thx in advance:)
Keep in mind you shouldn’t animate top property. Instead, set top static and animate transform translateY to get nice looking and optimized transition ❤
Where's this guy 😭😭😭😭 release more vids man
Kool
i always thought more pixels = more detail but now i see the error of my ways.
The pun got me so hard
I think it's due to the fact that they are both small (non intrusive) but at the same time they stand out? Sort of like highlights but less aggressive.
If I'm not mistaken, Apple has a similar approach with their design don't they? They do elegant minimalist design choices but they aren't "harmless", as they they do stand out despite being minimalist.
Could you make a video on some cool particles
Great vid
Do soundclud next please 🙏
I loved the video as usual, but I wish it was a bit slower paced.
It felt extremely quick, and I didn’t feel like I had much time to process what was happening.
CZcams has speed control (best feature ever) can try .25 speed
@@dmlbs ...they mean the way he's explaining it. they want it more broken down....... they don't literally want him to talk slowly.
you are not meant to, this is not supposed to be a tutorial, it's just a highlight. did you see the feature? good, that's the point
@@YuriG03042 no, this is meant to be a tutorial
Nice!
I've been watching your videos for a good while and can't figure out, if you really love Codepen or get sponsored by them 😅
I was just recently visitng the apple website and saw that iphone 14 has this cool interactive arched carousel where as u change colour the iphone of tht colour moves to the middle and stuff...do u have any idea how to do that kind of carousel.
Frontend KING
Can you make a cs2 website slider tutorial
it's not just looks, but also behavior that matters... if it was just stuck there, me, i would think that someone thought it will be a good idea to hide something, by setting it's width to 1px 🤷😁
how did you get the little dots all over the card?
Isn't it better to use the "transform" property to move rather than "top, left" properties?
Transform doesn't actually change the element itself but moreso how it renders if that makes sense. While that's fine for this, it could cause weird issues for other things
What tools are you using to create your video animations?
Can someone tell me the name of the font family he’s using? :D
What do you use to edit your videos?
like before watching
the bois are early today
Did codepen sponsored you? xD
W
I'm sure this dude just thought the last joke and then made a video about it 🤣🤣🤣
Ok but where's the hacker text?
No way that he just sended the least funny joke ever and eneded de video... what a man
Ok
literal lense flare
This video just reminded me how I absolutely despise css lmao jeez
Fewer pixels.
I had to thumb down due to the corny dad joke at the end.
But love the concept of the actual 1px.
Minimal websites are boring and they suck. Minimal websites like portfolio and other. I dare you to redesign them.
FIRST
Almost first. Better luck next
Do you have a discord? I would like to chat with u and ask some things