Ноябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Как сделать генератор для закругления углов 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).

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

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

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

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

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

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

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

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

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

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

Комментариев нет

Комментарии:

Комментарии запрещены