Фигурный аватар, как реализовать (в виде облака)

[sasha_ua]

Здравствуйте.

Задача, сделать аватар пользователя такого вида:
Для просмотра ссылки Войди или Зарегистрируйся

Сделал бы обычной png-маской, если бы не градиент.
Как это можно сделать кроссбраузерно?

 

[D'Jack]

Всё просто

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[sasha_ua]

Я это читал, у меня немного другая задача, у меня не просто круг.

 

[tusja]

Я это читал, у меня немного другая задача, у меня не просто круг.

что значит не просто круг??
ты на форуме экстрасенсов?
опиши задачу.

 

[sasha_ua]

Кликни на картинку, там справа снизу хвост как в облаках, т.е. это не круг

 

[xoxmo]

Здравствуйте.

Задача, сделать аватар пользователя такого вида:
Для просмотра ссылки Войди или Зарегистрируйся

Сделал бы обычной png-маской, если бы не градиент.
Как это можно сделать кроссбраузерно?

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

 

[sasha_ua]

Дело в том что аватар и градиент не связаны между собой, градиент это background на body.
Т.е. background неоднородный, по краям он есть а по середине белый фон.

 

[xoxmo]

Дело в том что аватар и градиент не связаны между собой, градиент это background на body.
Т.е. background неоднородный, по краям он есть а по середине белый фон.

градиент на фоне идет справа налево? если аватар всегда находится на одном расстоянии от левого края (от того места, где начинается фон с градиентом), то правильно подогнанная пнг-маска позволит накрыть фотку без каких-либо косяков. а кроссбраузерность обеспечит как раз tinypng.com. если же расстояние от левого края не всегда одинаковое, то тогда не получится.
на странице это где-то можно посмотреть?

 

[sasha_ua]

Вот скрин
Для просмотра ссылки Войди или Зарегистрируйся
Левый аватар всегда на одном расстоянии, но второй на однородном, получается придется использовать nth-child

 

[Gtnz]

Самый простой способ вставить inline-svg (Для просмотра ссылки Войди или Зарегистрируйся)

<svg width="320" height="250">
<defs>
<radialGradient id="mygradient" cx="50%" cy="50%">
<stop offset="80%" stop-color="white" stop-opacity="1"/>
<stop offset="100%" stop-color="white" stop-opacity="0.2"/>
</radialGradient>
<mask id="mymask">
<circle cx="110" cy="120" r="90" fill="url(#mygradient)"/>
<circle cx="220" cy="120" r="90" fill="url(#mygradient)"/>
</mask>
</defs>
<image xlink:href="p-0068.jpg" mask="url(#mymask)" x="0" y="0" width="320px" height="256px"/>
</svg>