Генератор Border Radius

Создадим простой генератор скругления углов используя html и js. CSS свойство border-radius позволяет сделать закруглённую рамку или скруглить углы элемента, для получения сложных фигур.

Сложная фигура с помощью border-radius

Свойство border-radius может содержать от одного до четырёх значений. Чаще всего значение указывается в пикселях, но можно использовать и другие единицы, например, em или проценты.

Так же отметим, что свойство CSS border-radius поддерживается всеми современными версиями браузеров.

И так – генератор Border Radius

html разметка:

<div class="control">
    <p>верхний левый угол
        <input type="range" id="rtl" min="0" max="100" value="0" oninput="rounding()">
        <input type="text" id="ttl" value="0">
    </p>
    <p>верхний правый угол
        <input type="range" id="rtr" min="0" max="100" value="0" oninput="rounding()">
        <input type="text" id="ttr" value="0">
    </p>
    <p>нижний левый угол
        <input type="range" id="rbr" min="0" max="100" value="0" oninput="rounding()">
        <input type="text" id="tbr" value="0">
    </p>
    <p>Нижний правый угол
        <input type="range" id="rbl" min="0" max="100" value="0" oninput="rounding()">
        <input type="text" id="tbl" value="0">
    </p>
</div>
<div id="block"></div>
<div id="block_text1">border-radius: 0px 0px 0px 0px</div>
<div id="block_text2">-moz-border-radius: 0px 0px 0px 0px</div>
<div id="block_text3">-webkit-border-radius:: 0px 0px 0px 0px</div>

js код:

function rounding() {
    var rtl = document.getElementById('rtl').value;
    var rtr = document.getElementById('rtr').value;
    var rbr = document.getElementById('rbr').value;
    var rbl = document.getElementById('rbl').value;
  
    var ttl = document.getElementById('ttl');
    var ttr = document.getElementById('ttr');
    var tbr = document.getElementById('tbr');
    var tbl = document.getElementById('tbl');
  
    var block = document.getElementById("block");
  
    ttl.value = rtl;
    ttr.value = rtr;
    tbr.value = rbr;
    tbl.value = rbl;
  
    block.style.borderRadius=rtl+ 'px ' + rtr + 'px ' + rbr+ 'px ' + rbl + 'px ';
  document.getElementById('block_text1').innerHTML = 'border-radius: ' +rtl+ 'px ' + rtr + 'px ' + rbr+ 'px ' + rbl + 'px ';
  document.getElementById('block_text2').innerHTML = '-moz-border-radius:  ' +rtl+ 'px ' + rtr + 'px ' + rbr+ 'px ' + rbl + 'px ';
  document.getElementById('block_text3').innerHTML = '-webkit-border-radius: ' +rtl+ 'px ' + rtr + 'px ' + rbr+ 'px ' + rbl + 'px ';

}

и не много css:

    #block{
        width: 300px;
        height: 150px;
        background: red;
    }

Получается такой минималистичный border-radius генератор.

Верхний левый угол

Верхний правый угол

Нижний левый угол

Нижний правый угол


border-radius: 0px 0px 0px 0px
-moz-border-radius: 0px 0px 0px 0px
-webkit-border-radius: 0px 0px 0px 0px

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *