Most of us remember a time before flat design, when user interfaces did not consist of minimalist icons and bright colours, but objects designed to look very much like their physical counterparts. This mimicry was a design trend known as skeuomorphism. Skeuomorphic design means making visuals and images look like a realistic imitation of real life objects, by using shadows, gradients, bevels and 3D-effects. Every trend sooner or later is changed by a new one and skeuomorphic design was substituted by a flat design, which is focused on simplicity and which in a way solved the problem of loading times and responsiveness.
Flat design is still prevalent today, while skeuomorphism appears to be completely out of the picture. Others point out that skeuomorphism is making a comeback in virtual reality and augmented reality. For me, Flat Design has reached its peak. A lot of new designs tend to come back to a little bit of Skeuomorphism. So in this post I’ve collected 27 Amazing CSS Skeuomorphic Designs for inspiration.
1. Apple Keyboard
See the Pen Apple Keyboard by Jon Kantner (@jkantner) on CodePen.
2. Photorealistic pure CSS mobile phone
See the Pen Photorealistic pure CSS mobile phone by Grzegorz Witczak (@Wujek_Greg) on CodePen.
3. App Icon – Setting
See the Pen App Icon – Setting by nicolazj (@nicolazj) on CodePen.
4. Polaroid Snap Realistic
See the Pen
Polaroid Snap Realistic by William A. | Keyon (@Keyon)
on CodePen.
5. Pure CSS IOS Buttons
See the Pen purely pure css ios buttons by Daljeet Dhaliwal (@daljeet) on CodePen.
6. Polaroid Camera
See the Pen Polaroid Camera – Old Pictures to CSS by Malaika Ishtiaq (@MalaikaIshtiaq) on CodePen.
7. App Icon – Slow Shutter Cam
See the Pen App Icon – Slow Shutter Cam by nicolazj (@nicolazj) on CodePen.
8. Colorful CSS3 Icons
See the Pen Colorful CSS3 Icons by Tomas Dostal (@tomino) on CodePen.
9. Tape Cassette Icon – CSS Only
See the Pen Tape Cassette Icon – CSS Only by John Urbank (@jurbank) on CodePen.
10. Weather & Clock iOS7 Icons in CSS
See the Pen Weather & Clock iOS7 Icons in CSS by Matthew A.K. Smith (@akselkreis) on CodePen.
11. Vintage Analog TV
See the Pen Vintage Analog TV by Jon Kantner (@jkantner) on CodePen.
12. Skeuomorphic Audio Player
See the Pen Skeuomorphic Audio Player by Josh Bader (@joshbader) on CodePen.
13. BIG KNOB (Pure CSS)
See the Pen BIG KNOB (Pure CSS) by Josh Bader (@joshbader) on CodePen.
14. Javascript Calculator
See the Pen Javascript Calculator by Swapnil Sharma (@swapsha96) on CodePen.
15. Analog Clock with html, css & js
See the Pen Analog Clock with html, css & js by Kyosuke (@ky0suke) on CodePen.
16. Light Switch Toggle
See the Pen Light Switch Toggle by Cassidy Williams (@cassidoo) on CodePen.
17. Real Polaroid
See the Pen Real Polaroid by HIC (@HIC) on CodePen.
18. Interactive Nintendo GameBoy (Only CSS3 + JS sound)
See the Pen Interactive Nintendo GameBoy (Only CSS3 + JS sound) by Manz (@manz) on CodePen.
19. BIG Jelly Button
See the Pen BIG Jelly Button – original by madgraphism by Arron Hunt (@arronhunt) on CodePen.
20. Confetti button
See the Pen Confetti button by Mikael Ainalem (@ainalem) on CodePen.
21. Loading 3D ROD
See the Pen Loading 3D ROD by Samuelllr (@samuellr) on CodePen.
22. CSS BEER!
See the Pen CSS BEER! by Mike Golus (@mikegolus) on CodePen.
23. Pure CSS Still Life – Water and Lemons
See the Pen Pure CSS Still Life – Water and Lemons by Ben Evans (@ivorjetski) on CodePen.
24. The New 2019 Mac Pro: How to Open
See the Pen The New 2019 Mac Pro: How to Open by Josh Bader (@joshbader) on CodePen.
25. Nintendo Switch Pure CSS
See the Pen Nintendo Switch Pure CSS by K750i (@k750i) on CodePen.
26. Pure CSS Bulb Switch
See the Pen Pure CSS Bulb Switch by Grzegorz Witczak (@Wujek_Greg) on CodePen.
27. CSS Camera
See the Pen CSS Camera by Cassidy Williams (@cassidoo) on CodePen.