CSS3 Bar Graphs Design - Snippet

--- jQuery jQuery UI Bootstrap Angular Backbone D3 Ember GreenSock TweenMax Handlebars Lodash Modernizr Polymer React React DOM Snap.svg Three.js Underscore Zepto ZingChart

--- Bootstrap Foundation Animate.css

• Preview
• HTML
• CSS
• JS

<ul class="graph"> <li></li> <li></li> <li></li> </ul>

body { padding: 50px; } .graph { position: relative; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; width: 120px; height: 150px; padding: 5px 10px; background: -webkit-linear-gradient(top, #eee 50%, white 50%); background: -moz-linear-gradient(top, #eee 50%, white 50%); background: -o-linear-gradient(top, #eee 50%, white 50%); background: -ms-linear-gradient(top, #eee 50%, white 50%); background: linear-gradient(top, #eee 50%, white 50%); -webkit-background-size: 1px 40px; -moz-background-size: 1px 40px; background-size: 1px 40px; list-style: none; } .graph li { position: relative; float: left; width: 28px; height: 100px; margin-top: 45px; margin-right: 10px; background-color: #1B9BE0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #1687C4; border-top-width: 3px; -webkit-box-shadow: 0 0 10px rgba(111,184,247,0.5), inset 0 0 2px rgba(255, 255, 255, 0.7), inset 0 0 40px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 10px rgba(111,184,247,0.5), inset 0 0 2px rgba(255, 255, 255, 0.7), inset 0 0 40px rgba(0,0,0,0.1); box-shadow: 0 0 10px rgba(111,184,247,0.5), inset 0 0 2px rgba(255, 255, 255, 0.7), inset 0 0 40px rgba(0,0,0,0.1); } .graph li:before { content: ""; position: absolute; display: block; bottom: 15px; left: -1px; z-index: 0; position: absolute; -webkit-box-shadow: 0 20px 10px rgba(0,0,0,0.1); -moz-box-shadow: 0 20px 10px rgba(0,0,0,0.1); box-shadow: 0 20px 10px rgba(0,0,0,0.1); width: 28px; height: 10px; } .graph li:nth-child(2) { height: 130px; margin-top: 15px; background-color: #E8258A; border-color: #C91A75; -webkit-box-shadow: 0 0 10px rgba(250,107,181,0.5), inset 0 0 2px rgba(255, 255, 255, 0.7), inset 0 0 40px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 10px rgba(250,107,181,0.5), inset 0 0 2px rgba(255, 255, 255, 0.7), inset 0 0 40px rgba(0,0,0,0.1); box-shadow: 0 0 10px rgba(250,107,181,0.5), inset 0 0 2px rgba(255, 255, 255, 0.7), inset 0 0 40px rgba(0,0,0,0.1); } .graph li:nth-child(3) { height: 50px; margin-top: 95px; margin-right: 0; background-color: #1FD15E; border-color: #17A649; -webkit-box-shadow: 0 0 10px rgba(81,245,103,0.5), inset 0 0 2px rgba(255, 255, 255, 0.7), inset 0 0 40px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 10px rgba(81,245,103,0.5), inset 0 0 2px rgba(255, 255, 255, 0.7), inset 0 0 40px rgba(0,0,0,0.1); box-shadow: 0 0 10px rgba(81,245,103,0.5), inset 0 0 2px rgba(255, 255, 255, 0.7), inset 0 0 40px rgba(0,0,0,0.1); }

Tutorials Palace 17 December, 2018 No Comments

116 Views