Vladimir
Чтобы сработало css - надо картинку вставить в DOM
Eugene
да, поэтому и спрашиваю
Vladimir
И уже потом отдельно добавлять правила css
Vladimir
Никакой «компиляции» в svg не будет
Vladimir
Векторный редактор просто добавит растровый слой и включит его в svg
Vladimir
Мы это уже проходили с тобой
Eugene
Eugene
понятно
Eugene
Чтобы сработало css - надо картинку вставить в DOM
получается, что это растр с тенью через css. интересно, будет ли выигрыш в размере файла...
Vladimir
получается, что это растр с тенью через css. интересно, будет ли выигрыш в размере файла...
Ну обычно не бывает выигрыша
Vladimir
Потому что растр там кодируется в base64
Сергей
получается, что это растр с тенью через css. интересно, будет ли выигрыш в размере файла...
А если создать объект в векторе в том же CD и оттуда экспортировать в svg?
Сергей
Вот пример
Eugene
Сергей
Eugene
про фоновую картинку на всю ширину я понимаю - там 2560 пикселей нормально будет из-за ретины
Vladimir
Если 300 пикселей - нужно 600
Vladimir
Eugene
а если картинка новости? я делаю 1920. или еще больше?
Eugene
Eugene
а если картинка новости? я делаю 1920. или еще больше?
имею ввиду, когда картинка фоном на всю ширину браузера. у меня retina, кстати
Сергей
он просто большой, сохранил на скорую руку. Если уменьшить масштаб видно прямоугольник с тенью.
Eugene
Сергей
хм
Eugene
а тень можно сделать так, как я приводил на картинке выше?
Eugene
Eugene
хм. нестандартная задача 🙂
Vladimir
Vladimir
Я знаю этот тип теней - их невозможно так просто повторить
Eugene
Я знаю этот тип теней - их невозможно так просто повторить
тогда такие элементы лучше выводить ниже области прорисовки при первом открытии и пусть по lazy подгружаются?
Vladimir
тогда такие элементы лучше выводить ниже области прорисовки при первом открытии и пусть по lazy подгружаются?
Так они и так должны подгружаться по lazy
Eugene
Так они и так должны подгружаться по lazy
lighthouse рекомендовал отрубить lazy этим элементам в верхней части экрана
Eugene
или cmetrix. какой-то сервис
Vladimir
lighthouse рекомендовал отрубить lazy этим элементам в верхней части экрана
Так убери их с верхней части
Vladimir
Выбери фон более адекватный
Vio
https://github.com/uikit/uikit/commit/070796aa55ea8c17b96e6ea39eac89690e2460ee 👍
Vladimir
Александр
Про векторные картинки. svg действительно хороший формат.
В какой-то момент озадачился вопросом, что на смартфонах в хроме файлы png выглядят не очень, качество заметно хуже.
Тогда попробовал использовать svg вместо png
Главные преимущества - размер файла и отсутствие потери качества при масштабировании и отображении на мобильных.
Теперь использую svg, там где это возможно - Иконки, простые изображения значки всякие и пр.
Тень добавляю в css свойством filter
filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.4));
Eugene
Про векторные картинки. svg действительно хороший формат.
В какой-то момент озадачился вопросом, что на смартфонах в хроме файлы png выглядят не очень, качество заметно хуже.
Тогда попробовал использовать svg вместо png
Главные преимущества - размер файла и отсутствие потери качества при масштабировании и отображении на мобильных.
Теперь использую svg, там где это возможно - Иконки, простые изображения значки всякие и пр.
Тень добавляю в css свойством filter
filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.4));
тень, которая нужна, ее не так просто сделать или вообще нельзя. во всяком случае, в векторном редакторе. выше обсуждали.
нааверное если сильно заморочиться, то можно через css. пишут же игры. но это нужно очень долго разбираться...
RINAT
The October Issue - The Joomla Community Magazine
https://magazine.joomla.org/all-issues/october-2022/the-october-2022-issue
Александр
Александр
а какой браузер?
Александр
Eugene
Александр
Eugene
мне кажется, у тебя в файле лишний слой - растровая картинка или какой-то мусор. у тебя локально тянется, в др случаях нет
Александр
вот попробую для интереса на другом компе. Слой тут не один, так и есть
Eugene
собственно, вот в коде svg:
<image x="0" y="0" width="215.14" height="215.14" xlink:href="тень_Images\тень_ImgID1.png"/>
Eugene
поэтому все так произошло
Den 💙💛
lighthouse рекомендовал отрубить lazy этим элементам в верхней части экрана
Lazy не нужно в первом экране
Александр
кстати да, все понял почему так. Если сделать тень, то она сохраняется в виде пнг файла
Den 💙💛
собственно, вот в коде svg:
<image x="0" y="0" width="215.14" height="215.14" xlink:href="тень_Images\тень_ImgID1.png"/>
А не проще ли на див добавить фон, развернуть и дать тень?
Александр
ну если именно с этой фигурой, то проще)) хотелось именно с svg поиграться
Eugene
почитай выше - там тень специфическая. я не знаю как так сделать
Eugene
вверх слева- белая тень, вниз справа - темная тень
Александр
да тень то такую я сделал
Den 💙💛
Кстати можно в фигме накинуть и взять либо свг, либо стили
В фигме плагинов для подобных теней несколько штук есть
Den 💙💛
А ещё где-то встречал по стилям разные варианты сложных и симпатишных теней😉
Александр
Den 💙💛
Ну во всяком случае вариантов теней куча. Можно нагуглить
Но я бы такое делал с использованием псевдокласов
Eugene
Александр
короче говоря нарисовать можно. Но если честно, я не очень понимаю конечную задачу. Полистал переписку, но не дошло
Den 💙💛
Растр лучше не юзать
Не будет адаптивности, а на плотных мониторах будут артефакты
Den 💙💛
Eugene
короче говоря нарисовать можно. Но если честно, я не очень понимаю конечную задачу. Полистал переписку, но не дошло
Eugene
сорри, если неправильно описал
Александр
а формат какой в итоге нужен?
Александр
могу cdr скинуть
Eugene
svg конечно. вектор + тень в css или как она там формируется иллюстратором
Eugene
могу cdr скинуть
ну это все затевается для использования в веб. без потери качества при масштабировании. соответственно, нужен svg.
Vladimir
Там не только разные тени.
Там ещё сам градиент тени отличается от стандартного.
Таких функций в css просто нет
Eugene
вот оно как...
Den 💙💛
Там не только разные тени.
Там ещё сам градиент тени отличается от стандартного.
Таких функций в css просто нет
Я встречал варианты. Интересными способами делали
Vladimir
Я изучал вопрос теней.
Его можно повторить с помощью css но там реально сложные правила