Код:
body{
font-family: 'Ubuntu';
}
.control{
position: absolute;
bottom: 0;
right: 0;
width: 400px;
text-align: center;
padding: 10px;
background-color:#191b1ace;
border-top-left-radius: 5px;
color: white;
box-shadow: 0 0px 15px 2px rgba(0, 167, 75,0.8);
}
.control p{
font-size: 14pt;
font-style: italic;
font-weight: 500px;
margin: 10px;
}
.control output{
margin-top: 10px;
display: block;
}
Код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cam</title>
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300&subset=cyrillic-ext" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../css/cam.css">
<link rel="stylesheet" type="text/css" href="../css/slider.css">
</head>
<body>
<div class="control" style="display:">
<p>Поворот</p>
<input id="rotate" type="range" value="0" step="1" min="0" max="360">
<p>Высота</p>
<input id="height" type="range" value="0" step="0.1" min="-0.7" max="0.7">
<output id="height">0</output>
<p>Приближение</p>
<input id="depth" type="range" value="1" step="0.1" min="0.5" max="1.5">
<output id="depth">0</output>
</div>
</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/rangeslider.min.js"></script>
<script src="../js/cam.js"></script>
</html>
Последнее редактирование:
