Практикум HTML 5 + CSS 3

В современном веб-дизайне язык разметки гипертекста (HTML) используется только для обозначения элементов веб-страницы. Для оформления страниц принято использовать каскадные таблицы стилей (CSS).

Здесь рассматриваются некоторые избранные аспекты использования связки HTML 5 + CSS 3. Задачи, решения которых представлены в практикуме, не являются стандартными задачами веб-дизайна, это скорее "гимнастика для ума", направленная на систематизацию и углубление знаний в данной области.

Внимание! Данные примеры не будут корректно работать в Internet Explorer 9 и "младше".

Рисование средствами HTML и CSS

Современные возможности CSS и HTML позволяют создавать на страницах довольно сложные объекты, включая простые рисунки, без использования графических файлов.

В данном примере используется CSS-свойство border-radius, позволяющее выйти за границы привычного нам "прямоугольного мышления".

Пример 1. Разминка

Изучаем возможности свойства border-radius

Данное свойство устанавливает радиус скругления уголков рамки. Если сама рамка отсутствует, то происходит скругления фона. Свойство может применяться к любым элементам, кроме таблиц, для которых задано свойство border-collapse: collapse.

HTML-код страницы

Результат - Пример «Свойство border-radius»

Пример 2. Рисуем в HTML

Используя только возможности html каскадных таблиц стилей, нарисуем солнышко.

  1. Все фрагменты рисунка верстаем блоками <div>.
  2. Позиционируем блоки - свойства position, top, left, margin, float, height, width.
  3. Придаем блокам нужную форму - свойство border-radius.
  4. Добавляем анимацию - свойство transform

HTML-код страницы

CSS-код страницы

Результат - Пример «Солнышко»

HTML 5. Объект Canvas

Используем элемент html 5 Canvas, позволяющий создавать растровые изображения.

Появившийся в HTML 5 тег <canvas> создает область (холст), в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.

Подробнее о Canvas

Пример 1. Рисуем круги

Задача: Используя функцию рисования круга, нарисуем снеговика

HTML-код страницы

Для рисования используем свойства strokeStyle (цвет линии), fillStyle (цвет заливки) и методы stroke, fill (выполняют обводку и заливку), beginPath, endPath (определяют начало и конец контура), arc (рисует дугу)

Пишем на Javascript функцию DrawCircle(x, y, r, scolor, fcolor), где

  • x, y - координаты центра окружности,
  • r - радиус окружности,
  • scolor - цвет обводки,
  • fcolor - цвет заливки.

Код Javascript

Результат работы кода - Пример «Снеговик»

Пример 2. Линии

Задача: нарисовать паучка

Для рисования используем свойства strokeStyle (цвет линии), fillStyle (цвет заливки) и методы stroke, fill (выполняют обводку и заливку), beginPath, endPath (определяют начало и конец контура), arc (рисует дугу), moveTo(х, у) (перемещает карандаш к указанной начальной точке), lineTo(х, у) (рисует линии до указанной конечной точки).

HTML-код страницы

Код Javascript

Результат работы кода - Пример «Паучок»