DEV Community

Cover image for ๐ŸŽฎ CSS Nintendo Switch (Box Shadow & Gradient Practice)
Tee
Tee

Posted on • Updated on

๐ŸŽฎ CSS Nintendo Switch (Box Shadow & Gradient Practice)

Hello world. I've missed you all. I hope you all are happy, healthy, and well โค๏ธ

After some major life changes and enormous projects, it's great to be back! I'm conjuring up on a new animation video involving the Nintendo Switch ๐Ÿ˜Š I wanted to improve my use of box-shadows, so I challenged myself to make a realistic looking Switch. My fiancรฉ then had the splendid idea of showing gameplay on the screen--what an ideal opportunity to spread more ACNH euphoria!

It was gratifying to apply box-shadows meticulously. I look forward to sharing the Switch animation when it's done. There were some fun challenges and learning outcomes I'm itching to share with this animation video.

I'll document my process differently, with an accompanying article on DEV. Now that my schedule's subsided, I can't wait to share more content with you all.

Please don't hesitate to reach out if you have any questions ๐Ÿ˜Š Have a great day!

๐Ÿ–ผ CodePen ๐ŸŽฅ YouTube ๐Ÿ‘ฉ๐Ÿพโ€๐Ÿ’ป GitHub ๐ŸŽ€ Instagram

Top comments (25)

Collapse
 
bramleydev profile image
Anthony Bramley

Woah! I need a map of where you got all of that time, patience, and talent from! What you've done with just CSS is amazing to me, especially since I tried this a while back and failed worse than you'd be able to imagine. I hope to see you do more great things with CSS like this in the near future!

Collapse
 
acupoftee profile image
Tee • Edited

Thank you for the kind words Anthony!

I need a map of where you got all of that time, patience, and talent from!

The patience, time, and results came from the will to try and have fun! Failure is unnerving, but it's how we view and handle failure that makes a difference. View it as a learning experience. Ask yourself why this outcome took place instead of the desired outcome. More importantly, have fun with the process! Once you learn the basics, see what you can come up with. I learned most of what I know from MDN's CSS Basics article, and MDN's CSS Concepts page. Once I got the basics, I just had fun with it. Haha people totally judged me at first, but that didn't stop me from doing it. I was learning and having fun! You know what they say, "Creativity is intelligence having fun." You can do it. Take your time with it, don't compare yourself to others, let yourself have fun with the learning process, and style away! Best of luck. ๐Ÿ™‚

Collapse
 
raghavmisra profile image
Raghav Misra

Hey Bramley

Collapse
 
techtoroms profile image
Techtoroms

Nintendo DS ROMS. What are they? Simply put, they're game files. But these aren't just any game files - they're the best of the best. Nintendo DS ROMS are the cream of the crop when it comes to portable gaming.

Collapse
 
nickytonline profile image
Nick Taylor

This looks amazing! ๐Ÿ”ฅ ๐Ÿ‘๐Ÿป

Collapse
 
acupoftee profile image
Tee

Thank you so much Nick! It was exciting to work on. It was a nice way to train my eye to visualize shadows with CSS too.

Collapse
 
greedybrain profile image
Naya Willis

The gameplay is CSS too? Or just the switch?

Collapse
 
squidbe profile image
squidbe

The gameplay is a video (see the source code). If it were CSS, my head would explode. ๐Ÿคฏ

Collapse
 
greedybrain profile image
Naya Willis

Absolutely

Collapse
 
acupoftee profile image
Tee • Edited

That is correct, the gameplay is a video ๐Ÿ™‚

CSS gameplay a great idea!

Collapse
 
nandorholozsnyak profile image
Nรกndor Holozsnyรกk

Absolutely amazing! Good job. Sometimes I can not understand what CSS is capable :D

Collapse
 
acupoftee profile image
Tee

Thank you Nรกndor!

Sometimes I can not understand what CSS is capable

Same here. It's mind boggling seeing intricate and immersive visuals produced with CSS.

Collapse
 
tatianacodes profile image
Tatiana

I have to try this.

Collapse
 
acupoftee profile image
Tee

Totally! Box shadows are so much fun. A random object around the house is a good start, or something off of an image. Mozilla Developer Network is a handy resource for experimenting with properties as well. Have fun! Look forward to seeing what you come up with ๐Ÿ™‚

Collapse
 
acupoftee profile image
Tee

Thank you Naida! :D

Collapse
 
greedybrain profile image
Naya Willis

You the best Dj Khaled voice

Collapse
 
squidbe profile image
squidbe

The shadows were the hard part?! ๐Ÿ˜ณ

Awesome job!

Collapse
 
acupoftee profile image
Tee

Thank you squid! They totally were at first since I didn't use them to its full potential until now. Once I figured out how to translate the shadows from my reference as meticulously as possible with the right units, it became so much easier. ๐Ÿ™‚

Collapse
 
darryl profile image
Darryl Young

This is brilliant! Great work, Elisabeth.

Collapse
 
acupoftee profile image
Tee

Thank you Darryl!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.