Антон Вебсайтовский, берутся такие, как я, всё оттуда же — из личного опыта. Вопрос про свойства программы не очень понятен. Используйте блоки, имитирующие тени, размытие, используйте маски, используйте градиенты и альфа-маски. Всё на ваше усмотрение для того, чтобы воспроизвести реалистичные тени, блики и т. п. Объединяйте объекты в группы, делайте у них заливки, маски и т. п.
Я понимаю, что вся картинка вектор, просто обычно такие вещи делают в растре в хорошем разрешении, обрабатывают, обрезают, а затем уже размещают в вектор, который служит просто фоном. Ну или в векторе делают финальные штрихи а-ля теней. Но первично в растре, т. к. там и детализация, и сложные манипуляции по типу смешивания объекта с фоном, контурной обработки и т. д.
Навряд ли это вопрос к программе, это вопрос к вашему умению рисовать, умению работы с бликом, тенью и т. д. Но тут возникает другой вопрос — почему вектор?
Обычно такие объекты делают либо в 3D, а затем сохраняют в растр и обрабатывают, либо источник растр изначально — фотография. Объект сложный, в векторе сделать такой сложно нормально, а с учётом ограничения по разрешению исходника, никаких преимуществ по деталям векторизация не даст, ибо информации всё равно нет. Плюс, векторе меньше простора для ретуши и меньше реалистичности. Поэтому не совсем понял выбор перевода этого объекта в вектор.
Вообще, это работает в Chrome, Firefox, Safari, Opera и Edge. В пролете только Internet Explorer:
Можно смело использовать. А вообще, лучше через @supports сделать, как я в примере. Тогда в неподдерживаемых браузерах будет просто белого цвета текст.
olya_097, ну, тогда вам эта анимация не подходит, ибо тут нужно после визуального скрытия ещё и в display: none уводить ненужные секции, чтобы размеры менять. Что, собственно, и делает механизм работы fadeIn и fadeOut в jQuery.
kirillleogky, я ни разу не делал. Но если это и будет работать, то, предположу, что иерархически они будут идти последовательно, если вас интересует это.
Сделайте 4 файла с правилом для одинакового класса, но с разным цветом background, например.
-- import-1.css (тут импорт import-1-1.css)
---- import-1-1.css
-- import-2.css (тут импорт import-2-1.css)
---- import-2-1.css
И посмотрите, как и что будет работать. Зуб даю, что правило из import-2.2.css.
Псевдоэлементы — это только элементы оформления. Никак отдельных событий, hover'ов и кликов на них нельзя повесить, только у контексте родителя.
https://dev.to/finallynero/understanding-css-befor...