27 Ноябрь 2017

Автор: mastweb Рубрика: Верстка Комментариев нет

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

Махровый халат с именной вышивкой - эксклюзивный подарок для всей семь!

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

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

Содержание статьи

1 Добавим каркас для трех элементов отображения.
2 Делаем Java script для генератора углов css.
3 Делаем вывод css кода borderRadius в поле textarea.
- 3.1 Формируем правильную запись.

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

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

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

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

<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>

<p>Закругление углов css: <input type="range" id="rad" min="0" max="100" value="0""></p>

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

#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

#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).

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

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

Вначале получим textarea вывод var code = document.getElementById (code).

Теперь нужно в нее записать с помощью innerHTML. Проверим, в поле textarea выведем число 100.

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

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

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

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

$(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;';
	}
});

$(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

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