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

[iHits]

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

Дай ссылку на сайт с такими аватарами, я думаю там стилем .div:after обошлись.

 

[sasha_ua]

2 iHits
Это .PSD ) так что не получится..

 

[sasha_ua]

2 iHits
Если бы не было боковых градиентов(на скрине они могут быть не видны) просто маска с прозрачностью..
или как вариант .div:after
Кстати как отписал человек выше:

Самый простой способ вставить 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>

Для кроссбраузерности нужно подключать Для просмотра ссылки Войди или Зарегистрируйсяaphael.js
Вот еще попался интересный мануал Для просмотра ссылки Войди или Зарегистрируйся

 

[MrJaaaaaack]

Вот наглядный пример на CSS:

<div class="avatar"> <img class="img-circle" src="ТВОЯ КАРТИНКА.png" alt="Generic placeholder image"></div>


.avatar{
margin:0 auto;
background: #fff;
width: 140px;
height: 140px;
padding: 5px;
border: 1px solid #999;
border-radius: 50%;

box-shadow: 0px 1px 1px 1px #ccc;
}
.avatar img{
display: block;
width: 100%;
border: 0;
margin: 0;
border-radius: 50%;
}

 

[Solus_Rex]

Вот наглядный пример на CSS:

<div class="avatar"> <img class="img-circle" src="ТВОЯ КАРТИНКА.png" alt="Generic placeholder image"></div>


.avatar{
margin:0 auto;
background: #fff;
width: 140px;
height: 140px;
padding: 5px;
border: 1px solid #999;
border-radius: 50%;

box-shadow: 0px 1px 1px 1px #ccc;
}
.avatar img{
display: block;
width: 100%;
border: 0;
margin: 0;
border-radius: 50%;
}

На первой странице ТС говорил, что не нужен просто круг. Вчитайтесь.

 

[dwarf]

Для кроссбраузерности нужно подключать Для просмотра ссылки Войди или Зарегистрируйсяaphael.js

Рекомендую библиотеку Для просмотра ссылки Войди или Зарегистрируйся
Любые формы, все кроссбраузерно и быстро.

 

[swordone]

если ты тоже считаешь, что ие 7 - 8 уже никто не юзает, а если и юзают то очень мало пользователей то повесь цсс градиент на фон блока с авой, а внутрь блока вставь само изображение с авой. Иначе вместо цсс градиента можно использовать пнг фон с тем же самым градиентом.

 

[MrJaaaaaack]

если ты тоже считаешь, что ие 7 - 8 уже никто не юзает, а если и юзают то очень мало пользователей то повесь цсс градиент на фон блока с авой, а внутрь блока вставь само изображение с авой. Иначе вместо цсс градиента можно использовать пнг фон с тем же самым градиентом.

Тогда я боюсь будет проблема с кросс браузерностью, а что бы учесть все моменты, это нужно пару сотен строчек кода. Стоит ли ?