How to make a Keyboard Using Flexbox and Neumorphism | Soft UI Design | Html&CSS | CodeEra
Hello everyone, welcome to the new video of CodeEra
Instagram: www.instagram.com/code_era1999
In the following video, I've tried to make a keyboard using the well-known properties of CSS, flexbox, and box-shadow which intern gives a neumorphic effect to my keyboard. This is only the first half of the video, the next of the video contains a complete computer system, which includes a monitor and a keyboard.
It's really been fun to create this simple and wonderful video on Neumorphism and how do its works, and one more thing all the main game is played by the box-shadow property of CSS, which provides an amazing shadow effect so that the box elements look like they are been popped out of the ground, or been pushed into the ground.
I hope you enjoyed the video,
Thank you very much for watching.
Don't ever forget to see my previous videos, the link is given bellow
Time Stamps
---------------------------------------------------------------------------------------------------------------------------
00:24 Creating Keyboard with Html
01:32 Editing the Html model in CSS
01:57 Styling the Keyboard
02:58 Neumorphism effect on Keyboard
03:51 OnClick Neumorphism effect on Keyboard keys
---------------------------------------------------------------------------------------------------------------------------
Queries:
How to design keyboard using only html and css?
How to create neumorphism web components elements using HTML & CSS?
How to create neumorphism soft UI cards?
How to create neumorphism effect on Keyboard using CSS and HTML?
My Code Editor: https://code.visualstudio.com/
My Laptop: https://amzn.to/3pM8Qme
Books I refer: https://amzn.to/32Tb3T0
and books like https://amzn.to/36GHt45,
https://amzn.to/36LhoAP
Neumorphic effects:
• Neumorphic Effects Using Html and CSS...
responsive card hover effect:
• Responsive CSS Card Hover Effect | HT...
Transparent login form using html and css:
• Transparent Login Form using HTML & C...
CSS custom glowing checkbox using html and css:
• CSS Custom Glowing CheckBox Using HTM...
3d animated cube using html and css:
• 3d Animated Cube Using HTML and CSS ...
3d rotating cube animation using html and css:
• 3d Rotating Cube Animation Using HTML...
Landing webpage layout using html and css:
• Landing WebPage Layout Using HTML CSS...
Animated hamburger using html and css:
• Animated Hamburger Using HTML and CSS...
Animated navigation bar using html and css:
• Animated Navigation Bar Using HTML CS...
Animated social media icons:
• Animated Social Media Icons | HTML&CS...
Animated navigation bar using html and css:
• Animated Navigation Bar Using HTML & ...
#codeera#neumorphism#css#html
Music credits:
Song: Erik Lund - One Day In Paradise (Vlog No Copyright Music)
Music promoted by Vlog No Copyright Music.
Video Link: • Video
Disclaimer: The content in the above video is for educational purposes. It is based upon my knowledge that I gained from my learnings and subject of interest. The video is completely edited and posted on the CodeEra channel by me and non of the content is copied or obtained from other sources, Thank you.