Делаем аватары разных форм с помощью 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); } 

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

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

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

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

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

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; } 

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

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

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