Маска на картинку

[vip]

Как можно наложить такие маски на картинки через css

http://hkar.ru/zte5

 

Картинки адаптивные.

[afdw]

Можно так, но в IE не будет работать.

Можно так.

[vip]

Как я понимаю, ни с clipping-path ни c box-shadow так как на первой картинке  не сделать.

 

а накладывать png поверх фоновой картинки будет не але?

 

либо, предполагаю, должна быть возможность обрезать так картинку с помощью php при загрузке, применяя в качестве маски заранее подготовленные шаблоны?

[afdw]

Точно!!! SVG маски!!!

[vip]

Может дадите ссылку где подробнее почитать, как такие фигуры делать.

На странице будет n-картинок, к которым динамически нужно будет применить разные маски в зависимости от id или класса элемента..

[afdw]

Может дадите ссылку где подробнее почитать, как такие фигуры делать.

На странице будет n-картинок, к которым динамически нужно будет применить разные маски в зависимости от id или класса элемента..

Это SVG Masks. Там в defs обычная svg картинка, где белый означает полную непрозрачность, а чёрный - полную прозрачность накладываемой картинки на маску. Делал по этому тутуриалу.

Edited March 15, 2015 by afdw

[vip]

Нескромный вопрос, как накладывать такую маску на адаптивное изображение?

[afdw]

Нескромный вопрос, как накладывать такую маску на адаптивное изображение?

Вот. Попробуйте навести и нажать. Изображения можно менять с помощью @media.

Edited March 15, 2015 by afdw

[vip]

Изображения можно менять с помощью @media.

Я хотел сказать изображения резиновые. width="100%

[afdw]

Вот. Попробуйте изменять ширину. Пропорции сохраняются, а картинка остаётся наиболее большой.