Блог Web-разработчик → Полезные материалы по web-разработке | OTUS
Скидка до 15% на курсы ноября, декабря и января
❄️ До 13.12 Забрать скидку! →
Выбрать курс
Правильный экспорт SVG

Подготовка документа для анимации -- важный этап, к которому нельзя относиться пренебрежительно, так как это может обернуться весьма неприятными последствиями. Давайте рассмотрим, какие существуют особенности экспорта SVG в Adobe Illustrator.

Анимируем SVG средствами CSS

SVG-элемент можно анимировать таким же образом, как это происходит с HTML. Для создания анимаций используется @keyframes. В принципе, в сети множество руководств на тему CSS-анимации при этом всё, что там описывается, по сути, применимо и к SVG-формату. Но давайте всё же приведем несколько примеров.

В каких случаях используют SMIL вместо CSS?

Применение SVG для стилизации web-сайтов открывает широкие возможности для веб-разработки. Речь идет о масштабируемой векторной графике (Scalable Vector Graphics — SVG), основанной на XML-формате. SVG позволяет создавать изображение с помощью определенных тегов и атрибутов: написанный вами код сгенерирует изображение, которое можно будет менять непосредственно в текстовом редакторе.

Flexbox и Flex-контейнер

Flexbox представляет собой общее название модуля Flexible Box Layout, существующего в CSS. Это модуль, который определяет режим компоновки либо верстки пользовательского интерфейса, именуемого flex layout. В этом отношении Flexbox -- это, по сути, другой подход к созданию пользовательского интерфейса, который заметно отличается от классической блочной либо табличной верстки.

Grid Layout и Grid Container

Grid Layout -- специальный модуль CSS3, позволяющий позиционировать элементы в виде таблицы либо сетки. По сути, Grid Layout -- это гибкий подход к компоновке элементов, однако если тот же flexbox размещает вложенные элементы по горизонтали в виде столбиков либо по вертикали в виде строк (то есть в одном направлении), то Grid позиционирует элементы одновременно в 2-х направлениях -- в качестве столбцов и строк, образуя таким образом таблицу.

Выбор формата изображений

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

Элемент aside в HTML

В стандартизированном языке разметки HTML существует элемент под названием aside. Он представляет контент, косвенно связанный с остальным содержимым web-станицы, причем этот контент может рассматриваться независимо.

Textarea в HTML

В HTML существует элемент <input type="text" />, позволяющий создавать простое текстовое поле из одной строки. Но на практике возможностей одного этого элемента бывает недостаточно. Проблема решается путем использования многострочного текстового поля, который представлен элементом textarea:

Выравниваем HTML-элемент вертикально и горизонтально

Если вы работаете с HTML и CSS, то вы можете столкнуться с проблемой горизонтального и вертикального выравнивания элемента. Вариантов решить проблему — множество. Мы, конечно, понимаем, что настоящий IT-специалист должен иметь черный пояс по гуглению, однако все же рекомендуем сэкономить время в будущем и ознакомиться с самыми популярными подходами к выравниванию.

Популярное
Сегодня тут пусто
Новогодние скидки в Otus!-15% ❄️
Успейте забрать свою скидку до 13.12 →