CSS temperature controler

Developer
Size
4,789 Kb
Views
22,264

How do I make an css temperature controler?

If someone wants to fork and add some JS / animation to make the whole thing more dynamic, please go and show me. :). What is a css temperature controler? How do you make a css temperature controler? This script and codes were developed by Hugo Giraudel on 24 October 2022, Monday.

CSS temperature controler Previews

CSS temperature controler - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS temperature controler</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
html { height: 100%;
}
body { color: #aaa; font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; font-size: 11px;
}
.wrapper { width: 300px; height: 300px; margin: 0 auto; position: relative; top: -15px; background: white;
}
.background { border-radius: 0 0 150px 150px; width: 300px; height: 150px; margin-top: 150px; background: #df3341; background: -moz-linear-gradient(left, #df3341 0%, #d4f355 50%, #61c0ec 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #df3341), color-stop(50%, #d4f355), color-stop(100%, #61c0ec)); background: -webkit-linear-gradient(left, #df3341 0%, #d4f355 50%, #61c0ec 100%); background: -o-linear-gradient(left, #df3341 0%, #d4f355 50%, #61c0ec 100%); background: -ms-linear-gradient(left, #df3341 0%, #d4f355 50%, #61c0ec 100%); background: linear-gradient(to right, #df3341 0%, #d4f355 50%, #61c0ec 100%); position: relative; box-shadow: 0 1px 0 white, inset 0 -2px 3px rgba(0, 0, 0, 0.1);
}
.background:after,
.background:before { content: ""; position: absolute; top: -11px; height: 12px; width: 25px; left: 0; border-radius: 12px 12px 0 0; background: #df3341; background: -moz-linear-gradient(left, #df3341 0%, #dd5144 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #df3341), color-stop(100%, #dd5144)); background: -webkit-linear-gradient(left, #df3341 0%, #dd5144 100%); background: -o-linear-gradient(left, #df3341 0%, #dd5144 100%); background: -ms-linear-gradient(left, #df3341 0%, #dd5144 100%); background: linear-gradient(to right, #df3341 0%, #dd5144 100%); box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.2);
}
.background:after { background: #72c8d5; background: -moz-linear-gradient(left, #72c8d5 0%, #62c0eb 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #72c8d5), color-stop(100%, #62c0eb)); background: -webkit-linear-gradient(left, #72c8d5 0%, #62c0eb 100%); background: -o-linear-gradient(left, #72c8d5 0%, #62c0eb 100%); background: -ms-linear-gradient(left, #72c8d5 0%, #62c0eb 100%); background: linear-gradient(to right, #72c8d5 0%, #62c0eb 100%); right: 0; left: auto;
}
.mask { background: white; width: 250px; height: 250px; border-radius: 50%; position: absolute; bottom: 25px; left: 25px; box-shadow: 0 4px 3px rgba(0, 0, 0, 0.2); z-index: 100;
}
.mask:after { content: ""; display: block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #6f6e6e; position: absolute; bottom: 40px; right: 35px; transform: rotate(135deg);
}
.roll { width: 210px; height: 210px; border-radius: 50%; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.1), inset 0 -10px 5px #eaeaea, inset 0 10px 5px #f8f8f7; position: absolute; left: 20px; bottom: 20px; background: #f2f2f2; cursor: pointer;
}
.roll:after { content: ""; width: 10px; height: 10px; background: #e94646; border-radius: 50%; display: block; position: absolute; bottom: 25px; left: 80px; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.3);
}
.roll:before { content: "58"; position: absolute; left: 85px; bottom: 40px;
}
.background li { position: absolute;
}
.background li:nth-child(1) { bottom: 40px; right: 10px;
}
.background li:nth-child(2) { bottom: -20px; left: 48%;
}
.background li:nth-child(3) { bottom: 40px; left: 10px;
}
.background span { position: absolute; display: block; font-size: 9px;
}
.boiling { top: -40px; left: -2px;
}
.freeze { top: -40px; left: auto; right: -2px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrapper"> <div class="background">	<div class="mask">	<div class="roll"></div> </div> <ul> <li>25</li> <li>50</li> <li>75</li> </ul> <span class="boiling">Boiling</span> <span class="freeze">Freeze</span> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

CSS temperature controler - Script Codes CSS Codes

* { box-sizing: border-box;
}
html { height: 100%;
}
body { color: #aaa; font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; font-size: 11px;
}
.wrapper { width: 300px; height: 300px; margin: 0 auto; position: relative; top: -15px; background: white;
}
.background { border-radius: 0 0 150px 150px; width: 300px; height: 150px; margin-top: 150px; background: #df3341; background: -moz-linear-gradient(left, #df3341 0%, #d4f355 50%, #61c0ec 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #df3341), color-stop(50%, #d4f355), color-stop(100%, #61c0ec)); background: -webkit-linear-gradient(left, #df3341 0%, #d4f355 50%, #61c0ec 100%); background: -o-linear-gradient(left, #df3341 0%, #d4f355 50%, #61c0ec 100%); background: -ms-linear-gradient(left, #df3341 0%, #d4f355 50%, #61c0ec 100%); background: linear-gradient(to right, #df3341 0%, #d4f355 50%, #61c0ec 100%); position: relative; box-shadow: 0 1px 0 white, inset 0 -2px 3px rgba(0, 0, 0, 0.1);
}
.background:after,
.background:before { content: ""; position: absolute; top: -11px; height: 12px; width: 25px; left: 0; border-radius: 12px 12px 0 0; background: #df3341; background: -moz-linear-gradient(left, #df3341 0%, #dd5144 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #df3341), color-stop(100%, #dd5144)); background: -webkit-linear-gradient(left, #df3341 0%, #dd5144 100%); background: -o-linear-gradient(left, #df3341 0%, #dd5144 100%); background: -ms-linear-gradient(left, #df3341 0%, #dd5144 100%); background: linear-gradient(to right, #df3341 0%, #dd5144 100%); box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.2);
}
.background:after { background: #72c8d5; background: -moz-linear-gradient(left, #72c8d5 0%, #62c0eb 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #72c8d5), color-stop(100%, #62c0eb)); background: -webkit-linear-gradient(left, #72c8d5 0%, #62c0eb 100%); background: -o-linear-gradient(left, #72c8d5 0%, #62c0eb 100%); background: -ms-linear-gradient(left, #72c8d5 0%, #62c0eb 100%); background: linear-gradient(to right, #72c8d5 0%, #62c0eb 100%); right: 0; left: auto;
}
.mask { background: white; width: 250px; height: 250px; border-radius: 50%; position: absolute; bottom: 25px; left: 25px; box-shadow: 0 4px 3px rgba(0, 0, 0, 0.2); z-index: 100;
}
.mask:after { content: ""; display: block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #6f6e6e; position: absolute; bottom: 40px; right: 35px; transform: rotate(135deg);
}
.roll { width: 210px; height: 210px; border-radius: 50%; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.1), inset 0 -10px 5px #eaeaea, inset 0 10px 5px #f8f8f7; position: absolute; left: 20px; bottom: 20px; background: #f2f2f2; cursor: pointer;
}
.roll:after { content: ""; width: 10px; height: 10px; background: #e94646; border-radius: 50%; display: block; position: absolute; bottom: 25px; left: 80px; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.3);
}
.roll:before { content: "58"; position: absolute; left: 85px; bottom: 40px;
}
.background li { position: absolute;
}
.background li:nth-child(1) { bottom: 40px; right: 10px;
}
.background li:nth-child(2) { bottom: -20px; left: 48%;
}
.background li:nth-child(3) { bottom: 40px; left: 10px;
}
.background span { position: absolute; display: block; font-size: 9px;
}
.boiling { top: -40px; left: -2px;
}
.freeze { top: -40px; left: auto; right: -2px;
}
CSS temperature controler - Script Codes
CSS temperature controler - Script Codes
Home Page Home
Developer Hugo Giraudel
Username HugoGiraudel
Uploaded October 24, 2022
Rating 4.5
Size 4,789 Kb
Views 22,264
Do you need developer help for CSS temperature controler?

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!

Hugo Giraudel (HugoGiraudel) Script Codes
Create amazing video scripts 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!