SVG анимация
SVG анимация, в отличии от css, имеет доступ ко всем атрибутам элементов и следовательно больше возможностей. Но если вы знаете и умеете JS, то svg анимация не предложит вам ничего такого чего бы вы не сделали используя Javascript. Главное помнить что анимация сделанная с применением Javascript не будет работать если svg добавлен на страницу через тег <img> или как background-image. Подробнее про JS анимацию SVG в другой раз.
Для анимации в SVG нужно создать объект <animate> и выбрать объект для анимации через атрибут xlink:href. В качестве параметра xlink:href принимает URI ссылку.
Если xlink:href не задан, то анимация применится к родительскому элементу
Следующим шагом указываем атрибут который будем изменять. Для этого используем attributeName. Имя атрибута может быть одним из SVG атрибутов или css свойством. Есть необязательный параметр attributeType, который подсказывает к чему относится атрибут(css или svg). Если attributeName не задан, браузер сначала посмотрит доступные css свойства если нет то проверит svg атрибуты. AttributeName принимает только одно значение. Если нужно анимировать несколько атрибутов нужно для каждого добавить <animate>.
Обект и атрибут выбрали. Переходим к анимации. Условия при которых начинается анимация определяются в атрибуте begin. В качестве параметра принимает время или действие после которого должна запуститься анимация. Например begin=»3s» запустит анимацию через три секунды после загрузки а begin=»click» после клика. Можно комбинировать begin=»click + 3s» — через три секунды после клика.
Старт анимации одного элемента можно привязать к анимации другого. Для этого нужно задать для первого элемента id(например id=»first_animanion») а для второго указать begin=»first_animation.begin + 3s». Таким образом мы запустим анимацию через три секунды после старта анимации с id first_animation. Но это ещё не всё. begin=»first_animation.end» запустит анимацию после завершения first_animation, а begin=»first_animation.end — 3s» запустит анимацию за 3 секунды до завершения first_animation.
Атрибуты from и to определяют начальное и конечное значение анимируемого атрибута. Dur определяет время анимации.
Атрибут анимации fill определяет что делать элементу после завершения анимации. Принимает два значения:
- freeze — оставляет элемент в том же состоянии в каком элемент оказался в момент завершения анимации
- remove — возвращает элемент в первоначальное состояние.
Атрибут repeatCount определяет сколько раз повториться анимация. Можно указать конкретное количество повторений или для бесконечных повторений — indefinite. Не обязательный атрибут. Без него анимация проигрывается один раз.
Атрибут restart управляет перезапуском анимации. Принимает одно из трёх значений
- always — возможен перезапуск в любой момент
- whenNotActive — перезапуск возможен после завершения анимации
- never — перезапуск невозможен.
Пример как всё это выглядит в коде и в браузере.
Curved Tail Arrow
CSS
#curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid red;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
#curvedarrow:after {
content: «»;
position: absolute;
border: 0 solid transparent;
border-top: 3px solid red;
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
|
1 |
#curvedarrow { positionrelative; width; height; border-top9pxsolidtransparent; border-right9pxsolidred; -webkit-transformrotate(10deg); -moz-transformrotate(10deg); -ms-transformrotate(10deg); -o-transformrotate(10deg); } #curvedarrow:after { content»»; positionabsolute; bordersolidtransparent; border-top3pxsolidred; border-radius20px; top-12px; left-9px; width12px; height12px; -webkit-transformrotate(45deg); -moz-transformrotate(45deg); -ms-transformrotate(45deg); -o-transformrotate(45deg); } |
Адаптивные гриды
До этого, я уже об этом писал, но кастомные свойства помочь в создании сложных шаблонов на гридах, упростив управление их поведением. Предположим, что у нас есть грид в 8 колонок, который мы хотим сделать 12-ти колоночным на каком-либо разрешении экрана:
Нам совершенно необязательно прописывать всё значение свойства целиком всякий раз, когда нам надо обновить количество колонок — тут мы можем спокойной применить кастомные свойства. Вообще, это сравнительно простой пример, но он может быть очень полезным, если у нас под рукой куда более сложный грид. Также этот подход применим к таким вещам, как размер трека или расположение элемента.
Правила изготовления узора орнамента
Благодаря правильной геометрической форме плитки можно укладывать простым способом, при котором стыкуются одинаковые грани друг с другом. Визуальные эффекты достигаются за счет применения фрагментов разной расцветки.
При обустройстве полотна швы не смещаются, но сама плитка легко укладывается на извилистых или радиусных участках. Эта особенность монтажа используется в ландшафтном дизайне и позволяет подчеркнуть стильное оформление территории. Плитку потребуется разрезать, так как в оригинальном виде ромб состыкуется с бордюром без сохранения орнамента полотна.
При укладке боковые грани ряда прижимаются к поребрику с использованием четного числа рядов, которое обеспечивает зеркальную симметрию. Даже в этом варианте укладки применяются половинки ФЭМ.
Объявление формы
Все HTML-элементы имеют прямоугольную блочную модель, которая управляет потоком
содержимого внутри и снаружи нее. Для того, чтобы придать элементу непрямоугольную
форму, мы используем свойства и . Когда я писала эту
статью, свойство применялось только для плавающих элементов, а свойство
не было полностью внедрено, поэтому при использовании этих свойств у вас
могут возникать ошибки. Свойства shape-* могут применяться только к блочным элементам.
Неблочные элементы должны приводиться стилями к блочным, и только тогда можно
использовать shape-свойства.
И наконец, если свойству задано URI изображения, браузер будет использовать изображение
для извлечения и вычисления формы, основываясь на альфа-канале изображения. Форма
вычисляет путь, который охватывает область, где непрозрачность указанного изображения
больше, чем значение параметра . Если параметр не задан, то исходным значением считается . Изображение должно быть
CORS-same-origin, в противном случае оно не будет работать, и значение shape-* свойства
автоматически установится в .
Формы, определенные при помощи свойства , определяют область
исключения на элементе, а те, которые определены с помощь свойства ,
определяют плавающую область на элементе. На примерах, приведенных ниже, мы узнаем,
что это означает.
Формы, определенные при помощи свойств shape-*, могут быть изменены при помощи и . Эти свойства говорят сами за себя.
Использование polygon()
В первом способе мы будем использовать функцию . Данная функция принимает
набор точек, которые образуют четырехугольник, каждая точка задается через координаты
и . Мы собираемся определить очень простую четырехугольную фигуру с 4 вершинами, как
показано на рисунке ниже (оранжевые и голубые точки):
Скриншот на котором изображены вершины, которые образуют четырехугольную форму
Координаты точек могут иметь либо конкретные значения ( или ), либо процентные
значения. В этом примере мы устанавливаем процентные значения для вершин. Сейчас всё,
что мы должны сделать, это указать форму плавающему элементу так, чтобы текст обтекал
его.
И это все! Теперь текст обтекает плавающий элемент по специальной форме, которую мы
определили.
Также вы можете видеть, что я добавила внешний отступ, чем отдалила содержимое от формы
и создала промежуток между ними.
Но нужно добавить кое-что еще. Как я упоминала в предыдущей части, фон плавающего
элемента применяется к оригинальной прямоугольной форме, а не к форме определенной на
нем, потому что свойство фона не распространяется на форму, определенную на элементе. В
примере это выглядит так:
Скриншот показывает, что фон применился к элементу покрывающему прямоугольную форму
Поэтому мы вырезаем лишнюю часть с помощью свойства , которому мы дадим то
же значение/форму, что мы дали свойству выше. Мы добавим это правило в
набор правил:
Вот мы и закончили! Легко, не правда ли?
Заголовок страницы слева имеет такое же поведение, как и с классом .
Заголовок плавает внутри контейнера , ему дана конкретная высота и ширина для
установки системы координат, а затем на нем устанавливается форма при помощи свойства
так же, как мы это делали для элемента .
Комбинирование CSS-форм с регионами и флексбоксами для создания журнальных макетов
Обычно бумажные журналы используют комбинацию многоколоночного текста с
непрямоугольными формами для создания необычного и привлекательного дизайна. Колонки в
таких случаях одинаковой высоты, если не требуется обратного.
После того как планируемые возможности CSS-форм будут реализованы, и оборачивание
контента с двух сторон формы станет возможным, создание макетов наподобие печатных
журналов станет реальным, и тогда мы сможем комбинировать формы и исключения с
регионами и флексбоксами.
Флексбоксы дают нам столбцы одинаковой высоты; регионы позволяют размещать текст в
разных областях страницы и разделять содержимое страницы от его расположения; формы и
исключения позволят нам добавить тот финальный штрих, который выведет «журнальную»
верстку на новый уровень.
Урок: Рисуем геометрические фигуры в Скретч
Рассмотрим примеры рисования в скретч геометрических фигур (прямая, квадрат, круг, треугольник и другие).
Составление простых форм и геометрических фигур в Скретч
Задание 1. Начнем с программы, которая рисует квадрат. Её программный код будет выглядеть так:
Запустите программу по флажку. Должно получиться так:
Когда у спрайта поднято перо, то он не оставляет линии при перемещении. Когда перо опущено, как бы вы не перемещали спрайт из точки А в точку Б, от А до Б будет рисоваться линия установленного цвета и толщины.
Команда «печать» отпечатывает изображение спрайта в том месте, где он находится.
Задание 2. Составить программу «Круги», используя цикл, для исполнителя Scratch. Нужно, чтобы он рисовал цветные круги с уменьшением размера на 50 и с изменение цвета на 25:
Задание 3. Реализуйте мини-проект «Пунктирная линия». Параметры пера в начале выполнения – синий цвет, размер – 7. Нужно, чтобы Scratch рисовал пунктирную линию из 5 штрихов длиной 50 шагов, расстояние между ними 20 шагов (перо можно опускать и поднимать).
Задание 4. Составить алгоритм и написать программу для рисования цветной пунктирной линии:
Задание 5. Реализуйте мини-проект «Штрих — пунктирная линия». Параметры пера в начале выполнения – оранжевый цвет, размер – 5. Нужно, чтобы Scratch рисовал пунктирную линию из 5 штрихов длиной 50 шагов и точек, расстояние между ними 10 шагов (перо можно опускать и поднимать).
Задание 6. Реализуйте мини-проект «Круг — пунктирная линия». Параметры пера в начале выполнения – зеленый цвет, размер – 6. Нужно, чтобы Scratch рисовал линию из 5 штрихов длиной 50 шагов и точек, расстояние между ними 10 шагов (перо можно опускать и поднимать).
Задание 7. Есть много интересных способов рисовать в Скретч. Вот пример кода «завитушки»:
Задание 8. Создадим скрипт, рисующий равносторонний треугольник.Для рисования треугольника использована конструкция повторить…. Т.к. утреугольника три стороны, то команды повторяем 3 раза. Длина стороны – 50 шагов. Угол поворота спрайта вправо — 1200 (можно выбрать влево), (т.к. полный оборот — 3600 поэтому 360:3=120).
Если изменить угол поворота (повернуть …на…) и количество шагов (повторить…), то можно получить другие фигуры: шестиугольник, восьмиугольник и так далее. Поэкспериментируйте.
Задание 9. Усложним задачу. Нарисуем 10 треугольников на сцене так, чтобы они появлялись случайным образом. Для этого нам необходимо, чтобы координаты положения спрайта изменялись случайно. 
Задание 10. Нарисуйте дом. Составьте код по образцу и проанализируйте его работу:
Создание сложных фигур. Рисование в Скретч
В Скретч можно создавать множество красивых рисунков, составив им соответствующий код.
Для примера, создадим следующие коды по образцу и запустим их:
- Составить программу для исполнителя рисования «фигуры из звездочек»:
- Составить еще одну программу:
Did you find apk for android? You can find new Free Android Games and apps.
Pac-Man
CSS
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
|
1 |
#pacman { width0px; height0px; border-right60pxsolidtransparent; border-top60pxsolidred; border-left60pxsolidred; border-bottom60pxsolidred; border-top-left-radius60px; border-top-right-radius60px; border-bottom-left-radius60px; border-bottom-right-radius60px; } |
Пользовательские типы фигур
Вы можете расширить набор классов, имеющих свои типы форм. Для этого понадобится создать производный класс от класса sf::Shape и переопределить два метода:
- getPointCount: возвращает число вершин фигуры
- getPoint: возвращает вершину фигуры
Кроме того, каждый раз как у вашей фигуры изменяются вершины, вы должны вызывать защищённый (protected) метод update(), что бы базовый класс знал об этом и мог обновить своё состояние.
Вот полный пример создания подобного класса class: EllipseShape:
class EllipseShape : public sf::Shape
{
public :
explicit EllipseShape(const sf::Vector2f& radius = sf::Vector2f(0, 0)) :
m_radius(radius)
{
update();
}
void setRadius(const sf::Vector2f& radius)
{
m_radius = radius;
update();
}
const sf::Vector2f& getRadius() const
{
return m_radius;
}
virtual unsigned int getPointCount() const
{
return 30; // здесь фиксировано, но может быть атрибутом класса, если это необходимо
}
virtual sf::Vector2f getPoint(unsigned int index) const
{
static const float pi = 3.141592654f;
float angle = index * 2 * pi / getPointCount() - pi / 2;
float x = std::cos(angle) * m_radius.x;
float y = std::sin(angle) * m_radius.y;
return sf::Vector2f(m_radius.x + x, m_radius.y + y);
}
private :
sf::Vector2f m_radius;
};
Diamond Shield
CSS
#diamond-shield {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid red;
position: relative;
top: -50px;
}
#diamond-shield:after {
content: »;
position: absolute;
left: -50px; top: 20px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
|
1 |
#diamond-shield { width; height; border50pxsolidtransparent; border-bottom20pxsolidred; positionrelative; top-50px; } #diamond-shield:after { content»; positionabsolute; left-50px;top20px; width; height; border50pxsolidtransparent; border-top70pxsolidred; } |
CSS margin — внешний отступ
Данное свойство определяет внешний отступ между соседствующими элементами, например мы можем задать определенный интервал между двумя параграфами HTML:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>
<h1>Жирный заголовок, как поезд пассажирный</h1>
<p>Привет брат, ты от меня далеко</p>
<p>Я не могу за тебя ухватиться</p>
</body>
</html>
|
1 |
<!DOCTYPEhtml> <html> <head> <style> p { border1pxsolidpowderblue; margin50px; } </head> <body> <h1>Жирныйзаголовок,какпоездпассажирный</h1> <p>Приветбрат,тыотменядалеко</p> <p>Янемогузатебяухватиться</p> </body> </html> |
Смотрим и наблюдаем:
CSS-фигуры — другой способ создания
Сегодня мы можем использовать такое
свойство CSS как shape-outside. Это свойство
позволяет нам определять фигуру, которую
должен обтекать текст (или в которую он
должен вписываться). Для этого свойства
у нас есть несколько базовых фигур:
- inset()
- circle()
- ellipse()
- polygon()
Совет! Вы также можете использовать
свойство clip-path. С его помощью тоже
можно создать нужную фигуру, но это
свойство не позволит вам сделать
обтекание текстом вокруг фигуры, как
при использовании shape-outside.
Элемент, которому мы собираемся придать
форму геометрической фигуры, должен
быть плавающим (floated) и иметь определенную
ширину и высоту
Это очень важно!
inset()
Базовая фигура inset() используется для
создания прямоугольника или квадрата
со смещением для обтекания текстом. Вы
можете указать, насколько именно текст
должен перекрывать фигуру.
Смещение можно установить одинаковое
по всем направлениям: inset(20px). Также его
можно указывать отдельно для каждого
направления: inset(20px 5px 30px 10px).
Можно использовать и другие единицы
для смещения, например, проценты. Значения
указываются в таком порядке: inset(top right
bottom left).
Посмотрите пример кода:
Также можно указать для inset() второе
значение, определяющее border-radius смещения.
Как здесь:
circle()
В этом случае при помощи свойства
shape-outside создается круг. Здесь также
нужно применить clip-path с соответствующим
значением.
Свойство clip-path может принимать те же
значения, что и свойство shape-outside, так
что мы можем задать стандартную фигуру
circle(), которую мы использовали для
shape-outside
Обратите внимание, что я применил
для элемента margin 20px, чтобы дать тексту
немного пространства
В этом примере я не указывал радиус
круга. Я хотел, чтобы его размер совпадал
с div (300px). Если хотите задать кругу его
собственный размер, это тоже можно
сделать.
Свойство circle() принимает два значения.
Первое это радиус, а второе — позиция.
Эти значения определяют центр круга.
В примере, приведенном ниже, я установил
радиус в 50%. Затем я сместил центр круга
на 30%
Обратите внимание, что между
значениями радиуса и позиции должно
использоваться слово «at»
Я также указал другое значение позиции
для clip-path. Поскольку я задал позицию 0%,
это обрежет круг наполовину.
ellipse()
Свойство ellipse() работает так же, как и
circle(), за исключением того, что в итоге
создает не круг, а овал. Вы можете задавать
значение X и значение Y: ellipse(25px 50px).
Как и в случае с кругом, последнее
значение это позиция.
polygon()
Многоугольник это фигура с разными
координатами. Ниже я создал фигуру в
форме буквы «Т». Я начал с координат 0,0
и двигался слева направо.
Изображения
Для создания фигур можно также использовать изображения с прозрачным фоном. Например, как эта прекрасная круглая луна. Это изображение в формате .png, с прозрачным фоном.
Создание других правил CSS для стилизации HTML-контента
В этом разделе мы научимся добавлять дополнительные CSS-правила.
Давайте сначала добавим еще немного текста в файл index.html с помощью элемента <p>. Потом мы поэкспериментируем с изменением его свойств, используя новый набор CSS-правил, который будет применяться только к тегам <p>.
В файл index.html добавьте строку <p>Some paragraph text</p> под строкой <h1>A sample title<h1> (если вы не выполняли мануал Основы создания правил CSS, скопируйте и вставьте в файл обе строки).
Сохраните файл index.html и перезагрузите его в окне браузера, чтобы проверить, как отображается этот файл. Ваш браузер должен показать синий заголовок A sample title и под ним абзац без стиля Some paragraph text:
A Sample Title
Some paragraph text
Затем мы добавим CSS-правило для стилизации элемента <p>. Вернитесь в файл styles.css и добавьте следующий набор правил в конец файла:
Сохраните файл и перезагрузите его в окне браузера, чтобы проверить, как он отображается. Теперь текст элемента <p> должен иметь стиль, объявленный в новом правиле CSS:
A Sample Title
Some paragraph text
Теперь у вас есть CSS-правила для элементов <h1> и <p>, и любой текст в HTML-документе, который вы помечаете этими тегами, будет принимать правила стиля, которые вы объявили для этих элементов в файле styles.css.
Дополнительные примеры
Если вы хотите еще немного поработать с правилами CSS, попробуйте создать наборы правил для других текстовых элементов HTML, – <h2>, <h3> и <h4>, – и использовать их для изменения текста в файле index.html. Например, вы можете скопировать следующий набор правил и добавить их в свой файл styles.css:
Сохраните файл, а затем добавьте следующий HTML-контент в файл index.html:
Сохраните файл и загрузите его в браузере. Вы получите такой результат:
8 Point Burst
CSS
#burst-8 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
}
#burst-8:before {
content: «»;
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
}
|
1 |
#burst-8 { backgroundred; width80px; height80px; positionrelative; text-aligncenter; -webkit-transformrotate(20deg); -moz-transformrotate(20deg); -ms-transformrotate(20deg); -o-transformrotate(20eg); } #burst-8:before { content»»; positionabsolute; top; left; height80px; width80px; backgroundred; -webkit-transformrotate(135deg); -moz-transformrotate(135deg); -ms-transformrotate(135deg); -o-transformrotate(135deg); } |
ФОРМЫ
Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения
Рисование эллипса и прямоугольника в Python
- Эллипс (Круг): ;
- Прямоугольник (Квадрат): .
Метод рисует эллипс, область рисования указывается в параметр . Если мы зададим четыре координата которые будут соответствовать квадрату, то у нас получится ровный круг.
Нарисуем небольшой смайл используя круги.
Python
from PIL import Image, ImageDraw
image = Image.new(‘RGB’, (90, 90), ‘white’)
draw = ImageDraw.Draw(image)
draw.ellipse((0, 0, 90, 90), ‘yellow’, ‘blue’)
draw.ellipse((25, 20, 35, 30), ‘yellow’, ‘blue’)
draw.ellipse((50, 20, 60, 30), ‘yellow’, ‘blue’)
draw.arc((20, 40, 70, 70), 0, 180, 0)
image.save(‘draw-smile.jpg’)
|
1 2 3 4 5 6 7 8 9 10 |
fromPIL importImage,ImageDraw image=Image.new(‘RGB’,(90,90),’white’) draw=ImageDraw.Draw(image) draw.ellipse((,,90,90),’yellow’,’blue’) draw.ellipse((25,20,35,30),’yellow’,’blue’) draw.ellipse((50,20,60,30),’yellow’,’blue’) draw.arc((20,40,70,70),,180,) image.save(‘draw-smile.jpg’) |
Результат:
Создание фигур в VBA Excel
Фигуры в VBA Excel создаются методом Shapes.AddShape.
Синтаксис метода AddShape
| 1 | Shapes.AddShape(Type,Left,Top,Width,Height) |
Shapes — выражение, возвращающее коллекцию фигур на рабочем листе, например: ActiveSheet.Shapes.
Параметры метода AddShape
| Параметр | Описание |
|---|---|
| Type | Константа из коллекции MsoAutoShapeType, определяющая тип создаваемой фигуры. |
| Left | Расстояние от левой границы фигуры до левой границы табличной части рабочего листа в пунктах.. Тип данных — Single. |
| Top | Расстояние от верхней границы фигуры до верхней границы табличной части рабочего листа в пунктах.. Тип данных — Single. |
| Width | Ширина фигуры по внешним границам в пунктах. |
| Height | Высота фигуры по внешним границам в пунктах. |
Все параметры метода Shapes.AddShape являются обязательными.
Константы MsoAutoShapeType
Константы коллекции MsoAutoShapeType, определяющие основные типы создаваемых фигур:
| Константа | Значение | Тип фигуры |
|---|---|---|
| msoShapeRectangle | 1 | Прямоугольник |
| msoShapeParallelogram | 2 | Параллелограмм |
| msoShapeTrapezoid | 3 | Трапеция |
| msoShapeDiamond | 4 | Ромб |
| msoShapeRoundedRectangle | 5 | Прямоугольник: скругленные углы |
| msoShapeOctagon | 6 | Восьмиугольник (октаэдр) |
| msoShapeIsoscelesTriangle | 7 | Равнобедренный треугольник |
| msoShapeRightTriangle | 8 | Прямоугольный треугольник |
| msoShapeOval | 9 | Овал |
| msoShapeHexagon | 10 | Шестиугольник (гексаэдр) |
| msoShapeCross | 11 | Крест |
| msoShapeRegularPentagon | 12 | Пятиугольник (пентаэдр) |
| msoShapeCan | 13 | Цилиндр |
| msoShapeCube | 14 | Куб |
| msoShapeDonut | 18 | Круг: прозрачная заливка (кольцо) |
| msoShapeLightningBolt | 22 | Молния |
| msoShapeSun | 23 | Солнце |
| msoShapeMoon | 24 | Месяц (луна) |
| msoShape5pointStar | 92 | Звезда: 5 точек (пятиконечная) |
| msoShapeCloud | 179 | Облако |
Все доступные константы из коллекции MsoAutoShapeType смотрите на сайте разработчиков.
Время и практикаСкопировать ссылку
CSS-иллюстрация требует много времени и практики. Чем точнее вы хотите быть и чем сложнее иллюстрация, тем больше времени это займёт. Самая затратная часть — не решение, какие свойства использовать и как, а отшлифовка результата до состояния, чтобы всё выглядело правильно. Будьте готовы изучить инспектор стилей в вашем браузере! Я также рекомендую попробовать VisBug, если вы этого ещё не сделали.
Два фантастических CSS-художника — Бен Эванс и Диана Смит. Оба недавно рассказывали о затратах времени на CSS-иллюстрации.
Создание PureCSS Gaze заняло у Дианы два долгих уикенда. Она рассказывает о некоторых своих техниках здесь. «Если у вас есть время, терпение и запал, то это, безусловно, возможно», — говорит она.
Я запостил мем про чашку, и в ответе Бена всё было прекрасно:
Это требует времени!
CSS-иллюстрация.
Заключение
Еще ни одна возможность CSS не вызывала во мне столько восторга, как CSS-формы и
исключения. Мощность, гибкость и разнообразие, которые предоставляют новые возможности
в сочетании с регионами и флекбоксами, просто потрясают.
В скором времени должна появиться широкая поддержка CSS-форм; команда веб-разработчиков
из Adobe постоянно работает над улучшением и внедрением новых возможностей, а также
предоставляет инструменты для упрощения работы с ними.
Будущее веб-разработки выглядит все ярче и привлекательней с каждым днем. Хорошо быть
веб-разработчиком!
Я надеюсь, что эта статья поможет вам войти в технический курс дела относительно CSS-
форм и исключений. Это не последняя моя статья на эту тему. Комбинирование CSS-форм с
другими передовыми технологиями мира CSS, такими как регионы, открывает двери в новый
мир творческих идей и создания новых статей! 
