Skip to content

Instantly share code, notes, and snippets.

@pure

pure/gist:988724

Created May 24, 2011 13:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pure/988724 to your computer and use it in GitHub Desktop.
Save pure/988724 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>thermostat</title>
<style>
body{
background:#879;
}
.icone{
background:#EC7;
width:100px;
height:100px;
position:relative;
}
.arrondi{
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
border-bottom-left-radius: 6px 6px;
border-bottom-right-radius: 6px 6px;
border-top-left-radius: 6px 6px;
border-top-right-radius: 6px 6px;
}
.thermometre{
width:12px;
height:80px;
position:relative;
left:10px;
top:10px;
background:#FFF;
}
.temperature{
position:absolute;
width:8px;
bottom:2px;
left:2px;
background:#F00;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
border-top-left-radius: 0px 0px;
border-top-right-radius: 0px 0px;
}
.chiffre{
position:relative;
bottom:20px;
left:30px;
width:70px;
font-family: Arial;
}
.entiers{
position:absolute;
font-size:2.5em;
bottom:-15px;
right:25px;
font-weight: bold;
}
.decimales{
position:absolute;
font-size:1em;
bottom:10px;
right:5px;
}
</style>
</head>
<body>
<div class="icone arrondi">
<div class="thermometre arrondi">
<div class="temperature arrondi" style="height:65%"></div>
</div>
<div class="chiffre">
<div class="entiers">22</div>
<div class="decimales">48</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment