А как же крестики и нолики? Действительно, я совсем забыл о самих фигурах, о крестиках и ноликах. Давайте это исправим. В этом уроке мы познакомимся с технологией SVG и посмотрим какие мощные возможности открываются перед нами при совместном использовании SVG и CSS. Поехали!
SVG - Scalable Vector Graphic - масштабируемая векторная графика. Эта технология позволяет нам создавать изображения используя текстовый редактор. Давайте создадим новый файл и сохраним его под именем x.svg. Все делайте как в первом уроке, где мы сохраняли html файл, только поменяйте имя.
Итак, у нас готов пустой файл, в котором мы будем рисовать крестик. Запишите в файл следующие строки:
Как видите, содержимое файла очень похоже на html файл, здесь тоже есть элементы, теги и атрибуты. SVG - векторная графика, это значит, что мы будем рисовать линиями, дугами, окружностями и т.п. Здесь вам пригодились бы знания геометрии, но в данном случае, я у же все рассчитал.
Что такое крестик? Крестик - это две пересекающиеся под прямым углом линии. Каждая линия сама по себе наклонена к горизонту на 45 градусов. Все просто. Давайте нарисуем линию:
Мы добавили элемент line - линию, в атрибутах этого элемента указаны координаты этой линии x1, y1 - координаты начала линии, x2, y2 - координаты конца. Координаты отсчитываются от левого верхнего угла - это может показаться непривычным, если раньше вы с этим не сталкивались. Атрибут stroke - позволяет установить цвет это линии, в нашем случае черный. Вот так это должно выглядеть в браузере:
Кстати, забыл сказать, что svg файл тоже можно открывать в браузере.
Теперь добавим вторую линию. Она должна начинаться в точке 100;0 и заканчиваться в точке 0;100:
Должно получиться вот так:
Сделаем линии потолще при помощи атрибута stroke-width:
И результат будет такой:
Отлично, с крестиком разобрались. Теперь нарисуем нолик. Создайте файл o.svg.
Рисовать нолик будем при помощи элемента circle в атрибутах укажем координаты центра (cx и cy) радиус (r), цвет и толщину линии (как для линии) и цвет заливки (fill) - то есть каким цветом мы раскрасим фигуру, в нашем случае - прозрачным:
Откройте файл в браузере и убедитесь сами, что получился кружок.
Окей, поехали дальше. Давайте вернемся к файлу проекта. Чтобы поставить в клетке крестик или нолик мы будем добавлять к элементу класс x - для крестика и o - для нолика. Создадим эти классы:
Так, теперь необходимо добавить эти картинки к стилям. Каждый из этих классов будет устанавливать для ячейки фоновое изображение, в качестве изображения мы будем использовать наши подготовленные картинки. Фоновое изображение устанавливается стилевым свойством background-image. В значении этого свойства мы можем указать ссылку на файл изображения. Но мы просто скопируем сюда все наше изображение - файлы-то небольшие. Это делается при помощи data-url:
Перепишите это к себе. Здесь мы установили фоновое изображение для каждого класса. Когда мы скопировали наши svg файлы, мы заменили символы < > соответственно на %3C и %3E. Это связано с тем, что мы не можем использовать эти символы внутри определения стиля, поэтому нам и приходится их заменять.
Теперь давайте добавим класс x к первой ячейке, а класс o ко второй. Чтобы проверить как все это работает. Получилось вот так:
Не совсем то, что надо, надо уменьшить размеры фигур:
Посмотрим, что получилось:
Отлично, то, что надо. На этом закончим этот урок, дальше - программирование. Для начала немного теории, а затем практика.
Если остались вопросы - обязательно пишите их в комментариях.
Предыдущий урок | Содержание курса | Следующий урок
Подпишитесь на наш канал, чтобы не пропустить следующие уроки. Другие курсы и навигация по каналу
Новые уроки, новые курсы будут на моем блоге здесь: keklik.me.