Apple Aluminium Keyboard Made In CSS

Chris Michel fancied himself a new challenge with CSS, looking around his room for inspiration his eyes eventually settled on the keyboard we’ve all grown to love from Apple.
Created entirely from CSS, this is just too great not to share with everyone. The details are amazing, clicking the buttons, and the caps lock even has the little green light in it!

Unlike simpler CSS projects which often rely on basic shapes and minimalistic styles, Michel’s keyboard showcases a well thought use of gradients, box shadows, and pseudo-elements that mimic the physical attributes of a real keyboard. The attention to detail is evident in each key’s design and the interactive elements like the clickable buttons and the caps lock indicator.

Best viewed in Safari and Google Chrome, make sure you click here to see it in all it’s glory, and over here to read Chris’s blog about how he went towards putting it together.

The creation of Michel’s keyboard can also be viewed as a milestone in the evolution of web design techniques, particularly the use of CSS. Before the widespread adoption of advanced CSS properties, web design was largely constrained by limitations in styling and interactivity. However, as CSS evolved, it unlocked new potential for designers. By now, CSS had matured significantly, which gave all the tools needed for the creation of designs that are not just functional but also aesthetically pleasing. The Apple Aluminum Keyboard made in CSS is a standing proof of this transition and serves as a great example of the growing versatility of web technologies and their application in creating detailed, interactive web elements.

Hey, I'm Simon Wicks. By day I'm a 27 year old media designer for in London UK, by night I'm a tech and social media addicted pro cheese taster. Ok, so maybe not a pro cheese taster, but everyone… Full Bio