CodePen.io is a great online tool that allows you build CSS, Javascript, and HTML snippets. It’s easy to share your code and get feedback from other developers and web designers. I’ve searched for some of the best and trendy material design code pens ( CSS, JS and HTML) that you might implement into your next project. These code examples will save you a lot of time. If you want to integrate some of material design features or CSS elements into your website, this list will definitely help you.
1. Material Design Hamburger
Android’s Material Design hamburger animation built in CSS (with a sprinkle of JS).
See the Pen Material Design Hamburger by Chris Wheatley (@swirlycheetah) on CodePen.
2. Circle Hover Effect
Creates a Material Design style hover effect. The circle size is based on a percentage of it’s parent so it’s, for the most part, responsive to font size, element size, and other changes.
See the Pen Circle Hover Effect by Patrick Hill (@patrickhill) on CodePen.
3. Material Design (CSS-based) – Tiles
See the Pen Material Design (CSS-based) – Tiles by Sergey Kupletsky (@zavoloklom) on CodePen.
4. Material design morphing icons
See the Pen Material design morphing icons 2 by Alberto Bonvicin (@albebonv) on CodePen.
5. CSS Animation Material Design
See the Pen CSS Animation Material Design by Michiel Bijl (@Michiel) on CodePen.
6. Material Design – Typography
You can read more about Material Design fonts here
See the Pen Material Design – Typography by Sergey Kupletsky (@zavoloklom) on CodePen.
7. [SCSS] Configurable animated Material Design Menu Button
A configurable Material Design menu button with SCSS.
See the Pen [SCSS] Configurable animated Material Design Menu Button by Eduard Mayer (@codewunder) on CodePen.
8. Material Design Login Concept
A quick concept using material design style for a login screen. The class “ripple” sets the ripple effect and the property “data-ripple-color” changes the default white to a different ripple color.
See the Pen Material Design Login Concept by Craig Tuttle (@Craigtut) on CodePen.
9. Material Design Preloader
A CSS only solution that recreates the Material Design preloader; or, who needs jQuery anyway?You should set aria-busy to false when your stuff is loaded.
Tests:
Primarily tested in Safari 8 with VoiceOver on OS X 10.10 Yosemite.
Also tested in these browsers:
Firefox 33 on OS X 10.10 Yosemite
Firefox 16 on OS X 10.10 Yosemite
Chrome 38 on OS X 10.10 Yosemite
Internet Explorer 11 on Windows 7
Internet Explorer 10 on Windows 7
Usable in these browsers:
Anything that support ARIA attributes, well, for screen reader users anyway.
You could load a fallback animated gif.
Broken in these browsers
Anything that doesn’t support keyframes
See the Pen Material Design Preloader by Michiel Bijl (@Michiel) on CodePen.
10. Authentic Material Design Shadows without Web Components
Many web designers are trying to make the Material Design shadows. They all tend to be slightly wrong and at close inspection look nothing like Google’s original. Ben Strahan found that Polymer had the best CSS implementation of the shadows but they were placed there by Web Component’s and the Shadow DOM which does not help about 99% of us (yet!). The shadows in this pen use pseudo elements to achieve the exact same quality as the Google spec. Enjoy!
See the Pen Authentic Material Design Shadows without Web Components by Ben Strahan (@benstr) on CodePen.
11. Google Material Design Buttons
A pen of buttons with Google’s New Material Design
See the Pen Google Material Design Buttons by Sean D’Auria (@seand) on CodePen.
12. Material Design Blog
Just a simple blog featuring the material design style.
See the Pen Material Design Blog by Chris Frees (@chrisfrees) on CodePen.
13. Material Design Ink Effect
This replicates the ink effects described in Google’s material design spec.
See the Pen Material Design Ink Effect by rk1024 (@rookie1024) on CodePen.
14. Loader – Material design
Inspired by Google Design and by the #Polymer project.
See the Pen Loader – Material design by Pitouille2 (@pitouille2) on CodePen.
15. Material Design Shadows CSS
Adaptation of Google’s material design shadows to represent depth in Stylus
See the Pen Material Design Shadows CSS by Herbert Freyre (@herbertfj) on CodePen.
16. Material Design Drop Animation
A similar UI convention is found within Google’s Material Design language. Developer Jesse Couch wanted to riff on that a bit. This animation doesn’t use canvas.
See the Pen Material Design Drop Animation by Jesse Couch (@designcouch) on CodePen.
17. Material Design Menu
Material design inspired ‘growing’ menu.
See the Pen Material Design Menu by Arjan Jassal (@arjancodes) on CodePen.
18. CSS material design switch
See the Pen css material design switch by Kai Waddington (@waddington) on CodePen.
19. Material Design Chat
A replication of Googles Messenger app with some basic functionality. Using Jade, SCSS, and ES6 via Tracuer and Animate.css for animations.
See the Pen Material Design Chat by Blake Tarter (@blaketarter) on CodePen.
20. Portfolio Website Header
See the Pen Portfolio Header by Brandon Cranmore (@becandoo) on CodePen.
21. Material Design Player
Used Font Awesome for the icons.
Semi-functional: volume works, pause and play works, track works.
See the Pen Material Design Player by Colin Hall-Coates (@Oka) on CodePen.
22. Material Design Portfolio
See the Pen Material Design Portfolio by Tom Mclean (@mclean_tom_) on CodePen.
23. Material Design Upload Wireframe
See the Pen Material Design Upload Wireframe by Irem Lopsum (@iremlopsum) on CodePen.
24. Google material style checkbox (css only)
Checkboxes based on material design implementation of the polymer checkboxes. They don’t fully replicate, but are just an exercise to imitate checkboxes with css only. These only work in Chrome.
See the Pen Google material style checkbox (css only) by Sam (@Sambego) on CodePen.
25. Fancy Navigation
Based on animations and UI from the wonderful world of Material Design.
See the Pen Fancy Navigation by Jeff McCarthy (@jeffmccarthyesq) on CodePen.
#showcase #materialdesign #mockup #design #websites #examples
Regarding all those validation testing, you have to take them with a pinch of salt. Validators are there to provide some kind of guidance to web developer and designers to follow good coding practice or to detect careless mistakes (especially with placement and syntax). Once you are able to start writing semantic codes, you will be relying less on those validators as you know that you are writing good codes by adhering Web Standards.