Pure CSS thermometer

by mirceageorgescu

HTML

<span class="thermometer">20&deg;C</span>

CSS

html{
    background:-webkit-radial-gradient(circle, #fcee92 0%,#ebcf12 100%);
    height:100%;
    width:100%;
}

/* Thermometer column and text */
.thermometer{
    margin:50% 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;
}

JavaScript

// Note that I was too lazy to use all vendor prefixes