Item: CSS Price Thermometer
Rating: 3.4
Author: tbloncar

1 Downloads
13 Views
Tweet
Download Now View Demo

HTML
CSS

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Price Thermometer</title>
  <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Abel' />
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <p>Price Thermometer by <span>Travis Loncar</span></p>


<h1>Price Thermometer</h1>

<div class="pricing-box">
  <div class="pricing-thermo">
    <!-- Thermometer -->
		<div class="pricing-total">
		</div>
    <!-- Price -->
		<div class="pricing-number">
		Starting at $500
		</div>
	</div>
</div>
  
  

</body>

</html>


/*Downloaded from https://www.codeseek.co/tbloncar/css-price-thermometer-bouAh */
body {
  background: #CCC;
}

p {
  font-family: 'Abel', sans-serif;
  display: block;
  padding: 10px;
}

span {
  color: rgba(255,51,0,0.85);
}

h1 {
  font-family: 'Abel', sans-serif;
  text-align: center;
  margin: 50px;
  color: #222;
}

.pricing-thermo {
  background: #EEE;
  width: 50%;
  height: 60px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -o-border-radius: 50px;
	border-radius: 50px;
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
	-o-box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
  margin: 50px auto;
	padding: 3px;
}

.pricing-total {
	height: 100%;
	background: rgba(255,51,0,0.85);
  -webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	-o-border-radius: 50px;
	border-radius: 50px;
	width: 15%;
	margin-right: 10px;
	float: left;
	-webkit-transition: width 0.4s ease-in-out;
	-moz-transition: width 0.4s ease-in-out;
	-o-transition: width 0.4s ease-in-out;
	transition: width 0.4s ease-in-out;

}

.pricing-number {
	font-family: 'Arial', sans-serif;
	color: rgba(0,0,0,0.6);
	height: 30px;
	width: 130px;
	padding: 7px 0 0 0;
  text-align: center;
	background: #FFF;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
	margin-top: 12px;
	float: left;
	display: none;
  font-size: 14px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
  box-shadow: 0px 0px 2px rgba(0,0,0,0.45);
  -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.45);
  -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.45);
  -o-box-shadow: 0px 0px 2px rgba(0,0,0,0.45);
}

.pricing-box:hover .pricing-number {
	display: block;
}

.pricing-box:hover .pricing-total {
	width: 60%;
}

Comments

More from tbloncar

CSS Price Thermometer

In this example below you will see how to do a CSS Price Thermometer with some HTML / CSS and Javascript

On hover of surrounding div, transition is used to simulate the "temperature," or more appropriately, price, rising. Starting price is displayed next to the thermometer filling.

Technologies

Comments

More from tbloncar

easyegg.js

CSS Price Thermometer

Dropdown Month Picker

You Might Also Like

Semantic UI Color Example

Wikipedia Viewer

IT-Opdracht1

CSS Starbursts

Nikola Tesla - Tribute

A Pen by mike koro

Animating with Top/Left

Urban V.2

CSS Price Thermometer

In this example below you will see how to do a CSS Price Thermometer with some HTML / CSS and JavascriptOn hover of surrounding div, transition is used to simulate the "temperature," or more appropriately, price, rising. Starting price is displayed next to the thermometer filling.

Technologies

Comments

More from tbloncar

easyegg.js

CSS Price Thermometer

Dropdown Month Picker

You Might Also Like

Semantic UI Color Example

Wikipedia Viewer

IT-Opdracht1

CSS Starbursts

Nikola Tesla - Tribute

A Pen by mike koro

Animating with Top/Left

Urban V.2

In this example below you will see how to do a CSS Price Thermometer with some HTML / CSS and Javascript

On hover of surrounding div, transition is used to simulate the "temperature," or more appropriately, price, rising. Starting price is displayed next to the thermometer filling.