Буквально только что столкнулся с вопросом выравнивания iframe по центру. Aligt не сработал 🙁 Зато заключенный в <center> и </center> iframe теперь показывается четко в центре…. гм … кто-то может сказать — почему?
CSS — основы
Привет, друзья! Недавняя запись по поводу создания идеально круглой картинки посредством CSS надоумила меня на создание ряда записей, посвященных потрясающе удобной технологии CSS (Cascading Style Sheets — что в переводе звучит приблизительно как «Каскадная таблица стилей»).
Сегодня мы определим, где и с помощью каких методов будет проходит демонстрация работы CSS, ну и узнаем пару интересных вещей об этой технологии, да.
Итак, для демонстрации работоспособности Читать далее CSS — основы
Круглая картинка с помощью CSS
Нужна совершенно круглая картинка? Чего проще? Берем Photoshop, и режем картинку под нужный размер. Просто, работает во всех браузерах (даже в IE 🙂 ) но … так по-стариковски. Тем более, если речь идет о картинках в количестве, измеряемых десятками или сотнями (бывает и такое)… Лучше использовать CSS — примитивный код, и масса сэкономленного времени.
-
img {
-
width: 200px;
-
height: 200px;
-
border-radius: 50%;
-
}
Представленный код, обернутый <style type="text/css"> позволяет сделать любую картинку совершенно круглой.
Как привязать картинку или текст к определенной точке в видео?
Приветствую!
После длительной паузы попробую вернуться к блогу. И сегодня мы узнаем, как привязать картинку или текст к определенной точке на видео.
Итак, нам понадобится:
1. Adobe After Effects CS6 (работаю в нем)
2. Нулевой объект (Null object)
3. Tracker — встроенная функция Adobe After Effects CS6 (вдруг пригодится, в русском АЕ это «Инспектор» — за подсказку спасибо Виктору, который дополнил мою запись)
Итак, список подготовлен. Пора посмотреть на все это чуть подробнее.
В качестве скринов для текста я буду использовать композицию, которая не займет много времени и будет состоять из перемещающейся по экрану большой точки. Состоит композиция из слоя (белого) и круга, движение которого задано двумя ключевыми точками:
Попробуем привязать к этой точке слово «Привет», которое должно будет следовать за нашей точкой. Для этого добавляем в композицию нулевой объект: Layer — New — Null object:
Зачем? На самом деле Нулевой слой — это слой, который никак не проявляет себя в композиции, но — при применении к нему определенных свойств, этот слой сможет управлять другими слоями. Несколько запутано, но чуть позже, думаю, вы все сообразите.
Итак, прыгающий круг есть, нулевой слой есть. Пора запускать Tracker: Window — Tracker:
Открытое окно трекера, кстати, выглядит вот так:
И … оп-па… Трекер вообще не понимает, что отслеживать, и как — ведь он работает с готовой композицией, а не слоями! Выход очевиден: создать вторую композицию, которая будет использовать первую в качестве ролика.
Теперь, наконец, можем еще раз запустить Tracker, и увидеть следующее:
Приблизительно все это можно описать следующими словами:
Track camera — отслеживать движение камеры
Track motion — отслеживать движение
Warp stabilizer — сглаживать колебания
Stabilize motion — стабилизировать движение
И возможности чекбоксов:
Position — отслеживать движение
Rotation — отслеживать вращение
Scale — отслеживать масштабирование
Остальное рассмотрим чуть позднее 🙂
Напомню, нам нужно отследить движение. Кликаем по: track motion, и ставим галочки в чекбоксах Position + Rotation. Сразу после этого в поле композиции появились два окошка (на скрине выделены красным):
Каждое из окошек нацелено на выделение зоны, которую нужно отследить. В связи с тем, что мы будем использовать наше отслеживание к нулевому объекту, можно отслеживать не конкретно нужную нам точку, а что-то близкое. В моем случае это будут границы круга (смотрим скрин чуть выше)
После того, как вы выбрали нужны точки для отслеживания — кликаем на кнопку: Analize Forfard и ждем 🙂
Спустя какое-то время (все зависит от сложности оттрекириваемой композиции) у вас получится нечто вроде такого:
где каждый из квадратиков — ключевая точка. Применяем анализ нажатием кнопки Apply в окне Трекера.
Дальше все совсем просто — используя нулевой слой (напомню, этот слой уже знает, как ему нужно двигаться) привязываем к нему текст. Добавляем текстовый слой:
Layer — New — Text
и пишем любое слово. В моем случае — это слово «Привет!»:
Располагаем его в нужном нам месте, а после — применяем к нему взаимосвязь слоев:
таким образом текст четко привязывается к нулевому объекту. Собственно … на этом все 🙂
Более подробно все это можно посмотреть в видеоуроке — всего две минуты:
Готовый пример вы можете посмотреть ниже (за смайликом прячется кружка с пивом):
И вот (за смайликом спрятали голову гонщика — как раз этот пример рассмотрен в видеоуроке выше):
Кстати, в качестве исходного видео взято видео с канала моего сына 🙂 Подписывайтесь, ставьте лайки — ему будет приятно!
И конечно, в случае возникновения вопросов — пишите на почту: oleksiy@lavrynenko.com или в Telegram.
Как изменить MAC-адрес сетевой карты?
Привет, друзья!
Сегодня мы узнаем — как правильно, быстро, а главное — безопасно можно изменить MAC-адрес сетевой карты вашего компьютера в операционной системе Windows 10 (логика процесса не слишком отличается от восьмерки или семерки).
Напомню, что MAC-адрес сетевой карты — это уникальный адрес вашего устройства. В теории он не повторим, но иногда …. 🙂 🙂 🙂
Некоторые могут спросить: а зачем? Но этот вопрос мы оставим без ответа 😉 Ибо, если вы читаете этот материал — значит вам эти знания нужны. Впрочем — вариантов применения этому навыку может быть много. Это и ограничения доступа к сети на уровне сервера, и лимитированное количество подключений от провайдера. А совсем недавно в одном отеле… Читать далее Как изменить MAC-адрес сетевой карты?