Как сделать генератор для закругления углов css

 

Генератор углов css будет включать ползунок при движении, которого будут меняться углы css.

Внизу будет блок для визуального отображения закругления и поле для вывода css кода стилей.

Добавим каркас для трех элементов отображения.

Пробуем перемещать ползунок.

Закругление углов css:

1. Зададим параграф для вывода названия ползунка, внутри пишем input, с типом type=range и диапазоном от нуля до ста, id=rad.
2. Прямоугольник или квадрат задаем дивом с идентификатором id=box.
3. Поле вывода кода будет в теге textarea с идентификатором code.

Добавим css стили блокам.

Делаем Java script для генератора углов css.

1. Вешаем событие oninput с функцией gener на ползунок с идентификатором rad, но перед этим его нужно получить document.getElementById (rad).oninput = gener. Событие происходит при каждом изменении элемента ввода. Когда двигается ползунок срабатывает это событие.
2. Задаем функцию function gener (), в которой будем делать.

• Получаем var box = document.getElementById (box), чтобы изменять элемент квадрат.
• Присвоим элементу box стиль закругления углов, который равен числу на ползунке. Когда добавили событие на элемент, то сам элемент, весь объект ползунка document.getElementById (rad) попадает в переменную this. Обращаемся к ней this.value, значение на ползунке. Добавим пиксели px через плюс.
• Чтобы увидеть значение на ползунке выведем в консоль console.log (this.value).

Делаем вывод css кода borderRadius в поле textarea.

1. Вначале получим textarea вывод var code = document.getElementById (code).
2. Теперь нужно в нее записать с помощью innerHTML. Проверим, в поле textarea выведем число 100.

Формируем правильную запись.

• В innerHTML при каждом событии записываем border-radius, значение с ползунка и добавляем пиксели.
• Добавляем префикс –webkit, для этого скопируем верхнюю строку и модифицируем. Чтобы добавить строку пишем знак +=. Для переноса строки используем символ перевода каретки \n.

Весь код в common.js.

Проверяем вывод в textarea.

Рассмотрели самый простой пример создания генератора закругления углов css.