Блог Web-разработчик → Полезные материалы по web-разработке | OTUS

Курсы

Программирование
Highload Architect Node.js Developer React.js Developer Java Developer. Professional Android Developer. Basic Microservice Architecture HTML/CSS Специализация C++ Developer C++ Developer. Professional Android Developer. Professional PostgreSQL для администраторов баз данных и разработчиков Framework Laravel Алгоритмы и структуры данных Специализация PHP Developer C# Developer. Professional C# Developer. Basic Буткемп Frontend Developer Golang Developer. Professional iOS Developer. Basic Специализация Python Developer Архитектура и шаблоны проектирования MS SQL Server Developer Software Architect Rust Developer Базы данных Разработчик на Spring Framework Vue.js разработчик Разработчик IoT Подготовка к сертификации Oracle Java Programmer (OCAJP) Unity Game Developer. Professional PostgreSQL Cloud Solutions VR/AR - разработчик
Специализации Курсы в разработке Подготовительные курсы Подписка
+7 499 938-92-02
Анимируем 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-специалист должен иметь черный пояс по гуглению, однако все же рекомендуем сэкономить время в будущем и ознакомиться с самыми популярными подходами к выравниванию.