You Don’t Need A Lot Of Pixels To Be Classy

  Рет қаралды 122,759

Hyperplexed

Hyperplexed

Жыл бұрын

Watch as I show you how to recreate the super classy hover effect from chroniclehq.com.
Support the channel: bit.ly/SupportHyperplexed
Tools used: HTML, CSS
CodePen: bit.ly/CodePenAccentShard
Music licensed by Artlist:
WOOLFSON - Learning

Пікірлер: 115
@makiroll6815
@makiroll6815 Жыл бұрын
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
@kaydenthat8222
@kaydenthat8222 Жыл бұрын
attracts your eyes (moving objects stands out much more easily)
@qwerty_qwerty
@qwerty_qwerty Жыл бұрын
"And with great power comes grrrrrrrrrrrradient responsibility." - Hyperplexed, March 21st, 2023
@Z2r
@Z2r Жыл бұрын
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.
@notnullbit
@notnullbit Жыл бұрын
The fireship of css and design videos. I love your content so much! Thank you!
@d-rose27
@d-rose27 Жыл бұрын
this
@prod.jacxbmo
@prod.jacxbmo Жыл бұрын
The quality of your videos is beyond impressive, by far my creator at the moment, keep up the amazing work.
@gregou9885
@gregou9885 Жыл бұрын
The end was the cherry on top. Grrrrrreat work as always :)
@raicyceprine8953
@raicyceprine8953 Жыл бұрын
Gradient responsibility 😂 this one liner humour is enough to make my day
@orange1890
@orange1890 Жыл бұрын
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"
@diegolucano3354
@diegolucano3354 Жыл бұрын
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!
@koenahn
@koenahn Жыл бұрын
You might like Kevin Powell
@thanapoomjantararuangtong3797
@thanapoomjantararuangtong3797 Жыл бұрын
your explanation is impressive! Short and clear I really like it !!
@danherzl
@danherzl Жыл бұрын
I just love your videos, it's so nice to watch, I can understand easily!
@FishTechX
@FishTechX Жыл бұрын
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.
@chinmayk8004
@chinmayk8004 Жыл бұрын
Watching you implement things with great simplicity by your comprehensive CSS skills makes me believe I can do so toxicly
@futurabusiness
@futurabusiness Жыл бұрын
Amazing video ! Keep up the hard work
@matt_z_07
@matt_z_07 Жыл бұрын
I'm learning Java, HTML, CSS and possibly JavaScript and I'm finally understanding some of the code!
@thatFarHunt
@thatFarHunt Жыл бұрын
Feels satisfying isn't it?
@minnow1337
@minnow1337 Жыл бұрын
If you’re learning html and css why have you chosen to learn java over js
@-Average-
@-Average- Жыл бұрын
@@minnow1337 probably a college course
@treedruids5776
@treedruids5776 Жыл бұрын
@@minnow1337 I can relate to this LOL I'm in uni and while my interest lays on HTML, CSS and JS, some of the courses taught here are to do with Java. I do appreciate knowing more languages though
@sahildas.
@sahildas. Жыл бұрын
The end got me bro 🤣🤣🤣
@coder-twadd
@coder-twadd Жыл бұрын
love your channel!! Thanks for this!
@Blaster_Unity_UB
@Blaster_Unity_UB Жыл бұрын
Another banger, and I love it.
@nakam360
@nakam360 Жыл бұрын
Ever since I started watching your videos my thought process has change and my CSS game have improve 😁⭐⭐⭐
@Broiscaptainlevi
@Broiscaptainlevi Жыл бұрын
Bro Really Makes Top Quality Content !
@OsamaHJT
@OsamaHJT Жыл бұрын
I just ran into your channel and you are amazing
@AsToNlele
@AsToNlele Жыл бұрын
Great video as always!
@nomansajid5126
@nomansajid5126 Жыл бұрын
loved it, don't have words to describe the satisfaction I got!
@thefilteredcoder
@thefilteredcoder Жыл бұрын
I really do aspire to be able videos as amazing quality as you.
@MathGeekQ
@MathGeekQ Жыл бұрын
elegant and cool
@mannycalavera121
@mannycalavera121 Жыл бұрын
Your videos are therapeutic, I wish you made more
@Kolpaja
@Kolpaja Жыл бұрын
more please
@yadhusanil7077
@yadhusanil7077 Жыл бұрын
i am loving your video ❤
@Kronical_Lpd
@Kronical_Lpd Жыл бұрын
0:06 thank you Hyperplexed, I appreciate it, even tho I don't know what I did
@timothyoesch1108
@timothyoesch1108 Жыл бұрын
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
@danuvip
@danuvip Жыл бұрын
wise words 🙌
@dev_jono
@dev_jono Жыл бұрын
In one minute you've compacted and articulated what many take 20 mins to do. My hero 😎💖
@iwantfrens5804
@iwantfrens5804 Жыл бұрын
I love your channel
@ApurvaKashyap-kj6qz
@ApurvaKashyap-kj6qz Жыл бұрын
U know what , I m in love with ur videos …..
@xdm561
@xdm561 Жыл бұрын
Nice
@MrAlexutzu007
@MrAlexutzu007 Жыл бұрын
my god you are a wizard!
@juliantoscani548
@juliantoscani548 Жыл бұрын
Great way to represent how one builds stuff by exploring concepts! Thx yt algorythm 🎉
@matt_z_07
@matt_z_07 Жыл бұрын
LET'S GO NEW HYPERPLEXED VID
@hazemabdennadher5379
@hazemabdennadher5379 Жыл бұрын
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.
@natasfresas
@natasfresas Жыл бұрын
You're good with after effects too
@dinoDonga
@dinoDonga Жыл бұрын
i am a simple man. i see a new hyperplex video. i click.
@Kokice5
@Kokice5 Жыл бұрын
Classy!
@silentassailant3905
@silentassailant3905 Жыл бұрын
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
@AlxM96
@AlxM96 Жыл бұрын
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.
@Z3ROR
@Z3ROR Жыл бұрын
You could use an svg with stroke dash and offset to make this even cooler.
@Way_Of_The_Light
@Way_Of_The_Light Жыл бұрын
Soo cool 🎉
@Bard_Gaming
@Bard_Gaming Жыл бұрын
Dude wake up! There's a new Hyperplexed video!
@rudwan
@rudwan Жыл бұрын
Great vid
@reedamm
@reedamm 11 ай бұрын
you can also observer this design in windows's calendar
@Hari983
@Hari983 Жыл бұрын
Nice!
@spooderous
@spooderous Жыл бұрын
Nice.
@windstepgaming5225
@windstepgaming5225 Жыл бұрын
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:)
@JuicyBenji
@JuicyBenji Жыл бұрын
That ending xD
@Nichigo-here
@Nichigo-here Жыл бұрын
Please do a breakdown on iPhone 14 carousel 🙏
@sumitmehra5119
@sumitmehra5119 Жыл бұрын
That Pun😂😂
@blaitehere
@blaitehere Жыл бұрын
"Grrradient responsibility." lol
@one4all42
@one4all42 Жыл бұрын
Please release more vids regularly 😭😭
@YuriG03042
@YuriG03042 Жыл бұрын
yeah like... just make more videos. it's that simple
@aps69
@aps69 Жыл бұрын
"With great power comes grrrrrradient responsibility" - some high developer + youtuber
@justindarnell3788
@justindarnell3788 Жыл бұрын
I, too, watched the video.
@louisant1817
@louisant1817 Жыл бұрын
He did, in fact, say that.
@khimphearom4245
@khimphearom4245 Жыл бұрын
Kool
@AEw5JdbLyvEF
@AEw5JdbLyvEF Жыл бұрын
Do soundclud next please 🙏
@HiImKyle
@HiImKyle Жыл бұрын
I see it more of a glint, like a shiny object caught in the light
@vasiovasio
@vasiovasio 9 ай бұрын
You can create a whole series of Micro Interactions in the UX/UI.
@zen8400
@zen8400 Жыл бұрын
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.
@maestreiluminati87
@maestreiluminati87 Жыл бұрын
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.
@Rudxain
@Rudxain 9 ай бұрын
Windows 10 also has this effect when hovering over tiles and settings
@muffina672
@muffina672 Жыл бұрын
Could you make a video on some cool particles
@rishabhmittal1240
@rishabhmittal1240 9 ай бұрын
Very cool! Could someone explain why content is set to ""?
@igeprogrammer
@igeprogrammer 8 ай бұрын
Bro left before we could get him
@alvaroschroll7565
@alvaroschroll7565 Жыл бұрын
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 😅
@blaxbla8396
@blaxbla8396 Жыл бұрын
What tools are you using to create your video animations?
@tcortega
@tcortega Жыл бұрын
What do you use to edit your videos?
@pieordie7
@pieordie7 Жыл бұрын
i always thought more pixels = more detail but now i see the error of my ways.
@MoDrazzz
@MoDrazzz Жыл бұрын
Keep in mind you shouldn’t animate top property. Instead, set top static and animate transform translateY to get nice looking and optimized transition ❤
@one4all42
@one4all42 Жыл бұрын
Where's this guy 😭😭😭😭 release more vids man
@ultimateperson626
@ultimateperson626 Жыл бұрын
how did you get the little dots all over the card?
@tylerpetrov8094
@tylerpetrov8094 Жыл бұрын
The pun got me so hard
@hassanabuishaiba700
@hassanabuishaiba700 Жыл бұрын
like before watching
@DKytgaming72
@DKytgaming72 Жыл бұрын
Can you make a cs2 website slider tutorial
@_aurora60
@_aurora60 7 ай бұрын
Can someone tell me the name of the font family he’s using? :D
@Technoph1le
@Technoph1le Жыл бұрын
Isn't it better to use the "transform" property to move rather than "top, left" properties?
@imaadhaq540
@imaadhaq540 Жыл бұрын
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
@JacobBumgarner
@JacobBumgarner Жыл бұрын
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.
@dmlbs
@dmlbs Жыл бұрын
KZfaq has speed control (best feature ever) can try .25 speed
@socialist-oat
@socialist-oat Жыл бұрын
@@dmlbs ...they mean the way he's explaining it. they want it more broken down....... they don't literally want him to talk slowly.
@YuriG03042
@YuriG03042 Жыл бұрын
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
@socialist-oat
@socialist-oat Жыл бұрын
@@YuriG03042 no, this is meant to be a tutorial
@treedruids5776
@treedruids5776 Жыл бұрын
They're fascinating because lizard brain sees minor but fancy interactivity details -> goes brrrr
@phpstarter
@phpstarter Жыл бұрын
Frontend KING
@zoladkow
@zoladkow Жыл бұрын
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 🤷😁
@daleryanaldover6545
@daleryanaldover6545 Жыл бұрын
the bois are early today
@Mawsdtheking
@Mawsdtheking Жыл бұрын
W
@losio6879
@losio6879 Жыл бұрын
Did codepen sponsored you? xD
@palmossi
@palmossi Жыл бұрын
Ok
@faokie
@faokie Жыл бұрын
Ok but where's the hacker text?
@johntzortzakis4336
@johntzortzakis4336 Жыл бұрын
I'm sure this dude just thought the last joke and then made a video about it 🤣🤣🤣
@luanxavierrodrigues5969
@luanxavierrodrigues5969 6 ай бұрын
No way that he just sended the least funny joke ever and eneded de video... what a man
@hil449
@hil449 11 ай бұрын
This video just reminded me how I absolutely despise css lmao jeez
@ImDino
@ImDino Жыл бұрын
Fewer pixels.
@deatho0ne587
@deatho0ne587 Жыл бұрын
I had to thumb down due to the corny dad joke at the end. But love the concept of the actual 1px.
@i_make_beats
@i_make_beats Жыл бұрын
FIRST
@matt_z_07
@matt_z_07 Жыл бұрын
Nope :/
@Hari983
@Hari983 Жыл бұрын
Almost first. Better luck next
@slowcodersloth
@slowcodersloth Жыл бұрын
Minimal websites are boring and they suck. Minimal websites like portfolio and other. I dare you to redesign them.
@Emr3letzemre
@Emr3letzemre Жыл бұрын
Do you have a discord? I would like to chat with u and ask some things
Recreating An EPIC Hover Effect
7:01
Hyperplexed
Рет қаралды 183 М.
ImNotGoodEnough.js
11:11
Hyperplexed
Рет қаралды 887 М.
Balloon Stepping Challenge: Barry Policeman Vs  Herobrine and His Friends
00:28
Why You Should Always Help Others ❤️
00:40
Alan Chikin Chow
Рет қаралды 104 МЛН
Please be kind🙏
00:34
ISSEI / いっせい
Рет қаралды 40 МЛН
We Got Expelled From Scholl After This...
00:10
Jojo Sim
Рет қаралды 29 МЛН
How to take your front-end skills TO THE MOON
4:47
Hyperplexed
Рет қаралды 250 М.
I tried the polyrhythm trend
2:47
SpringySpring04
Рет қаралды 37 М.
Building The Extraordinary Using Only The Ordinary
6:37
Hyperplexed
Рет қаралды 323 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 904 М.
It's time to talk about these UI trends
9:09
Juxtopposed
Рет қаралды 463 М.
I Fired a CSS Cannon at a Famous Streamer
3:28
Hyperplexed
Рет қаралды 411 М.
I Redesigned Popular Websites (Quora & Steam)
6:25
Hyperplexed
Рет қаралды 319 М.
becoming smart is easy, actually
7:33
easy, actually
Рет қаралды 4,9 МЛН
You Don't Need JavaScript For This - CSS ONLY Infinite Scroll
23:35
Slaying The Dragon
Рет қаралды 53 М.
Balloon Stepping Challenge: Barry Policeman Vs  Herobrine and His Friends
00:28