CSS temperature controler
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 - 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;
}
Developer | Hugo Giraudel |
Username | HugoGiraudel |
Uploaded | October 24, 2022 |
Rating | 4.5 |
Size | 4,789 Kb |
Views | 22,264 |
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!
Name | Size |
Synchronise background position with padding | 3,411 Kb |
Sass mixin for scrollbar styling | 2,400 Kb |
Batman login form | 4,731 Kb |
List of web resources | 8,824 Kb |
Social swatchbook | 4,245 Kb |
Pure CSS button switch | 4,769 Kb |
Stripe-a-gradient Sass function | 11,192 Kb |
Pure CSS pie timer | 3,378 Kb |
CSS power button | 3,836 Kb |
Demo Flexbox 1 | 2,388 Kb |
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!
Name | Username | Size |
Weird glowy CSS3 game | Toneworm | 3,684 Kb |
Loading animation | Codeams | 2,408 Kb |
Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
Content Changer | Cliffpyles | 4,538 Kb |
Donut Chart example - MorrisJS | Capelo | 2,385 Kb |
Drop Cap | Gsaiki | 1,571 Kb |
Calculator | Rzencoder | 4,572 Kb |
Reviews and Ratings Star | Zbnmstry | 1,591 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!