Styling the HTML5 Meter Tag Using the Shadow DOM
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
| <html> | |
| <head> | |
| <style type="text/css"> | |
| article { | |
| width:520px; | |
| height:170px; | |
| margin: 30px auto; | |
| font-family: Arial, sans-serif; | |
| color: #2146CA; | |
| font-size:17px; | |
| background: -webkit-linear-gradient(top, rgba(219,237,239,0) 10%,rgba(219,237,239,0.7) 90%,rgba(219,237,239,1) 99%,rgba(219,237,239,1) 100%); | |
| } | |
| .column { | |
| float: left; | |
| width:240px; | |
| margin: auto; | |
| } | |
| .column.left { | |
| margin: 0 0 0 30px; | |
| } | |
| .column.right { | |
| position: relative; | |
| } | |
| dt { | |
| font-weight:bold; | |
| float: left; | |
| width:110px; | |
| height:25px; | |
| } | |
| dd { | |
| float: left; | |
| width:80px; | |
| height:25px; | |
| } | |
| /* The main meter element and star */ | |
| #raised { | |
| -webit-style:none; | |
| position: relative; | |
| background-image:url(star.svg); | |
| height:150px; | |
| width:150px; | |
| position: absolute; | |
| right:20px; | |
| } | |
| /* The overlay shadow */ | |
| #raised:before { | |
| content: ''; | |
| background-color:#fff; | |
| opacity: 0.2; | |
| height:60; | |
| width:115; | |
| position: absolute; | |
| top:0; | |
| left:17.5px; | |
| z-index:5; | |
| margin: 16px 0 0 0; | |
| border-radius: 100px; | |
| border-bottom-right-radius: 10px; | |
| border-bottom-left-radius: 10px; | |
| } | |
| /* The percentage */ | |
| #raised:after { | |
| content: "60%"; | |
| position: absolute; | |
| top:65px; | |
| right:36%; | |
| font-family: Arial, sans-serif; | |
| font-weight:bold; | |
| color: #fff; | |
| } | |
| /** | |
| * Shadow Dom Elements | |
| */ | |
| /* The central circle */ | |
| #raised::-webkit-meter-bar { | |
| -webkit-transform: rotate(270deg); | |
| -webkit-mask-image: url(circle.svg); | |
| background:none; | |
| margin: 25px 0 00px 25; | |
| width:100px; | |
| height:100px; | |
| } | |
| /* The area of the meter indicating the value */ | |
| #raised::-webkit-meter-optimum-value { | |
| background:#134A6F; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <article> | |
| <div class="column left"> | |
| <dl> | |
| <dt>Target:</dt> | |
| <dd>£200</dd> | |
| <dt>Raised so far:</dt> | |
| <dd>£120</dd> | |
| </dl> | |
| </div> | |
| <div class="column right"> | |
| <meter id="raised" min="0" max="200" value="120" title="pounds">60%</meter> | |
| </div> | |
| </article> | |
| </body> | |
| </html> |
| <?xml version="1.0" encoding="UTF-8" standalone="no"?> | |
| <!-- Created with Inkscape (http://www.inkscape.org/) --> | |
| <svg | |
| xmlns:dc="http://purl.org/dc/elements/1.1/" | |
| xmlns:cc="http://creativecommons.org/ns#" | |
| xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" | |
| xmlns:svg="http://www.w3.org/2000/svg" | |
| xmlns="http://www.w3.org/2000/svg" | |
| xmlns:xlink="http://www.w3.org/1999/xlink" | |
| xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" | |
| xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" | |
| width="744.09448819" | |
| height="1052.3622047" | |
| id="svg2" | |
| version="1.1" | |
| inkscape:version="0.48.3.1 r9886" | |
| sodipodi:docname="drawing.svg"> | |
| <defs | |
| id="defs4"> | |
| <linearGradient | |
| id="linearGradient3820"> | |
| <stop | |
| style="stop-color:#09aedc;stop-opacity:1;" | |
| offset="0" | |
| id="stop3822" /> | |
| <stop | |
| style="stop-color:#4375b0;stop-opacity:1;" | |
| offset="1" | |
| id="stop3824" /> | |
| </linearGradient> | |
| <linearGradient | |
| inkscape:collect="always" | |
| xlink:href="#linearGradient3820" | |
| id="linearGradient3826" | |
| x1="31.166224" | |
| y1="363.64944" | |
| x2="328.20993" | |
| y2="-40.054405" | |
| gradientUnits="userSpaceOnUse" /> | |
| </defs> | |
| <sodipodi:namedview | |
| id="base" | |
| pagecolor="#ffffff" | |
| bordercolor="#666666" | |
| borderopacity="1.0" | |
| inkscape:pageopacity="0.0" | |
| inkscape:pageshadow="2" | |
| inkscape:zoom="2.8" | |
| inkscape:cx="-14.216616" | |
| inkscape:cy="1014.0616" | |
| inkscape:document-units="px" | |
| inkscape:current-layer="layer1" | |
| showgrid="false" | |
| inkscape:window-width="1920" | |
| inkscape:window-height="1147" | |
| inkscape:window-x="0" | |
| inkscape:window-y="27" | |
| inkscape:window-maximized="1" /> | |
| <metadata | |
| id="metadata7"> | |
| <rdf:RDF> | |
| <cc:Work | |
| rdf:about=""> | |
| <dc:format>image/svg+xml</dc:format> | |
| <dc:type | |
| rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> | |
| <dc:title></dc:title> | |
| </cc:Work> | |
| </rdf:RDF> | |
| </metadata> | |
| <g | |
| inkscape:label="Layer 1" | |
| inkscape:groupmode="layer" | |
| id="layer1"> | |
| <path | |
| sodipodi:type="star" | |
| style="fill:url(#linearGradient3826);fill-opacity:1;stroke:none" | |
| id="path2985" | |
| sodipodi:sides="80" | |
| sodipodi:cx="134.28571" | |
| sodipodi:cy="246.6479" | |
| sodipodi:r1="440.08347" | |
| sodipodi:r2="376.599" | |
| sodipodi:arg1="0.94677327" | |
| sodipodi:arg2="0.98604318" | |
| inkscape:flatsided="false" | |
| inkscape:rounded="0" | |
| inkscape:randomized="0" | |
| d="m 391.42856,603.79075 -49.26263,-43.11638 20.44884,62.19062 -45.7279,-46.84857 15.50638,63.60331 -41.91123,-50.29192 10.46832,64.62386 -37.83618,-53.42521 5.36572,65.24598 -33.52785,-56.2291 0.23004,65.46584 -29.01281,-58.68634 -4.90706,65.28208 -24.31889,-60.78174 -10.01391,64.69583 -19.47504,-62.50241 -15.05902,63.71071 -14.51113,-63.83773 -20.011271,62.3328 -9.457745,-64.77948 -24.840163,60.57058 -4.346051,-65.32182 -29.515902,58.43492 0.792437,-65.46144 -34.009665,55.939 5.9260398,-65.19748 -38.2937478,53.09819 11.023107,-64.53154 -42.341737,49.93001 16.052213,-63.46775 -46.128675,46.454 20.982351,-62.01266 -49.631211,42.69158 25.78312,-60.17523 -52.82776,38.66596 30.42494,-57.96682 -55.6986,34.40195 34.87917,-55.40101 -58.22605,29.92583 39.11837,-52.49364 -60.39452,25.26522 43.11638,-49.26262 -62.19062,20.44883 46.84857,-45.72789 -63.60331,15.50638 50.29192,-41.91124 -64.62386,10.46832 53.42521,-37.83617 -65.24598,5.36572 56.2291,-33.52785 -65.46584,0.23004 58.68634,-29.01281 -65.28208,-4.90706 60.78174,-24.31889 -64.69583,-10.01391 62.50241,-19.47505 -63.71071,-15.05901 63.83773,-14.51113 -62.3328,-20.01127 64.77948,-9.45775 -60.57058,-24.84016 65.32182,-4.34605 -58.43492,-29.5159 65.46144,0.79243 -55.939,-34.00966 65.19748,5.92604 -53.09819,-38.29375 64.53154,11.023107 -49.93001,-42.341737 63.46775,16.052213 -46.454,-46.128675 62.01266,20.982351 -42.69159,-49.631214 60.17524,25.783127 -38.66596,-52.827762 57.96682,30.424941 -34.40195,-55.698607 55.40101,34.879175 -29.92583,-58.226052 52.493636,39.118367 -25.265216,-60.394514 49.262623,43.116381 -20.448837,-62.190621 45.727895,46.848565 -15.50638,-63.603305 41.911234,50.291916 -10.468321,-64.623856 37.8361779,53.4252 -5.36572116,-65.24598 33.52784826,56.22911 -0.23004,-65.46584 29.012808,58.68634 4.90706,-65.28208 24.318895,60.78174 10.013908,-64.69583 19.47504,62.50241 15.05902,-63.71071 14.51113,63.83773 20.01127,-62.3328 9.45775,64.77947 24.84016,-60.57058 4.34605,65.32183 29.5159,-58.43493 -0.79243,65.46145 34.00966,-55.939 -5.92604,65.19748 38.29375,-53.09819 -11.02311,64.53154 42.34174,-49.93001 -16.05221,63.467748 46.12867,-46.453998 -20.98235,62.012656 49.63121,-42.691586 -25.78312,60.17524 52.82776,-38.66596 -30.42494,57.966816 55.6986,-34.401947 -34.87917,55.4010107 58.22605,-29.9258357 -39.11837,52.49364 60.39452,-25.265221 -43.11638,49.262628 62.19062,-20.448837 -46.84857,45.727895 63.60331,-15.506381 -50.29192,41.911235 64.62386,-10.468321 -53.4252,37.836178 65.24598,-5.36572 -56.22911,33.52785 65.46584,-0.23004 -58.68634,29.01281 65.28208,4.90705 -60.78174,24.3189 64.69583,10.01391 -62.50241,19.47504 63.71071,15.05901 -63.83773,14.51113 62.3328,20.01128 -64.77947,9.45775 60.57058,24.84016 -65.32183,4.34605 58.43493,29.5159 -65.46145,-0.79244 55.939,34.00967 -65.19748,-5.92604 53.09819,38.29375 -64.53154,-11.02311 49.93001,42.34174 -63.46775,-16.05222 46.454,46.12868 -62.01266,-20.98235 42.69159,49.63121 -60.17524,-25.78312 38.66596,52.82776 -57.96682,-30.42494 34.40195,55.6986 -55.40101,-34.87917 29.92583,58.22605 -52.49363,-39.11837 z" | |
| transform="matrix(0.17073006,0,0,0.17074044,52.178989,32.772517)" /> | |
| </g> | |
| </svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment