Ягодный коктейль при помощи CSS маски

Мне хотелось чем-то скрасить серое осеннее настроение, и я решила сделать ягодный коктейль. Но, увы, на рынке уже не было достойных ягод для моей затеи. Зато CSS меня не подвел – посмотрите, какая вкуснятина у меня получилась!

Прошу заметить, что данный пример работает только для браузеров на основе webkit. Если у Вас IE или Firefox, то стоит поменять браузер на более современный можете скачать Chrome или Opera, чтобы посмотреть.

 
 
 

Создай свой идеальный коктейль!

Калорийность: 0 ккал
Создать новый
 
 
 
 

Для создания коктейля я использовала CSS -свойство mask-image. Кто знаком с Photoshop-ом, тот знает о том, что из себя представляют маски – тут они работают по точно такому же принципу.

Маска – это, будто, глазок, через который Вы смотрите на картинку. Картинка повторяет форму маски. Маска «состоит» из двух частей: прозрачной и закрашенной. Мы сможем увидеть объект как раз по форме закрашенной части. Полупрозрачность также поддерживается.

Вот пример маски с полупрозрачностью и то, что выходит, когда ее применить:

 
 
.alfa-mask{
	background: url(berries.jpg);
	-webkit-mask-image: url(mask_2.png);
	mask-image: url(mask_2.png);
	width: 300px;
	height: 300px;
	display: inline-block;
	}

В качестве маски можно использовать изображения в формате png или svg-объекты. Используйте их и наслаждайтесь результатом. Мне это свойство понравилось и даже вдохновило на пару идей. Надеюсь, что когда-то оно будет поддерживаться во всех браузерах, и можно будет смело пользоваться ним при верстке.

Если у Вас есть красивые примеры использования CSS-масок, оставьте ссылку в комментариях – будет интересно посмотреть!