Делаем аватары разных форм с помощью CSS и webkit

В этой статье рассмотрим, как делать аватары любой формы при помощи масок.

Только webkit

Описанные способы работают только в webkit-браузерах.

Способ 1. Webkit-маски

В этом методе используется свойство webkit-mask-image для наложения одного изображения на другое в качестве маски. В не webkit-браузерах будут отображаться стандартные квадратные аватары.

Нам понадобится два изображения: первое — сама аватарка, второе — ее маска. Не стоит использовать фотографии, где лицо взято слишком крупно:

Для маски используется изображение в формате PNG или SVG с прозрачным фоном:

Желательно сделать фотографию и маску одинаковыми по размеру. Наш HTML:

<div class="avatar">
  <img src="josh3.jpg">
</div>

и CSS:

.avatar img {
  -webkit-mask-image: url(avatarmask.png);
}

Получившийся результат (демонстрация ^[1]):

Если на маске сделать прозрачным текст, то может получится аватарка с именем:

Описанный способ удобно применять на сайтах, где пользователи сами могут загружать свои аватарки, тогда маска будет автоматически накладываться на них.

Способ 2. Символ в качестве маски

Этот метод можно назвать экспериментальным: в качестве маски будут использоваться символы из иконочного шрифта. Существует много подобных шрифтов ^[2], также можно использовать обычные HTML-символы. В выборе может помочь сервис CopyPasteCharacter ^[3].

HTML:

<div class="avatars">
  <h4 class="josh">♦</h4>
  <h4 class="kelley">★</h4>
  <h4 class="jk">♥</h4>
</div>

В CSS используем свойство webkit-background-clip со значением text, а нужное расположение фонового изображение выбираем методом тыка:

h4 {
  color: black;
  font: 260px/1.5 Helvetica, sans-serif;
  float: left;
}
 
h4.josh {
  background: url(josh.jpg) -10px 60px no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
 
h4.kelley {
  background: url(kelley.jpg) 0px 60px no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
 
h4.jk {
  background: url(jk.jpg) -10px 50px no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Получившийся результат (демонстрация ^[4]):

Второй способ возможно даже универсальнее и проще в настройке, чем первый. Однако в не webkit-браузерах этот метод тоже не работает. Chris Coyier предложил использовать Modernizr ^[5] для решения проблемы.

Очевидно, что в ближайшем будущем подобное представление аватаров пользователей будет набирать популярность, соответственно и многие браузеры начнут поддерживать подобное.

Автор: grokru