alfa-clock
Polymer web component to display a clock.
use example:
CSS API
variable | default | descr |
---|---|---|
--size: | 250px; | clock diameter |
--seconds-color: | lime; | seconds hand color |
--hands-color: | white; | other hands color |
--shadow-color: | black; | other hands shadow |
-ring-css: | 2px solid silver; | css for a ring around the clock face |
--brand-font: | 1em Arial, Helvetica, sans-serif; | css font for a branding text on clock face |
--brand-color: | grey; | NOTE: SVG filter will change this color |
--face-filter: | none; | to color an SVG face |
face-filter
The clock face is made with SVG image containing numbers for hours.
To change the color of SVG, a CSS filter
is applied.
--face-filter: invert(.5) sepia(5) saturate(25) hue-rotate(-45deg);
Try to manipulate saturation
and hue-rotate
to achieve desired color. It is hard, but blame the CSS committee.
Examples of colors:
--); /* black */--)))); /* green */--)))); /* red */
Demo