DailyUI Challenge #004 - I made clone of the Google Calculator app, only the UI with a blinking cursor animation, might add functionality later on.
- Open Sans
- #2D3033 - top half background and button hover color
- #202124 - bottom half background
- #E8EAED - white input text and number color
- #174EA6 - blue strip on the right of numpad
- #88B2F5 - operator icon color
- #B7B7B7 - gray navbar text and calculated result color
In the CSS for after the input, set the content empty and a very thin border to the right with your choice of color.
For each rendering engine's keyframe, set the border color at the beginning and end (
0%, 100%) of the animation to be transparent and at the very middle (
50%) of the animation to be your choice of color. The
50% is when you see the cursor blink.
For each rendering engine's animation, we set the blink animation to a 1 second duration, the timing-function to step-end, and the iteration-count to infinite because we want it to continuously blink.