Видео скринкасты 2024, Декабрь

Когда вы используете встроенный SVG, весь этот SVG-код находится прямо в HTML и, следовательно, в DOM. Вы можете стилизовать их так же, как, или любой другой HTML "

Хотя анимация SVG с помощью CSS может быть более удобной для среднего пользователя, у SVG есть другой способ создания анимации, встроенный прямо в SVG »

Этот совет применим, только если у вас установлен Adobe Illustrator CC (Creative Cloud). Я подтвердил, что он работает в этом или даже в новом CC 2014. Это максимально просто "

На этом видео было удалено. Я когда-нибудь пересниму его. Если вы читаете это, а я еще этого не сделал, не стесняйтесь связаться со мной и сообщить об ошибке "

Это немного эзотерическая вещь, мне просто нужно было сделать это один раз, и это сбивало с толку, поэтому я подумал, что сделаю об этом целое видео. Дело в том,"

В SVG есть элемент. Здесь нет ничего удивительного: он предназначен для помещения текста в SVG. Не очертания букв (хотя вы тоже можете это сделать), а "

Популярной небольшой техникой анимации SVG является рисование контуров. Если вы не можете вообразить это, вот коллекция из миллиона примеров, которые я создал. По сути "

Может наступить день, когда вы захотите, чтобы изображение было в формате SVG, но оно есть только в растровом формате, например в формате GIF, JPG.webp или PNG. В этом видео мы рассмотрим пример "

Вероятно, для этого не существует особо масштабного варианта использования, кроме очевидного: помимо прочего, в более крупном SVG-дизайне вам понадобится растровая графика ».

Возможно, вы слышали о фильтрах CSS? Вы можете применить их к любому элементу из CSS, например: .apply-css-filter (-webkit-filter: grayscale (0.5); filter: "

Концепция обрезки и маскирования довольно проста. Скрыть одни части элементов и показать другие. Фактическая разница между ними довольно проста "

JavaScript - это последний из способов, которые мы рассмотрим при анимации SVG. Мы посмотрели на CSS, который хорош и довольно удобен, но он не может работать с некоторыми SVG "

Вы можете многое сделать с SVG без какого-либо программного обеспечения. Если у вас есть хороший источник изображений SVG в Интернете, вы можете использовать их напрямую. Но"

Мы потратили много времени на использование inline и element. Вы можете создать систему значков, изобилующую преимуществами. Вы можете создать "

В этом скринкасте мы подробно рассмотрим статью Леони Уотсон о доступном SVG и, по сути, рассмотрим ее по пунктам. Мне нравится этот первый пункт "

Когда вы используете inline, все элементы находятся в DOM, как и s, s и любой другой элемент HTML. Если у вас есть SVG вроде: а у вас есть: var rect = "

Спасибо за просмотр, это все значит для меня и этого сайта. Это сообщение в блоге представляет собой огромный список ресурсов по всему, что мы рассмотрели в этой серии »

Мы уже говорили об оптимизации SVG вручную. Выбор вручную деталей и элементов, которые можно объединить или удалить. В этом"

Этот редизайн - это не редизайн только ради редизайна. Я хочу улучшить сайт всеми возможными способами, которыми вы можете улучшить сайт. Один из"

Добро пожаловать! Это будет настоящее путешествие, и, как и все путешествия, оно начинается с одного шага. Наш первый шаг - провести инвентаризацию бит "

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

Это аудиозапись разговора по Skype между мной и Эрин Киссане. Эрин написала книгу о контент-стратегии, так что мне посчастливилось получить ее помощь и "

Весь сайт будет построен на "модулях". Каждая мелочь будет буквально помещена в коробку (как визуально, так и в конечном итоге в коде). Мы"

Мы добавляем несколько дополнительных слоев под основным заголовком / блоком брендинга, чтобы придать вид «стопки бумаг». Никакой большой метафоры или чего-то такого, это просто добавляет визуального "

Начинаем проектировать верхнюю (основную) навигацию сайта. Мы начинаем с экрана размером с рабочий стол (с произвольной шириной), но мы "

Мы, конечно, не «закончили» в Photoshop этот дизайн навсегда, но у нас есть достаточно, над чем можно поработать, чтобы приступить к созданию этого дизайна в браузере. После"

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

Смотря на наш макет Photoshop, мы пишем начало написания HTML, чтобы описать то, на что мы смотрим. Мы, конечно, используем HTML5 всякий раз, когда он делает "

Удаление CSS агента пользователя (по умолчанию) из большинства элементов обычно является хорошей идеей. Это давно сделали "универсальные" перезагрузки или вещи вроде Эрика "

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