Создание непрямоугольных макетов с помощью CSS-форм - Сара Соуэйдан - Независимый пользовательский интерфейс UI / UX Developer

1. Объявление форм
2. Создание системы координат на элементе
3. Применение фона к пользовательской фигуре
4. Быстрое напоминание
5. Пример # 1: плавающий текст вокруг пользовательской фигуры с помощью shape-outside
6. Использование многоугольника ()
7. Использование URI изображения
8. Пример №2: обтекание / перетекание текста в произвольную форму с shape-inside
9. Используя круг ()
10. Использование URI изображения
11. Пример № 3: обтекание / перетекание текста в произвольную форму с shape-inside
12. Пример № 4: несколько областей с плавающей точкой внутри формы
13. Заключительные слова
14. Ресурсы и дальнейшее обучение

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

С появлением CSS Shapes в Интернете, упаковка контента в нестандартные непрямоугольные формы и воссоздание печатных дизайнов и макетов в Интернете становится легкой задачей!

В этой статье мы рассмотрим основы объявления форм и создания простых макетов с использованием этих новых технологий CSS. Когда будет реализовано больше возможностей CSS Shapes, будут возможны более сложные и удивительные макеты, но даже с тем, что мы имеем под рукой, несколько интересных и очень креативных макетов может быть создан с дополнительными экспериментами.

Технологии CSS, о которых мы расскажем в этой статье, могут не работать в вашем браузере. Если вы хотите увидеть работающие живые демонстрации, вам нужно убедиться, что вы просматриваете их в браузере, который поддерживает эти технологии. Проверить текущее состояние поддержки браузером CSS Shapes из. Вам не нужен поддерживающий браузер для понимания функций и демонстраций. Я включил скриншоты демонстраций, чтобы вы могли видеть, как выглядит конечный результат .

В большинстве демонстраций этой статьи используется свойство shape-inside, которое временно удалено из Webkit а также мерцать , Итак, на данный момент в этой статье будут показаны только скриншоты того, как работают демоверсии при повторной реализации shape-inside.

Объявление форм

Все элементы HTML имеют прямоугольную прямоугольную модель, которая управляет потоком контента внутри и вокруг него. Чтобы придать элементу непрямую форму, используются свойства shape-inside и shape-outside. На момент написания этой статьи свойство shape-outside можно было применять только к плавающим элементам, а свойство shape-inside реализовано не полностью, поэтому вы можете по-прежнему находить ошибки при его использовании. Свойства shape- * также можно применять только к элементам уровня блока. Элементы неблокированного уровня следует принудительно блокировать, если вы хотите использовать для них свойство shape.

Свойства Shape- * принимают одно из трех значений: auto, базовая фигура или URI изображения. Если значение установлено на auto, область с плавающей точкой элемента использует поле для полей как обычно. (Если вы не знакомы с Блочная модель CSS , убедитесь, что вы читаете об этом, потому что вы должны знать, как это работает).

Если в качестве значения задана функция shape, то форма рассчитывается на основе значений одного из параметров: «inset», «circle», «ellipse» или «polygon». Вы можете узнать больше о каждой из этих функций в Эта статья командой Adobe Platform.

И наконец, если в качестве значения задан URI изображения, браузер будет использовать изображение для извлечения и вычисления формы на основе альфа-канала изображения. Форма вычисляется как путь, который охватывает область, где непрозрачность указанного изображения больше, чем пороговое значение shape-image. Если shape-image-threshold не указан, начальное значение, которое следует учитывать, составляет 0,5. Изображение должно быть CORS-same-origin, иначе оно не будет работать, и значение по умолчанию auto будет значением вычисленной формы.

Формы, определенные с помощью свойства shape-outside, определяют область исключения для элемента, в то время как формы, определенные с помощью свойства shape-inside, определяют область с плавающей точкой элемента. Мы узнаем, что каждый из них означает в примерах ниже.

Формы, определяемые свойствами shape- *, можно изменить с помощью свойств shape-margin и shape-padding. Свойства полей и отступов не требуют пояснений.

Создание системы координат на элементе

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

Система координат необходима, потому что формы, которые вы объявляете, будут определяться набором точек (и радиусами, например, если вы рисуете круги или эллипсы), и эти точки имеют координаты x и y, которые будут помещены в эту систему координат.

Свойства shape- * используют блок содержимого элемента, к которому они применяются, для своей системы координат, поэтому, чтобы заставить их работать, вам нужно указать фиксированную ширину и высоту для элемента, который определяет его ограничивающий блок, который в Поворот будет использоваться, чтобы установить систему координат для фигур, которые вы рисуете. Если не указаны явная ширина и высота, свойства shape- * не работают .

Начало координат системы координат, определенной в ограничительной рамке элемента, расположено в верхнем левом углу.

Итак, чтобы объявить фигуру элементом, вы должны начать с:

1. Указание размеров элемента, получающего форму (помните: элемент должен быть плавающим, когда на нем используется форма).
2. Объявление формы для этого элемента с использованием свойств shape- *.

Применение фона к пользовательской фигуре

Другими словами, форма, которую вы определяете для элемента с использованием свойств shape- *, влияет только на область с плавающей точкой, то есть на поток содержимого внутри / снаружи этого элемента, но все другие свойства элемента не будут затронуты.

Например, предположим, что вы хотите нарисовать только круглую форму и плавать содержимое на своей стороне, как на рисунке ниже, вам сначала нужно объявить круглую форму на элементе (опять же, не забывайте плавать элемент и давать это высота и ширина). Затем, скажем, вы хотите применить цвет фона к круглой форме, чтобы он выглядел как на изображении.

Фон, примененный к пользовательской объявленной форме

У вас будет соблазн просто добавить цвет фона к содержащему элементу, а затем получить приведенный выше результат (это то, что я сделал в первый раз), но это не сработает. Причина этого заключается в том, что на все свойства элемента, кроме потока содержимого вне его, не будет влиять форма, определенная в нем, и они будут отображаться в обычном режиме в соответствии с блочной моделью элемента (его прямоугольной формой). ), как мы видели в спецификации. Так что, если вы примените к нему цвет фона, вы в конечном итоге с этим.

Фон применяется к прямоугольной форме элемента

Итак, как мы можем применить цвет только к форме, а не ко всему элементу? Это где свойство clip-path от спецификация CSS Masking может помочь.

Свойство clip-path будет использовано для обрезки ненужных нам элементов элемента и сохранения только частей внутри определенной нами формы. Это, очевидно, означает, что мы на самом деле не применяем цвет к фигуре, мы просто обрезаем элемент и оставляем без изменений только фигуру. При этом вы получите плавающий круг, обертывающий текст снаружи.

Как именно? какое значение получает свойство clip-path для этого?

Пользовательская система координат для фигур, определенных свойством clip-path, устанавливается с помощью ограничивающего прямоугольника элемента, к которому применяется обтравочный контур, поэтому система координат такая же, как у свойств shape- *.

Из-за этого мы можем использовать ту же форму, определенную в свойстве shape- * для пути обрезки, которая будет вырезать или обрезать все внутри содержащего элемента, находящегося за пределами формы, и в итоге мы получим пользовательская форма с фоном.

Вы можете проверить эту концепцию вживую в эта ручка Просто убедитесь, что вы проверите его в браузере поддержки.

Быстрое напоминание

На момент написания этой статьи свойство shape-outside работает только с плавающими элементами, а свойства shape-outside и shape-inside применяются только к элементам уровня блока или встроенным элементам, вынужденным блокировать . Форма, определенная в плавающем элементе, приведет к тому, что встроенное содержимое будет обернуто вокруг определенной формы вместо ограничивающей рамки плавающего элемента. Будущие уровни CSS Shapes позволят использовать фигуры на элементах, отличных от плавающих, и когда это произойдет, мы сможем обернуть содержимое с обеих сторон фигуры (как на рисунке ниже). Так что на данный момент мы можем только перемещать элемент и иметь поток контента по обе стороны от него.

Текущий контент с обеих сторон формы CSS

Вы также можете подделать упаковку с обеих сторон, используя Плагин исключения Punch от Медведь Трэвис ,

Теперь давайте запачкаем руки в рисовании фигур и создании веселых макетов!

Каждый из следующих примеров представит новый совет / идею / технику, которая используется для определения и использования форм и исключений CSS.

Вы можете просмотреть живое демо для каждого примера, нажав на скриншот демо.

Пример # 1: плавающий текст вокруг пользовательской фигуры с помощью shape-outside

Начнем с простого примера. В этом примере мы собираемся определить пользовательскую форму и иметь поток контента на своей стороне. Конечный результат будет выглядеть как на картинке ниже:

Скриншот демо # 1. Нажмите на скриншот, чтобы увидеть рабочую демонстрацию.

В демоверсии у нас есть контейнер, который содержит два элемента: контейнер .content с текстом слева и другой элемент с плавающей точкой справа class.shaped, который получит пользовательскую фигуру и будет иметь текстовый поток с левой стороны. ,

Заголовок в области .content также обрабатывается аналогично тому, который мы даем плавающему элементу div справа, поэтому я пропущу его объяснение и расскажу только о том, что мы делаем в области .shaped на право.

<div class = "container"> <div class = "shape"> </ div> <div class = "content"> <h1> <span> La </ span> Экскурсия <br/> Eiffel </ h1> < p> Lorem Ipsum ...... </ p> </ div> </ div>

Сначала мы дадим плавающему div справа заданную высоту и ширину, чтобы установить систему координат. Мы установим его высоту равной его контейнеру, который для этой демонстрации я установил равной высоте окна просмотра, используя CSS-модуль vh.

.container {переполнение: скрыто; высота: 100vh; ширина: 100 кВт; } .shaped {float: left; высота: 100vh; ширина: 40vw; плавать: право; фон: черный URL (../ images / eiffel.jpg) центральная вершина не повторяется; фон-размер: крышка; }

Теперь, когда система координат готова, мы собираемся нарисовать фигуру, чтобы определить плавающую и исключающую области элемента. Есть два способа объявить форму для этой демонстрации:

Использование многоугольника ()

Для первого метода мы будем использовать функцию polygon (). Эта функция принимает набор точек, которые образуют многоугольник, каждая точка определяется координатами x и y. Мы собираемся определить очень простую многоугольную форму с 4 вершинами, как показано на рисунке ниже (синие и оранжевые диски):

Снимок экрана, показывающий вершины, составляющие многоугольную форму

Координаты точек могут иметь либо конкретные значения (px или em), либо процентные значения. В этом примере мы собираемся предоставить процентные значения для вершин, видимых на скриншоте выше. Теперь все, что нам нужно сделать, это просто объявить эту форму на плавающем элементе так, чтобы текст шел на его стороне.

.shaped {/*...*/ shape-outside: многоугольник (0 0, 100% 0, 100% 100%, 30% 100%); поле формы: 20 пикселей; }

И это все! теперь текст может перемещаться в области с плавающей точкой элемента, определяемой пользовательской формой, которую мы объявили для него.

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

Но у нас есть еще одна вещь, чтобы добавить здесь. Как я упоминал в предыдущем разделе, фон плавающего элемента применяется к его исходной прямоугольной форме, а не только к форме, которую мы объявили для него, потому что свойство background не зависит от формы, объявленной в элементе. Пока демо выглядит так:

Снимок экрана: фон, наложенный на элемент, покрывающий его прямоугольную форму

Поэтому, чтобы вырезать лишние области, которые нам не нужны, мы собираемся использовать свойство clip-path и присвоить ему то же значение / форму, которое мы указали в свойстве shape-outside выше. Итак, мы добавляем это правило в набор правил:

.shaped {/*...*/ clip-path: polygon (0 0, 100% 0, 100% 100%, 30% 100%); }

И мы сделали! Просто, правда?

Заголовок страницы слева обрабатывается так же, как и .floated div справа. Заголовок плавает внутри своего контейнера .content, ему задают определенную высоту и ширину, чтобы установить систему координат, а затем объявляется форма с использованием свойства shape-outside, как мы это делали для элемента .floated.

Использование URI изображения

Другой способ определить форму нашего элемента - использовать изображение с альфа-каналом, то есть любое изображение с прозрачными областями.

Для нашего примера здесь вместо использования функции polygon () для определения формы, мы дадим свойству shape-outside URI изображения, а браузер извлечет форму из изображения и будет использовать ее.

Изображение, которое определит область исключения для этого примера, показано ниже. Вы можете видеть, что изображение показывает ту же форму, определенную точками многоугольника () в предыдущем методе.

Изображение с альфа-каналом, URI которого будет использоваться для извлечения и вычисления значения фигуры

Когда вы используете изображение с альфа-каналами для определения формы для свойства shape-outside , прозрачная область изображения будет определять область, в которой течет встроенный текст, эта область называется плавающей областью элемента. Черная часть определяет область исключения элемента.

Чтобы использовать это изображение, мы пишем следующее:

.shaped {/*...*/ shape-outside: url (../ images / mm.png); shape-image-threshold: 0.5; / * это свойство используется для установки порога, используемого для извлечения фигуры из изображения. 0.0 = полностью прозрачный и 1.0 = полностью непрозрачный * /}

Каждый из двух упомянутых методов имеет свои преимущества. Возможно, вы захотите использовать URI изображения для сложных фигур, которые могут быть громоздкими для определения точек вручную, в этом случае создание изображения альфа-канала в Photoshop будет намного проще и быстрее, чем добавление точек вручную.

Другая ситуация, когда вы можете захотеть использовать URI изображения вместо функции формы, это когда у вас есть несколько плавающих или исключающих областей внутри элемента, в этом случае использование этого метода необходимо, потому что вы не можете, на данный момент, объявлять несколько фигур в элемент, но если изображение содержит несколько областей, браузер извлекает эти области из изображения и использует их. Довольно аккуратно, правда? :) мы увидим пример этого в последней демонстрации.

Пример №2: обтекание / перетекание текста в произвольную форму с shape-inside

Для второго примера мы создадим простую демонстрацию, где конечный результат будет выглядеть следующим образом:

Снимок экрана с демонстрацией № 2

Цель этого примера - продемонстрировать свойство shape-inside, используемое для перемещения текста внутри непрямоугольной формы. У нас есть элемент контейнера с некоторым текстом-заполнителем внутри, и мы применили фотографию в качестве фонового изображения для этого контейнера.

<div class = "container"> <div class = "content"> <p> ... </ p> </ div> <h2> Кукурузный хлеб </ h2> </ div>

Как вы можете видеть из демонстрационного скриншота выше, текст обернут внутри круглой формы сверху. Итак, мы знаем, что нам нужно объявить круг на нашем контейнере. Теперь, как и в предыдущем примере, мы можем сделать это двумя способами.

Используя круг ()

Используя функцию circle (), мы определим круг и разместим его на нашем элементе.

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

Система координат и форма, определенные на контейнере

Поскольку мы хотим обернуть текст внутри пользовательской фигуры, а не обтекать ее вокруг, мы будем использовать свойство shape-inside для элемента, содержащего этот текст. Когда вы применяете свойство shape-inside к элементу, вы должны помнить, что этот элемент будет иметь текстовое содержимое внутри, в отличие от предыдущего примера, где содержимое находилось вне элемента, для которого мы объявили форму.

Мы укажем координаты центра круга, установим значение его радиуса и применим их к контейнеру:

.container {float: left; ширина: 600px; высота: 900px; переполнение: скрытый; поле: 0 50px; белый цвет; Размер шрифта: 13px; обивка: 10px; фон: URL (../ images / pan.jpg) вверху слева без повтора; размер фона: 100% 100%; / * объявить форму с помощью функции shape circle () * / shape-inside: circle (160px при 400px 60px); }

Конечно, если вы не пытаетесь создать идеальную круглую форму, вы также можете определить форму с помощью функции polygon ().

Использование URI изображения

Мы также можем использовать URI изображения с альфа-каналом, чтобы извлечь из него форму круга. Изображение будет выглядеть следующим образом:

Изображение с альфа-каналом, определяющим круглую форму

Здесь важно отметить, что когда вы используете изображение с альфа-каналом для определения формы для свойства shape-inside , черная (или непрозрачная) область изображения будет определять область, в которой течет текст. В предыдущем примере непрозрачная область определила область исключения элемента, к которому мы применили форму, то есть область, в которой нет текста.

Итак, объявите форму, используя URI изображения вместо функции круга shape (), вам нужно будет установить значение свойства shape-inside, чтобы оно указывало на URI изображения:

.container {/*...*/ shape-inside: url (mask.png) вверху слева; }

Пример № 3: обтекание / перетекание текста в произвольную форму с shape-inside

В этом примере мы также собираемся объявить многоугольную форму на контейнере, и его содержимое будет внутри этой формы. Конечный результат будет выглядеть как на картинке ниже:

Скриншот демонстрации № 3

Здесь также мы можем использовать либо функцию shape, либо URI изображения для объявления формы элемента.

Форма, объявленная в этом контейнере, является явно «случайной» многоугольной формой, а не геометрической формой, которую мы могли бы объявить, используя функцию формы, такую ​​как circle (), ellipse () или inset (), поэтому мы будем использовать многоугольник () функция, чтобы объявить это.

Форма, определяемая набором точек, видна на изображении ниже.

Многоугольная форма определяется набором точек

Поскольку существует довольно большое количество точек, составляющих эту форму, было бы неудобно вычислять координаты этих точек, поэтому было бы полезно, если бы был доступен визуальный инструмент, который помог бы нам нанести эти точки на изображение, верно? Ну, есть инструмент, созданный Adobe Медведь Трэвис , который на самом деле представляет собой набор инструментов, которые могут помочь вам при работе с формами CSS. Убедись, что ты проверить инструменты формы потому что они очень ценны.

Один из упомянутых инструментов Shape называется Poly Draw и он позволяет вам вручную «рисовать» фигуру, в частности, многоугольник, а затем генерирует координаты фигуры, которую вы можете скопировать и вставить в ваш CSS, чтобы объявить фигуру в вашем элементе.

Я использовал инструмент Poly Draw, чтобы нарисовать вышеуказанную форму на изображении. Теперь инструмент не берет изображение и устанавливает его в качестве фона для элемента, для которого вы определяете форму, поэтому мне пришлось сделать клон репозитория инструмента и немного поиграть с кодом инструмента в инструментах разработчика, и я применил к нему изображение и нанес на него точки.

Разван Калиман предложил эту идею, когда я спросил его о наличии инструмента, который позволяет нам определять формы поверх изображений прямо в браузере, точно так же, как тот, который он показал и использовал в его выступление на CSS Conf EU в этом году , Если вы еще не смотрели его разговор, убедитесь, что вы делаете. Инструмент, который он использовал, когда-нибудь, надеюсь, скоро станет открытым исходным кодом Adobe, и тогда он станет незаменимым инструментом при работе с формами CSS. Но до тех пор, вы могли бы сделать с инструментом Poly Draw.

После рисования фигуры с помощью инструмента Poly Draw все, что вам нужно сделать, это объявить результирующую фигуру на вашем элементе, и все готово.

.container {ширина: 445 пикселей; высота: 670px; переполнение: скрытый; поле: 30px авто; / * форма, сгенерированная инструментом Poly Draw * / shape-outside: многоугольник (170.67px 291.00px, 126.23px 347.56px, 139.79px 417.11px, 208.92px 466.22px, 302.50px 482.97px, 343.67px 474.47px, 446.33px 454.33px 452 px, 443,63px, 246,82px, 389,92px, 245,63px, 336.50px, 235,26px, 299,67px, 196,53px, 259,33px, 209,53px, 217,00px, 254,76px); }

Мы также могли бы определить форму выше, используя изображение с альфа-каналом. Изображение ниже показывает, как это изображение будет выглядеть. Опять же, черные области определяют область с плавающей точкой при использовании shape-inside, и именно там будет проходить текст.

Изображение с альфа-каналом, определяющим форму для демонстрации № 2

Если вы хотите использовать URI изображения вместо функции shape, вы должны заменить вышеприведенное значение shape на следующее:

.container {/*...*/ shape-inside: url (mask.png) вверху слева; }

Пример № 4: несколько областей с плавающей точкой внутри формы

В этом примере мы собираемся создать несколько плавающих областей внутри элемента, чтобы обернуть содержимое внутри. Результат этой демонстрации показан на следующем рисунке:

Скриншот демонстрации № 4

У нас есть div с фоновым изображением, и мы хотим, чтобы текст внутри этого div проходил внутри определенных областей внутри него, каждый из которых имеет свои собственные формы.

<div class = "container"> <div class = "content"> <h2> бутерброд с розмарином </ h2> <p> ... </ p> </ div> </ div>

Теперь, поскольку мы не можем объявить несколько фигур на элементе, мы собираемся использовать изображение с альфа-каналом. Изображение может содержать столько форм и областей, сколько вы хотите, поэтому идеально определить несколько фигур на элементе, и браузер извлечет все формы из этого изображения и использует их на элементе.

Мы будем использовать следующее изображение для определения форм. Черные области на изображении будут определять плавающую область для содержимого внутри .container, куда будет перетекать текст.

Изображение с альфа-каналом, определяющим фигуры для демонстрации № 3

Мы будем использовать URI этого изображения в качестве значения свойства shape-inside, которое мы собираемся объявить в .container, при этом не забывая устанавливать значения высоты и ширины для div:

.container {ширина: 556 пикселей; высота: 835px; переполнение: скрытый; поле: 0 50px; белый цвет; позиция: относительная; фон: URL (../ images / bread.jpg) вверху слева без повтора; размер фона: 100% 100%; shape-inside: url (mask.png) вверху слева; Размер шрифта: 13px; }

И мы сделали. Браузер делает всю остальную работу за нас, извлекая фигуры из изображения, которое мы ему дали, и наш текст красиво течет внутри этих областей!

Использование изображения для определения форм - это логичный путь, когда у вас есть отдельные области, которые не связаны друг с другом, то есть не образуют одну многоугольную форму. Для этой демонстрации мы могли бы использовать функцию polygon (), чтобы определить форму, определив многоугольник, похожий на тот, что на изображении ниже:

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

Но, как вы можете заметить, это не лучший способ сделать это, я просто добавил это, чтобы показать разницу между использованием изображения и определением формы с помощью polygon (), и показать, что иногда это лучшая практика или это кажется более правильным и имеет больше смысла - использовать изображение, даже если вы можете использовать функцию формы для определения ваших форм.

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

Как только будущие функции CSS Shapes будут реализованы, и возможно оборачивать содержимое с обеих сторон формы, создание печатных дизайнов цифровых журналов становится очень возможным при объединении Shapes и Exclusion с Regions и Flexbox.

Журнал Travel by Бартош Квецень на Behance. Подобный макет может быть воспроизведен с использованием будущих технологий CSS Shapes и Regions ()

Flexbox предоставляет нам столбцы одинаковой высоты, Regions позволяет нам перетекать текст в различные области на странице и отделять содержимое страницы от ее макета, а Shapes и Exclusion позволяют нам добавить тот последний творческий штрих, который переносит наши макеты журнала в следующий уровень.

Заключительные слова

Я не думаю, что был в восторге от новой функции CSS, так как я о CSS-формах и исключениях. Мощь, гибкость и креативность, которые могут обеспечить эти функции в сочетании регионов и flexbox, просто фантастика!

Широко распространенная поддержка CSS Shapes должна появиться в ближайшее время, так как команда веб-платформ в Adobe постоянно работает над улучшением и реализацией этих функций, а также предоставляет инструменты, облегчающие работу с ними.

Будущее веб-макета выглядит ярче и увлекательнее с каждым днем. Это прекрасное время для веб-разработчика!

Я надеюсь, что эта статья помогла вам познакомить вас с технической частью начала работы с CSS Shapes. Это не будет моей последней статьей на эту тему. Объединение форм CSS с другими передовыми технологиями CSS, такими как Regions, открывает дверь в новый мир творчества и множество новых учебных пособий! ;)

Вы должны подписаться на мой блог Новостная лента а также Подпишись на меня в Твиттере оставаться в курсе новых статей.

Спасибо за чтение!

Ресурсы и дальнейшее обучение

Эта статья не была бы возможна без большой помощи Разван Калиман Так что большое спасибо ему.