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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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