Генератор углов css будет включать ползунок при движении, которого будут меняться углы css.
Внизу будет блок для визуального отображения закругления и поле для вывода css кода стилей.
Содержание статьи
Добавим каркас для трех элементов отображения.
Пробуем перемещать ползунок.
Закругление углов css:
- Зададим параграф для вывода названия ползунка, внутри пишем input, с типом type=range и диапазоном от нуля до ста, id=rad.
- Прямоугольник или квадрат задаем дивом с идентификатором id=box.
- Поле вывода кода будет в теге textarea с идентификатором code.
1 2 3 |
<p>Закругление углов css: <input type="range" id="rad" min="0" max="100" value="0""></p> <div id="box"></div> <textarea name="" id="code" cols="30" rows="2"></textarea> |
Добавим css стили блокам.
1 2 3 4 5 6 7 8 9 10 11 12 |
#box width: 200px height: 200px background-color: blue margin: 20px #code border: 3px solid Orchid background-color: Lavender width: 100% height: 75px margin: 20px font-size: 1.2em |
Делаем Java script для генератора углов css.
- Вешаем событие oninput с функцией gener на ползунок с идентификатором rad, но перед этим его нужно получить document.getElementById (rad).oninput = gener. Событие происходит при каждом изменении элемента ввода. Когда двигается ползунок срабатывает это событие.
- Задаем функцию function gener (), в которой будем делать.
- Получаем var box = document.getElementById (box), чтобы изменять элемент квадрат.
- Присвоим элементу box стиль закругления углов, который равен числу на ползунке. Когда добавили событие на элемент, то сам элемент, весь объект ползунка document.getElementById (rad) попадает в переменную this. Обращаемся к ней this.value, значение на ползунке. Добавим пиксели px через плюс.
- Чтобы увидеть значение на ползунке выведем в консоль console.log (this.value).
Делаем вывод css кода borderRadius в поле textarea.
- Вначале получим textarea вывод var code = document.getElementById (code).
- Теперь нужно в нее записать с помощью innerHTML. Проверим, в поле textarea выведем число 100.
Формируем правильную запись.
- В innerHTML при каждом событии записываем border-radius, значение с ползунка и добавляем пиксели.
- Добавляем префикс –webkit, для этого скопируем верхнюю строку и модифицируем. Чтобы добавить строку пишем знак +=. Для переноса строки используем символ перевода каретки \n.
Весь код в common.js.
1 2 3 4 5 6 7 8 9 10 11 |
$(function() { document.getElementById('rad').oninput = gener; function gener(){ var box = document.getElementById('box'); var code = document.getElementById('code'); console.log(this.value); box.style.borderRadius =this.value + 'px'; code.innerHTML = '-webkit-border-radius: ' +this.value + 'px;\n'; code.innerHTML += 'border-radius: ' +this.value + 'px;'; } }); |
Проверяем вывод в textarea.
Рассмотрели самый простой пример создания генератора закругления углов css.