00:00 Интро 00:36 Как оно было 01:18 Векторные исходники 02:52 Скруглённые углы 04:05 Позиционирование хвоста 04:44 Разметка балуна 05:24 Хвостик и тень 07:03 Вырезание хвостика 08:29 Непростая тень 10:27 Устройство тени 11:37 Тень из трёх частей 14:28 Маска с тенью 16:44 Улучшение балуна 17:57 Выводы 19:04 Аутро

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

Я как веб-дизайнер отлично изучила html и немного разбираюсь в css. При создании макета, особенно каких-либо на мой взгляд сложных элементов, я стараюсь поискать в интернете информацию смогут ли и как программисты решить эту задумку для того, чтобы не усложнить им жизнь и в результате не запороть проект. Я сейчас удивлена тем, что, как мне казалось, простой элемент, так сложно спрограммировать. Что-то всегда думала, что если есть svg-файл, то вопрос реализации наполовину решен. Даже вообще не возникало мысли, что с svg могут возникнуть трудности. Спасибо за видео, теперь я буду более подробно изучать вопрос реализации макета в вебе во время дизайнирования.

@user-cq8xy3rt5e

2 жыл бұрын

Дай Бог тебе здоровья!

Нет времени объяснять, срочно нужны видео по свг! ((:

Нужно больше программирования на SVG)

Очень интересно и приятно вас слушать, один из самых лучших каналов по фронтенду. Спасибо вам Вадим!

Да, SVG это реально большая и сложная тема. А если дизайнер-халтурщик, то и верстка его халтур оканчивается кучей костылей, никто заморачиваться "SVG-программированием" не будет, потому как дедлайн. Так и живем.

Понравились "пуленепробиваемость" при масштабировании (и учёт минимального размера), продумывание последовательности отображения при загрузке и подход - разделить оформление элемента на контентное в CSS и декоративные составляющие в svg. Вадим, спасибо за тайм-коды, когда повторно возвращаешься к ролику удается быстро находить нужное.

@pepelsbey

3 жыл бұрын

Вам спасибо, что оценили :) Сам люблю таймкоды и стараюсь всегда делать их полезными.

Лайк автоматом. Только недавно послушал последний подкаст веб-стандартов, где Никита и Александра рассказывали про предыдущую часть, делились своим впечатлением, ностальгией, и уже предрекали следующую часть, как Вадим не заставил себя долго ждать. Очень классный разбор, мне кажется, тут могла бы выйти отличная практическая статья про разбор фронтэнда именно данного компонента аля балун, я бы с удовольствием прочитал бы ее. Про свг-программистов это немного не в ту степь, лично мое мнение, потому что именна та нарезка свг-графики, представленная вами- это работа дизайнера 100%, но не как ни фронтэндера, и я просто в шоке, как вы заморочились с фигмой и иллюстратором, чтобы достичь выполнения задачи. Ну и я скажу, что не каждый фронтэндер с минимальным скиллом владеет calc, даже с моим минимальным опытом верстальщика понимание calc - это дремучий лес на практике. В общем, очень классный видос, спасибо вам, Вадим ))

Крутой видос, кайфанул. Скучаю по подобным хакам, давно не приходилось подобное делать.

Огромное спасибо! С огромным интересом и надеждой применения на практике. Успехов!

не, ну тут подписка на патреон однозначно)

Как всегда непринужденно и демократично поданный материал. Интересно смотреть даже если тема уже изучена. Спасибо тебе Вадим =)

Не ожидал продолжения так скоро. Спасибо огромное! С svg пока так глубоко не знаком, по этому каждый раз поражаюсь разным хитростям))

Большое спасибо за материал! Кажется, я увидел решение задачи, которую пытался решить несколько лет :)

Спасибо, прикольный выпуск, особенно тень любопытная - времена меняются, приёмы остаются))

Граааамотно.... Элегантно. Унес в чертоги памяти.

Клёво)) только начинаю изучать мир фронтенда, и подобные вещи пока не просты для понимания, но это в любом случае очень полезная информация, а подача как обычно на высоте)

Вадим спустя 12 лет - "посмотрим что же мы напрограммировали на SVG 12 лет назад..."

Хороший контент. Хорошая подача. Хороший Balloon.

спасибо очень познавательно.

Супер, спасибо!

Красава! Ставлю лайк и иду учить svg

потрясно!

Вот 🥞, полез смотреть предыдущий выпуск)

После этого видео я понял, что я ничего не знаю о svg.

Лайк за крутой контент!!

Супер-пупер!!!

Почему нет специалистов на svg? Я бы хотел быть таким специалистом, но к сожалению это никому не нужно и никто не готов осознавать сколько времени надо на это, чтобы сделать анимацию через svg. Спасибо за выпуск! Годный контент 👍

Огонь!

да заполнение середины на SVG очень неожиданно =) хаха класс.. и маска привнесла рождественской магии

Вот это настоящий Киберпанк

класс!

Спасибо за видео. Тоже была задача в версте балуна. Только background был прозрачный у самого балуна и хвостика, видны только бордеры. Как в такой ситуации состыковать хвостик с балуном "без швов"?

Привет! Я пришел с видео - Очумелые подкастеры) Сейчас у тебя микрофон Audio Technica, если не ошибаюсь? Хорошо звучит) Предусилитель используется?

@pepelsbey

3 жыл бұрын

Да, это AT BP40 в кадре. Он идёт прямо в камеру через XLR, но у камеры вполне сносные собственные предусилители.

Спасибо! Все это забавно и чисто интересно ради знания, но чаще всего ненужно. Объяснив манагеру что создание именно такого будет стоить как верстка целой страницы сайта, работу завернут согласившись на простой балун без теней и масок, тк на самом деле это не столь важно... главное что бы юзеру было удобно. Да и мода на плоский дизайн, но теперь понятно почему это все плоское стало таким модным )) П.С. В демке нету кнопок

@pepelsbey

3 жыл бұрын

Я потратил на этот балун не больше часа, включая тестирование. И вы сможете так же, если изучите SVG. Всё новое всегда занимает больше времени.

Привет, здорово получилось. Я так понимаю "программировать" на свг нужно исключительно в блокноте, никаких визуальных эдиторов для такого вида операций пока нет?

@pepelsbey

Жыл бұрын

К сожалению, даже в продвинутых редакторах и IDE поддержка SVG примитивная, на уровне XML.

на изначальных примерах были ещё однострочные балуны, думаю задать минимальную высоту было лишним, и по хорошему нужно дальше решать что-то с высотой "тени" и градиента

@pepelsbey

3 жыл бұрын

В изначальных примерах тени однострочных балунов решались отдельно. В версии «2020» я реализовал только один и самый сложный.

@KoTaPeSiC

3 жыл бұрын

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

SVG формат будущего!

@pepelsbey

3 жыл бұрын

Знаете, я в 2010 году делал доклад про SVG и мне публика говорила то же самое :D pepelsbey.net/pres/web-in-curves/

@user-ce5ux6ji8r

3 жыл бұрын

@@pepelsbey )))))

@user-zh5kg2op4h

3 жыл бұрын

В SVG на самом деле много ограничений. Например, там нет мешей, привычных для редакторов векторной графики. (Иллюстратор экспортирует это во внедрённой картинке и собственном редакторо-специфичном коде.) Планы по добавлению есть уже много лет, но процесс очень небыстрый. Ну, и как любой браузер медленно работает, когда на странице много DOM-нод, точно так же медленно рисуется SVG с большим количеством элементов. Так что формат хороший, но на текущий момент ограниченный. Слишком сложные вещи на нём делать затратно со всех сторон.

Хочу быть таким же профессионалом, как ты)

@pepelsbey

3 жыл бұрын

Если долго что-то делать, то даже заяц станет профи. Делайте!

@enterkvas

2 жыл бұрын

@@pepelsbey Наверное, я тот самый "заяц", которому ооооочень долго нужно что-то делать. Только проблема не в том что "долго делать что-то", а в том, чтобы "делать это "что-то" НЕ ОТВЛЕКАЯСЬ". Большое спасибо!

Мне доводилось делать пару интересных вещей подобным образом через svg и css, но там есть свои негласные подводные камни с каким-нибудь сафари (классика), особенно когда ты решаешь инлайнить svg в css

@alehmakaranka1089

3 жыл бұрын

codepen.io/cpof_tea/pen/bGwBGEg Подсмотрели как-то заказчики у какого-то известного магазина такую пилюлю. У магазина того вся пилюля была, по-моему, одним целым изображениям, то есть: если числа длинные, то они просто вылазили за пределы. Решил попробовать релизовать на svg: четко смотреться будет, независимо от масштабирования страницы; responsive. Вроде работает. Видел на какой-то другой оси в каком-то браузере баг с повторяющейся центральной частью - повторяется, но прерывисто с визуальным пробелом в пиксель.

@alehmakaranka1089

3 жыл бұрын

codepen.io/cpof_tea/pen/RwGowOK Другой интересный пример. Сделано на border-image Колосок. Сложный svg-элемент. Зачем хранить в svg два колоска, если можно использовать symbol и use. А потом мне пишут, что "у нас в сафари не работает". Оказалось, сафари не умеет в use в инлайновых svg и с transform проблема какая-то была (плюс там еще какая-то особенность c border-color и border-image в сафари; помимо этого мне еще плагин сжатия стилей ломал и без того сжатый инлайновый svg). Пришлось полностью дублировать колосок. Вышел раздутый стиль. Хьёхь

@pepelsbey

3 жыл бұрын

Это да, багов с SVG хватает, но можно найти хороший компромисс, когда в CSS пока не хватает кроссбраузерности или не то поведение.

@MrDenai

3 жыл бұрын

@@alehmakaranka1089 про сафари вечная беда и не очень понятно как проверять без живых устройств 8(

Хмм, интересно, а как ты сортируешь css свойства? И почему не по алфавиту нажатием одной кнопки?

@pepelsbey

3 жыл бұрын

Сортирую свойства в голове по давнему принципу, который придумал для себя. Сейчас лежит черновик конфига для Stylelint, который хочу дописать и сделать видео про него.

@Disorrder

3 жыл бұрын

Например, потому, что какие-то свойства важнее остальных и хочется их поместить выше. Width и height хочется чтобы были всегда вместе

А касательно тени были идеи попробовать drop-shadow css фильтр?

@pepelsbey

3 жыл бұрын

Тень в дизайне - это градиент. Вряд ли можно повторить её вот именно тенью, которую генерирует браузер, да ещё и обрезает нужным образом.

@antonlenev

3 жыл бұрын

@@pepelsbey согласен, хотя градиент можно было бы попробовать повторить блюром, но все равно было бы не в полной мере как нарисовано

Расскажите, что происходит с html5 includes/import ? есть вообще сегодня хоть один законный метод вставить html-контент внутри html-контента (в пределах одного домена) без js и ?

@pepelsbey

3 жыл бұрын

Ничего не происходит, их выпилили из веб-компонентов уже очень давно. Есть более свежая идея HTML-модулей, но это пока только идея github.com/WICG/webcomponents/blob/gh-pages/proposals/html-modules-proposal.md

Вадим, а что скажешь про vitejs?

@pepelsbey

3 жыл бұрын

Не доводилось работать с Vite, так что ничего не скажу

Как насчет разбора сайта css-tricks, там как раз вышел новый дизайн, возможно есть что покритиковать или похвалить

@pepelsbey

3 жыл бұрын

Я посмотрел мельком: там мало что интересного есть, чтобы разобрать. Всё плюс-минус аккуратно, только иногда мелкие ошибки и сомнительная (но работающая) стратегия с контентными картинками. Нормальный сайт :)

Удивило использование calc для расчета ширины тени. Точно помню, что год назад любые попытки вынести атрибуты width/height в css заканчивались полным провалом, а уж с использованием calc подавно. По моему такая возможность появилась в SVG 2, не зря Adobe Illustrator при экспорте svg никогда не выносит эти атрибуты в стили css. Сделал вариант тени без css calc, может кому пригодится jsfiddle.net/ng23zmjo/

@pepelsbey

3 жыл бұрын

Хорошая попытка, но это не прямоугольник со скруглёнными углами, а сложная фигура и если нужно в неё попасть - тут без вырезания, складывания и calc не обойтись.

@antoxa5315

3 жыл бұрын

@@pepelsbey А если так jsfiddle.net/r3czkobv/ Насколько это костыльно?

А почему не сделать было для хвостика просто border-top: 1px solid #fff; или же просто сдвинуть его как background-position: center -1px; ну или примерно так и тогда бы всё скрылось? (изначально сам хвостик можно сделать больше на 1px). Тогда не пришлось бы плясать с бубном над svg-шкой.

@alexantrrr

3 жыл бұрын

я бы так и сделал

@pepelsbey

3 жыл бұрын

Во фронтенде не бывает «а почему бы не», бывает только «а ещё можно так» :) Мне в моей версии нравится, что код сфокусирован: весь хвост в картинке, вся тень в картинке. В CSS только простое позиционирование.

@user-bo2jz1pc7p

3 жыл бұрын

@@pepelsbey просто работа быстрее будет сделана если позиционировать хвостик в фоне) но да, конечно кто во что горазд и кому что нравится.

Когда я пытался разобраться в svg, я наткнулся на полнейшее отсутствие информации, как с ним работать. Потратил кучу времени и испытал море негатива в процессе работы. С тех пор аллергия на этот формат, хотя и использую его, но только в качестве готовых изображений, которые должны ресайзится без потери качества. Сейчас наверно есть уже доступная информация по работе с этим форматом, но осадок уж больно сильный остался.

@pepelsbey

3 жыл бұрын

SVG не виноват, есть информация, надо только поискать :)

Из любопытства собрал вариант с border-image. codepen.io/chaptykov/pen/WNGpXBp?editors=0100

@pepelsbey

3 жыл бұрын

Круто! Тоже думал про border-image, но помнил, что там есть проблемы с рендерингом. И правда: если увеличить твою версию в Safari, то вектор не перерисовывается, как будто его срендерили один раз и забыли.

А почему нельзя было тень разбить на три элемента с background-image? Средний бы повторялся по горизонтали.

@pepelsbey

3 жыл бұрын

Во фронтенде не бывает «а почему нельзя?», бывает только «а ещё можно вот так!» Покажите свой вариант, хватит верстать в уме )

нда, таблицы, флоаты, правда ностальгии нет вообще. А ты не пробовал боковухи привязывать через свг маркеры ?

@pepelsbey

Жыл бұрын

Мне кажется, что маркеры здесь были бы усложнением

Есть одна проблема. Тут используется минимальная высота. Не работает для однострочных балунов

@pepelsbey

2 жыл бұрын

Ну да, такой уж дизайн балуна. В старой реализации для однострочных была отдельная графика.

А как можно перенести psd файл в Фигму?

@pepelsbey

2 жыл бұрын

Боюсь, что напрямую никак. Я давно не искал - может с тех пор появились какие-то конвертеры, но форматы слишком разные.

@MrPresidentSv

2 жыл бұрын

@@pepelsbey спасибо

Если посмотреть сюда (message): bennettfeely.com/clippy/ то есть интересный пример с clip-path: штука в том, что полигон можно задавать в % тем самым он изначально будет "резиновым" clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

@PavelKlimovTube

3 жыл бұрын

Только так не получится скруглённую фигуру рисовать к сожалению.

@zerdox4

3 жыл бұрын

я думал, он это и будет использовать..

@user-fk6tm6jg3d

3 жыл бұрын

Чтобы сделать закругления и тем более хвостик нарисовать, придётся использовать функцию path(), а у неё поддержка пока не очень.

@Disorrder

3 жыл бұрын

Я попробовал, это хороший способ, но вместе с % использовать пиксели, иначе пропорции у скруглений потеряются. И придётся много точек задать, с кривыми сложно, как Сергей заметил.

Нужно создать новую профессию HTML-SVG-Engineer

oioioioioioioioioioioioioioioi

а чё так можно было...

@pepelsbey

3 жыл бұрын

Ну!

Вадим, расскажи про рынок вакансий для классических верстальщиков. Сам я html-css программист 🤣 с боле чем десятилетним опытом работы и внезапно не могу найти работу в Питере 😢 . Неужели верстка умерла, верстальщик это конченый человек, который обречён на зп 30-40 рублей?

@pepelsbey

3 жыл бұрын

Вёрстка не умерла, просто поменялось окружение: раньше это были PHP-шаблонизаторы на бэке, а сегодня JSX-компоненты на фронте. Подучите JS, попробуйте React и Vue - и всё получится. Ну или можно дрейфовать в сторону дизайна, если интересно.

@user-qq6hl8cd7v

3 жыл бұрын

Очень "вдохновляет" ваш комментарий, когда только учишься тому, что вы уже делаете 10 лет..

Осталось ощущение велосипеда. А тени тенями сделать никаких вариантов не было? Всамделишными CSS тенями. Или задублировать существующий объект и покрыть градиентом, чтоб не городить вот эту чехарду с SVG

@pepelsbey

3 жыл бұрын

Верстать словами в голове и я умею, а вы стилями - и покажите, как получится. С той же графикой, с теми же требованиями - не думаю, что такое можно провернуть тенями.

@pepelsbey

3 жыл бұрын

И кое-что ещё: это не чехарда, это вам просто не приходилось писать SVG руками, судя по всему. Для того и показал - так можно и часто нужно делать, когда нет другого выбора.

@MrDenai

3 жыл бұрын

@@pepelsbey SVG руками как раз приходилось и вызывало восторг, хоть и было сложно. Мне почему хочется это к теням отнести - торчит из картинки совсем чуть-чуть и только снаружи. У бокса понятное дело тень просто делается, когда она не просит градиент. А вот хвостик уже просит градиент, но не требует масштабирования. Хочется масштабируемую часть собрать из одних теней, а стабильную из других, разделять именно по этому параметру, а не по тому какой она слой.

@MrDenai

3 жыл бұрын

@@pepelsbey и ограничение по ширине/высоте минимальное огорчает. Оно не выглядит как часть изначального ТЗ, хотя про это явно не сильно думали. В голове крутится мысль что можно изящнее. Будет время - обязательно попробую пару вариантов

Стоп, но в старой версии есть балун из трёх символов. и он выглядит нормально. Получается, что современный веб - это поймать баг, и сделать так, что бы элемент никогда не получал таких размеров, при которых этот баг вылазит и назвать фиксированную высоту элемента фичей =)

@pepelsbey

3 жыл бұрын

Нет, в старой версии был некорректный пример из-за которого тень обрезалась - присмотритесь. В новой версии я исправил реализацию под старый дизайн.

@antonkrasov

3 жыл бұрын

@@pepelsbey Да, пример я это понял, но в прошлом видео на 9:50 например, вполне себе нормальные маленькие балуны ) А в новой текущей версии так и не сделать получается.

@pepelsbey

3 жыл бұрын

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

@antonkrasov

3 жыл бұрын

@@pepelsbey Хорошо, спасибо за уделённое время )

Сложна

@pepelsbey

3 жыл бұрын

Жизнь она вообще такая