CSS Variable-Powered Clock

Developer
Emily Hayman
Size
3,362 Kb
Views
218,592
  1. CSS Variable-Powered Clock Previews
  2. CSS Variable-Powered Clock HTML Codes
  3. CSS Variable-Powered Clock CSS Codes
  4. CSS Variable-Powered Clock JS Codes

How do I make an css variable-powered clock?

Design based off: https://dribbble.com/shots/2271565-Day-095-Time-is-Money. What is a css variable-powered clock? How do you make a css variable-powered clock? This script and codes were developed by Emily Hayman on 14 June 2022, Tuesday.

CSS Variable-Powered Clock Previews
IQ Test

CSS Variable-Powered Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Variable-Powered Clock</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="clock-container"> <div class="clock-col"> <p class="clock-day clock-timer"> </p> <p class="clock-label"> Day </p> </div> <div class="clock-col"> <p class="clock-hours clock-timer"> </p> <p class="clock-label"> Hours </p> </div> <div class="clock-col"> <p class="clock-minutes clock-timer"> </p> <p class="clock-label"> Minutes </p> </div> <div class="clock-col"> <p class="clock-seconds clock-timer"> </p> <p class="clock-label"> Seconds </p> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS Variable-Powered Clock - Script Codes CSS Codes

.clock-day:before { content: var(--timer-day);
}
.clock-hours:before { content: var(--timer-hours);
}
.clock-minutes:before { content: var(--timer-minutes);
}
.clock-seconds:before { content: var(--timer-seconds);
}
body { background: -webkit-linear-gradient(45deg, #1870ed 0, #f18f88 100%); background: linear-gradient(45deg, #1870ed 0, #f18f88 100%); font-family: 'Montserrat', 'sans-serif'; min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.clock-container { margin-top: 30px; margin-bottom: 30px; background-color: #080808; border-radius: 5px; padding: 60px 20px; box-shadow: 1px 1px 5px rgba(255, 255, 255, 0.15), 0 15px 90px 30px rgba(0, 0, 0, 0.25); display: -webkit-box; display: -ms-flexbox; display: flex;
}
.clock-col { text-align: center; margin-right: 40px; margin-left: 40px; min-width: 90px; position: relative;
}
.clock-col:not(:last-child):before, .clock-col:not(:last-child):after { content: ""; background-color: rgba(255, 255, 255, 0.3); height: 5px; width: 5px; border-radius: 50%; display: block; position: absolute; right: -42px;
}
.clock-col:not(:last-child):before { top: 35%;
}
.clock-col:not(:last-child):after { top: 50%;
}
.clock-timer:before { color: #fff; font-size: 4.2rem; text-transform: uppercase;
}
.clock-label { color: rgba(255, 255, 255, 0.35); text-transform: uppercase; font-size: .7rem; margin-top: 10px;
}
@media (max-width: 825px) { .clock-container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-top: 40px; padding-bottom: 40px; } .clock-col + .clock-col { margin-top: 20px; } .clock-col:before, .clock-col:after { display: none !important; }
}

CSS Variable-Powered Clock - Script Codes JS Codes

document.addEventListener('DOMContentLoaded', () => requestAnimationFrame(updateTime)
)
function updateTime() { document.documentElement.style.setProperty('--timer-day', "'" + moment().format("dd") + "'"); document.documentElement.style.setProperty('--timer-hours', "'" + moment().format("k") + "'"); document.documentElement.style.setProperty('--timer-minutes', "'" + moment().format("mm") + "'"); document.documentElement.style.setProperty('--timer-seconds', "'" + moment().format("ss") + "'"); requestAnimationFrame(updateTime);
}
CSS Variable-Powered Clock - Script Codes
CSS Variable-Powered Clock - Script Codes
Home Page Home
Developer Emily Hayman
Username eehayman
Uploaded June 14, 2022
Rating 4.5
Size 3,362 Kb
Views 218,592
Do you need developer help for CSS Variable-Powered Clock?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Emily Hayman (eehayman) Script Codes
Name
The Rhetoric of Donald Trump - A Data Visualization
Full Page Parallax Scroll Effect
SVG Stroke Animation - Origami Crane
Custom Dropdown List
Slider Animation Effect
Single Div Apple Mouse
A Pen by Emily Hayman
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!