УРОКИ ОТ БОЛТЛИВОГО ТАБУРЕТА ПО ПРОГРАММИРОВАНИЮ В БРАУЗЕРЕ

Первый урок рисуем квадрат, круг и треугольник.





Эта программа нарисует на экране квадрат, круг и треугольник.
скопируйте её в блокнот и сохраните с расширением .htm
Откройте в браузере, только не в Internet Explorer.

Между тегами style:- свойства наших объектов в коде CSS
Наверное уже догадались что эти три объекта с одинаковым набором свойст.
Меняя их значения получим различные геометрические фигуры.
Пробуйте вводить новые значения в левой колонке.

Параметры этого флажка
border-top: 50px solid #ff0000;
border-left:50px solid #ff0000;
border-bottom: 50px solid #ff0000;
border-right: 100px solid transparent;
height:0;
width:0;
border-radius:0;
transform:rotate(0deg)


border-top: 50px solid green;
border-left:1px solid #000000;
border-bottom: 0 solid #000000;
border-right: 1px solid #000000;
height:100px;
width:80px;
border-radius:150px;
transform:rotate(70deg);
background: #cccc00;
Это текст с параметрами этой капсулы.

На втором уроке расскажу как передвигать объекты по экрану.
.
КВАДРАТ
толщина стиль и цвет верхней
линии border-top -------
толщина стиль и цвет левой
линии border-left -------
толщина стиль и цвет нижней
линии border-bottom --
толщина стиль и цвет правой
линии border-right ----

размер по вертикали height-------

размер по горизонтали width------

округление углов border-radius--

наклон объекта transform rotate-

цвет объекта background----------

КРУГ
толщина стиль и цвет верхней
линии border-top -------
толщина стиль и цвет левой
линии border-left -------
толщина стиль и цвет нижней
линии border-bottom --
толщина стиль и цвет правой
линии border-right ----

размер по вертикали height-------

размер по горизонтали width------

округление углов border-radius--

наклон объекта transform rotate-

цвет объекта background----------

ТРЕУГОЛЬНИК
толщина стиль и цвет верхней
линии border-top ------
толщина стиль и цвет левой
линии border-left ------
толщина стиль и цвет нижней
линии border-bottom -
толщина стиль и цвет правой
линии border-right ----

размер по вертикали height-------

размер по горизонтали width------

округление углов border-radius--

наклон объекта transform rotate-

цвет объекта background----------