Как задать форму для аватарки только при помощи CSS3

Как задать форму для аватарки только при помощи CSS3Если у вас появилось желание по экспериментировать с формами вашей аватарки. К примеру, вы хотите сделать её в форме звёздочки, сердечка, или даже в виде стрелки — всё это легко решается при помощи CSS3 , правда к сожалению, только при помощи средств Webkit, а как известно не все версии браузеров их поддерживают. Но мы следуем за прогрессом, поэтому не будет придавать большого значения этой проблемки, всё равно через годик или 2 она решится сама собой.

И так, возьмём одну из самых распространённых форм — шестиугольник и ваше изображение. Будьте внимательны не берите изображение в котором вше лицо очень приближено, необходимо иметь небольшой зазор на краях, чтобы форма благополучно их обрезала.

И так, мы будем использовать метод наложения маски.

<img src="boy.jpg"> <!-- просто выводим ваше изображение -->

В принципе вам больше ничего не надо, но если вы хотите чтобы вше изображение было уникальным и форма накладывалась только на него, вам стоит задать для него класс при помощи тэга div.

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

А теперь самое важное, наложим маску, которая опишется всего лишь одной строкой в вашем файле стилей.

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

где avatarmask.png — это чёрное изображение шестиугольника.
маска для аватарки
А теперь усовершенствуем наш метод при помощи свойства Background-Clip. Здесь нам понадобится всё также ваше изображение и набор простых чёрных иконок.

<div class="avatars">
  <h4 class="boy">&diams;</h4>
  <h4 class="girl">&#9733;</h4>
  <h4 class="boy2">&hearts;</h4>
</div> 

Файл стилей будет выглядеть так.

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

Для задания маски вы можете использовать сервис — CopyPasteCharacter , в котором доступно большое количество иконок.



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *