Skip to content

Instantly share code, notes, and snippets.

@georgebrata

georgebrata/thermometer-index.html

Created April 5, 2019 07:45
Show Gist options
  • Save georgebrata/e4b147e2ab937605855dbcb7ecdfc3bc to your computer and use it in GitHub Desktop.
Save georgebrata/e4b147e2ab937605855dbcb7ecdfc3bc to your computer and use it in GitHub Desktop.
Download ZIP
A simple thermometer made only with CSS. Production-ready 📄
Raw
thermometer-index.html
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>CSS-only thermometer</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="stylesheet" href="css/normalize.min.css" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<style>
html {
background: -webkit-radial-gradient(
circle,
#fab192 0%,
#ebcf11 100%
);
height: 100%;
width: 100%;
}
/* Thermometer column and text */
.thermometer {
margin: 20% 0 0 50%;
left: -15px;
top: -100px;
width: 22px;
height: 150px;
display: block;
font: bold 14px/152px helvetica, arial, sans-serif;
text-indent: 36px;
background: -webkit-linear-gradient(
top,
#fff 0%,
#fff 50%,
#db3f02 50%,
#db3f02 100%
);
border-radius: 22px 22px 0 0;
border: 5px solid #4a1c03;
border-bottom: none;
position: absolute;
box-shadow: inset 0 0 0 4px #fff;
color: #4a1c03;
}
/* Thermometer Bulb */
.thermometer:before {
content: " ";
width: 44px;
height: 44px;
display: block;
position: absolute;
top: 142px;
left: -16px;
z-index: -1; /* Place the bulb under the column */
background: #db3f02;
border-radius: 44px;
border: 5px solid #4a1c03;
box-shadow: inset 0 0 0 4px #fff;
}
/* This piece here connects the column with the bulb */
.thermometer:after {
content: " ";
width: 14px;
height: 7px;
display: block;
position: absolute;
top: 146px;
left: 4px;
background: #db3f02;
}
</style>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">
You are using an <strong>outdated</strong> browser. Please
<a href="http://browsehappy.com/">upgrade your browser</a> to
improve your experience.
</p>
<![endif]-->
<span class="thermometer">25&deg;C</span>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b, o, i, l, e, r) {
b.GoogleAnalyticsObject = l;
b[l] ||
(b[l] = function() {
(b[l].q = b[l].q || []).push(arguments);
});
b[l].l = +new Date();
e = o.createElement(i);
r = o.getElementsByTagName(i)[0];
e.src = "//www.google-analytics.com/analytics.js";
r.parentNode.insertBefore(e, r);
})(window, document, "script", "ga");
ga("create", "UA-XXXXX-X", "auto");
ga("send", "pageview");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment