/** * NO JAVASCRIPTs WERE HARMED IN THE MAKING OF THIS IMAGE * GO AHEAD AND CHECK OUT THE HTML, CSS AND RESULT TABS */
<img src="http://d.yimg.com/jc/ydn/speedometer.png"> <div class="ys" style="width:250px"> <div class="a"> <div class="b"> <div class="c"> <div class="d"> <div class="e"> <div class="f"></div> <div class="g"></div> <div class="t t1"></div> <div class="t t2"></div> <div class="t t3"></div> <div class="t t4"></div> <div class="t t5"></div> <div class="t t6"></div> <div class="t t7"></div> <div class="p"> <div class="pw"> <div class="pi"> <div class="pl"></div> </div> <div class="pi"> <div class="pr"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="ys" style="width:50%"> <div class="a"> <div class="b"> <div class="c"> <div class="d"> <div class="e"> <div class="f"></div> <div class="g"></div> <div class="t t1"></div> <div class="t t2"></div> <div class="t t3"></div> <div class="t t4"></div> <div class="t t5"></div> <div class="t t6"></div> <div class="t t7"></div> <div class="p"> <div class="pw"> <div class="pi"> <div class="pl"></div> </div> <div class="pi"> <div class="pr"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
/* borders and background */ .ys .a {padding:1.5%; -moz-border-radius:100% 100% 0 0 / 166% 166% 0 0; -webkit-border-top-left-radius:1000em; -webkit-border-top-right-radius:1000em; border-radius:100% 100% 0 0 / 166% 166% 0 0; background: #b0b4b7; background: -moz-linear-gradient(left, #b0b4b7 8%, #3f3f40 54%); background: -webkit-gradient(linear, left top, right top, color-stop(8%,#b0b4b7), color-stop(54%,#3f3f40)); background: -webkit-linear-gradient(left, #b0b4b7 8%,#3f3f40 54%); background: -o-linear-gradient(left, #b0b4b7 8%,#3f3f40 54%); background: -ms-linear-gradient(left, #b0b4b7 8%,#3f3f40 54%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b0b4b7',endColorstr='#3f3f40',GradientType=1); background: linear-gradient(left, #b0b4b7 8%,#3f3f40 54%); } .ys .b {padding:5% 5% 0 5%; -moz-border-radius:100% 100% 0 0 / 166% 166% 0 0; -webkit-border-top-left-radius:1000em; -webkit-border-top-right-radius:1000em; border-radius:100% 100% 0 0 / 166% 166% 0 0; background: #dadadc; background: -moz-linear-gradient(left, #dadadc 8%, #3a3a3c 54%); background: -webkit-gradient(linear, left top, right top, color-stop(8%,#dadadc), color-stop(54%,#3a3a3c)); background: -webkit-linear-gradient(left, #dadadc 8%,#3a3a3c 54%); background: -o-linear-gradient(left, #dadadc 8%,#3a3a3c 54%); background: -ms-linear-gradient(left, #dadadc 8%,#3a3a3c 54%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dadadc', endColorstr='#3a3a3c',GradientType=1 ); background: linear-gradient(left, #dadadc 8%,#3a3a3c 54%); } .ys .c {padding:2.5% 2.5% 0 2.5%; -moz-border-radius:100% 100% 0 0 / 166% 166% 0 0; -webkit-border-top-left-radius:1000em; -webkit-border-top-right-radius:1000em; border-radius:100% 100% 0 0 / 166% 166% 0 0; background: #e1e4e5; background: -moz-linear-gradient(left, #e1e4e5 8%, #010204 54%); background: -webkit-gradient(linear, left top, right top, color-stop(8%,#e1e4e5), color-stop(54%,#010204)); background: -webkit-linear-gradient(left, #e1e4e5 8%,#010204 54%); background: -o-linear-gradient(left, #e1e4e5 8%,#010204 54%); background: -ms-linear-gradient(left, #e1e4e5 8%,#010204 54%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1e4e5', endColorstr='#010204',GradientType=1 ); background: linear-gradient(left, #e1e4e5 8%,#010204 54%); } .ys .d {padding:2%; background-color:#0c1c48; -moz-border-radius:100% 100% 0 0 / 166% 166% 0 0; -webkit-border-top-left-radius:1000em; -webkit-border-top-right-radius:1000em; border-radius:100% 100% 0 0 / 166% 166% 0 0; } .ys .e {padding:58% 5% 0 5%; position:relative; overflow:hidden; -moz-border-radius:100% 100% 0 0 / 166% 166% 0 0; -webkit-border-top-left-radius:1000em; -webkit-border-top-right-radius:1000em; border-radius:100% 100% 0 0 / 166% 166% 0 0; background: #394d97; background: -moz-linear-gradient(left, #394d97 8%, #282963 54%); background: -webkit-gradient(linear, left top, right top, color-stop(8%,#394d97), color-stop(54%,#282963)); background: -webkit-linear-gradient(left, #394d97 8%,#282963 54%); background: -o-linear-gradient(left, #394d97 8%,#282963 54%); background: -ms-linear-gradient(left, #394d97 8%,#282963 54%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#394d97', endColorstr='#282963',GradientType=1 ); background: linear-gradient(left, #394d97 8%,#282963 54%); } /* glare */ .ys .f {padding:50% 56%; position:absolute; top:11%; left:0; -moz-border-radius:166% 133% 0 0 / 166% 139% 0 0; -webkit-border-top-left-radius:166em 166em; -webkit-border-top-right-radius:133em 139em; border-radius:166% 133% 0 0 / 166% 139% 0 0; background: #2c3e90; background: -moz-linear-gradient(left, #2c3e90 8%, #120744 54%); background: -webkit-gradient(linear, left top, right top, color-stop(8%,#2c3e90), color-stop(54%,#120744)); background: -webkit-linear-gradient(left, #2c3e90 8%,#120744 54%); background: -o-linear-gradient(left, #2c3e90 8%,#120744 54%); background: -ms-linear-gradient(left, #2c3e90 8%,#120744 54%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3e90', endColorstr='#120744',GradientType=1 ); background: linear-gradient(left, #2c3e90 8%,#120744 54%); } /* base */ .ys .g {padding:50% 74%; position:absolute; bottom:-135%; left:-16%; -moz-border-radius:100%; -webkit-border-radius:1000em; border-radius:100%; background: #99c1e2; background: -moz-linear-gradient(top, #99c1e2 1%, #7aaed9 3%, #2f6bb0 12%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#99c1e2), color-stop(3%,#7aaed9), color-stop(12%,#2f6bb0)); background: -webkit-linear-gradient(top, #99c1e2 1%,#7aaed9 3%,#2f6bb0 12%); background: -o-linear-gradient(top, #99c1e2 1%,#7aaed9 3%,#2f6bb0 12%); background: -ms-linear-gradient(top, #99c1e2 1%,#7aaed9 3%,#2f6bb0 12%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99c1e2', endColorstr='#2f6bb0',GradientType=0 ); background: linear-gradient(top, #99c1e2 1%,#7aaed9 3%,#2f6bb0 12%); } /* ticks */ .ys .t {width:14%; height:6%; background-color:#e7e8e9; position:absolute; -moz-border-radius:30% / 100%; -webkit-border-radius:1000em; border-radius:30% / 100%; } .ys .t1 {left:7%; bottom:18%;} .ys .t2 {left:11%; bottom:47%; -webkit-transform:rotate(30deg); -moz-transform:rotate(30deg); -o-transform:rotate(30deg); -ms-transform:rotate(30deg); transform:rotate(30deg); } .ys .t3 {left:24%; bottom:70%; -webkit-transform:rotate(60deg); -moz-transform:rotate(60deg); -o-transform:rotate(60deg); -ms-transform:rotate(60deg); transform:rotate(60deg); } .ys .t4 {left:44%; top:16%; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); } .ys .t5 {right:24%; bottom:70%; -webkit-transform:rotate(-60deg); -moz-transform:rotate(-60deg); -o-transform:rotate(-60deg); -ms-transform:rotate(-60deg); transform:rotate(-60deg); } .ys .t6 {right:11%; bottom:47%; -webkit-transform:rotate(-30deg); -moz-transform:rotate(-30deg); -o-transform:rotate(-30deg); -ms-transform:rotate(-30deg); transform:rotate(-30deg); } .ys .t7 {right:7%; bottom:18%;} /* pointer by @thierrykoblentz */ .ys .p {padding-bottom:52%; width:11%; position:absolute; left:50%; bottom:20%; margin-left:-5%; -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); -o-transform:rotate(20deg); -ms-transform:rotate(20deg); transform:rotate(20deg); -webkit-transform-origin:bottom; -webkit-transition:all 200ms cubic-bezier(0.200, 0.000, 1.000, 0.360); } .ys:hover .p { -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); } .ys .pw {position:absolute; top:0; right:0; bottom:0; left:0;} .ys .pw > :first-child {border-right:1px solid transparent; margin-right:-2px;} .ys .p::after {content:""; position:absolute; width:97%; padding-bottom:92%; top:88%; z-index:1; -moz-border-radius:100%; -webkit-border-radius:1000em; border-radius:100%; background: #ef4d58; background: -moz-linear-gradient(left, #ef4d58 10%, #ce1f2b 20%); background: -webkit-gradient(linear, left top, right top, color-stop(10%,#ef4d58), color-stop(20%,#ce1f2b)); background: -webkit-linear-gradient(left, #ef4d58 10%,#ce1f2b 20%); background: -o-linear-gradient(left, #ef4d58 10%,#ce1f2b 20%); background: -ms-linear-gradient(left, #ef4d58 10%,#ce1f2b 20%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef4d58', endColorstr='#ce1f2b',GradientType=1); background: linear-gradient(left, #ef4d58 10%,#ce1f2b 20%); } .ys .pi {width:50%; height:100%; overflow:hidden; position:relative; float:left;} .ys .pl, .ys .pr {position:absolute; width:200%; height:120%; left:50%; -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); -o-transform:rotate(10deg); -ms-transform:rotate(10deg); transform:rotate(10deg); background: #ef4d58; background: -moz-linear-gradient(left, #ef4d58 10%, #ce1f2b 20%); background: -webkit-gradient(linear, left top, right top, color-stop(10%,#ef4d58), color-stop(20%,#ce1f2b)); background: -webkit-linear-gradient(left, #ef4d58 10%,#ce1f2b 20%); background: -o-linear-gradient(left, #ef4d58 10%,#ce1f2b 20%); background: -ms-linear-gradient(left, #ef4d58 10%,#ce1f2b 20%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef4d58', endColorstr='#ce1f2b',GradientType=1 ); background: linear-gradient(left, #ef4d58 10%,#ce1f2b 20%); } .ys .pr {right:50%; left:auto; -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); -o-transform:rotate(-10deg); -ms-transform:rotate(-10deg); transform:rotate(-10deg); }