CSS3 Working Clock
Working CSS3 analog clock, using CSS animations and shapes, without any images or JavaScript.
This is now available on GitHub @ https://github.com/iliadraznin/CSS3clock
A Pen by Stan Williams on CodePen.
stanwmusic
/ fixed-sticky-header-when-scrolling.markdown
Created Apr 8, 2022
Fixed sticky header when scrolling
View fixed-sticky-header-when-scrolling.markdown
Fixed sticky header when scrolling
A Pen by Stan Williams on CodePen.
View index.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
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 750 500" preserveAspectRatio="xMidYMax slice"> | |
| <defs> | |
| <!-- Scene 1 Gradient --> | |
| <linearGradient id="grad1" x1="-154.32" y1="263.27" x2="-154.32" y2="374.3" | |
| gradientTransform="matrix(-1, 0, 0, 1.36, 231.36, -100.14)" gradientUnits="userSpaceOnUse"> | |
| <stop offset="0.07" stop-color="#9c536b" /> | |
| <stop offset="0.98" stop-color="#d98981" /> | |
| </linearGradient> | |
| <radialGradient id="bg_grad" cx="375" cy="-35" r="318.69" gradientUnits="userSpaceOnUse"> | |
| <stop offset="0.1" stop-color="#F5C54E" id="sun" /> |
View index.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
| <body onLoad="initClock()"> | |
| <div id="timedate"> | |
| <a id="mon">January</a> | |
| <a id="d">1</a>, | |
| <a id="y">0</a><br /> | |
| <a id="h">12</a> : | |
| <a id="m">00</a>: | |
| <a id="s">00</a>: | |
| <a id="mi">000</a> |
View css3-working-clock.markdown
CSS3 Working Clock
Working CSS3 analog clock, using CSS animations and shapes, without any images or JavaScript.
This is now available on GitHub @ https://github.com/iliadraznin/CSS3clock
A Pen by Stan Williams on CodePen.
View countdown-timer.markdown
Countdown Timer
A how-to for a countdown clock.
A Pen by Stan Williams on CodePen.
View css-only-timer.markdown
CSS only Timer
A Pen by Stan Williams on CodePen.
View index.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
| <input id="hi" value="hi" name="state" style="display: none;"><input id="ak" value="ak" name="state" style="display: none;"><input id="fl" value="fl" name="state" style="display: none;"><input id="sc" value="sc" name="state" style="display: none;"><input id="ga" value="ga" name="state" style="display: none;"><input id="al" value="al" name="state" style="display: none;"><input id="nc" value="nc" name="state" style="display: none;"><input id="tn" value="tn" name="state" style="display: none;"><input id="ri" value="ri" name="state" style="display: none;"><input id="ct" value="ct" name="state" style="display: none;"><input id="ma" value="ma" name="state" style="display: none;"><input id="me" value="me" name="state" style="display: none;"><input id="nh" value="nh" name="state" style="display: none;"><input id="vt" value="vt" name="state" style="display: none;"><input id="ny" value="ny" name="state" style="display: none;"><input id="nj" value="nj" name="state" style="display: none;"><input id="pa" value="pa" name=" |
View index.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
| <input id="hi" value="hi" name="state" style="display: none;"><input id="ak" value="ak" name="state" style="display: none;"><input id="fl" value="fl" name="state" style="display: none;"><input id="sc" value="sc" name="state" style="display: none;"><input id="ga" value="ga" name="state" style="display: none;"><input id="al" value="al" name="state" style="display: none;"><input id="nc" value="nc" name="state" style="display: none;"><input id="tn" value="tn" name="state" style="display: none;"><input id="ri" value="ri" name="state" style="display: none;"><input id="ct" value="ct" name="state" style="display: none;"><input id="ma" value="ma" name="state" style="display: none;"><input id="me" value="me" name="state" style="display: none;"><input id="nh" value="nh" name="state" style="display: none;"><input id="vt" value="vt" name="state" style="display: none;"><input id="ny" value="ny" name="state" style="display: none;"><input id="nj" value="nj" name="state" style="display: none;"><input id="pa" value="pa" name=" |
View analog-clock.markdown
Analog Clock
For this analog clock, I used JavaScript only for getting the current time at load then used CSS animation to run the clock from there.
A Pen by Stan Williams on CodePen.
NewerOlder