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

Тема в разделе "Верстка", создана пользователем sasha_ua, 29 янв 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. sasha_ua

    sasha_ua Постоялец

    Регистр.:
    23 июн 2010
    Сообщения:
    66
    Симпатии:
    0
    Здравствуйте.

    Задача, сделать аватар пользователя такого вида:
    [​IMG]

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

    D'Jack

    Регистр.:
    22 сен 2012
    Сообщения:
    337
    Симпатии:
    112
    Всё просто
     
  3. sasha_ua

    sasha_ua Постоялец

    Регистр.:
    23 июн 2010
    Сообщения:
    66
    Симпатии:
    0
    Я это читал, у меня немного другая задача, у меня не просто круг.
     
  4. tusja

    tusja

    Регистр.:
    31 мар 2007
    Сообщения:
    493
    Симпатии:
    71
    что значит не просто круг??
    ты на форуме экстрасенсов?
    опиши задачу.
     
    D'Jack нравится это.
  5. sasha_ua

    sasha_ua Постоялец

    Регистр.:
    23 июн 2010
    Сообщения:
    66
    Симпатии:
    0
    Кликни на картинку, там справа снизу хвост как в облаках, т.е. это не круг
     
  6. xoxmo

    xoxmo Постоялец

    Регистр.:
    24 мар 2008
    Сообщения:
    142
    Симпатии:
    86
    делайте также с png-маской. а кроссбраузерный прозрачный png с градиентом можно получить тут: https://tinypng.com/
    делаете обычный прозрачный пнг, идете на этот сервис и превращаете его в кроссбраузерный, сохраняя прозрачность и градиент.
     
  7. sasha_ua

    sasha_ua Постоялец

    Регистр.:
    23 июн 2010
    Сообщения:
    66
    Симпатии:
    0
    Дело в том что аватар и градиент не связаны между собой, градиент это background на body.
    Т.е. background неоднородный, по краям он есть а по середине белый фон.
     
  8. xoxmo

    xoxmo Постоялец

    Регистр.:
    24 мар 2008
    Сообщения:
    142
    Симпатии:
    86
    градиент на фоне идет справа налево? если аватар всегда находится на одном расстоянии от левого края (от того места, где начинается фон с градиентом), то правильно подогнанная пнг-маска позволит накрыть фотку без каких-либо косяков. а кроссбраузерность обеспечит как раз tinypng.com. если же расстояние от левого края не всегда одинаковое, то тогда не получится.
    на странице это где-то можно посмотреть?
     
  9. sasha_ua

    sasha_ua Постоялец

    Регистр.:
    23 июн 2010
    Сообщения:
    66
    Симпатии:
    0
    Вот скрин
    [​IMG]
    Левый аватар всегда на одном расстоянии, но второй на однородном, получается придется использовать nth-child
     
    Последнее редактирование: 29 янв 2014
  10. Gtnz

    Gtnz Писатель

    Регистр.:
    29 янв 2014
    Сообщения:
    2
    Симпатии:
    0
    Самый простой способ вставить inline-svg (http://caniuse.com/#feat=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>