This is a mobile optimized page that loads fast, if you want to load the real page, click this text.

Подскажите плиз. Как сделать вот эти три полоски чтобы они былы как на фотке

745164nk

Специалист
17 Сен 2020
104
15
79



Код:
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&amp;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>
 
Последнее редактирование:

Mikhayloff

Модератор
Команда форума
high designer
9 Окт 2020
1,436
976
211