Недавно задался вопросом: как сделать так, чтобы изображение красиво обтекало не просто по какому-то определенному его краю, а по заданному контуру. Это особенно красиво смотрится, когда изображение имеет прозрачный фон или цвет основного фона изображения совпадает с фоном всей html-страницы.

Но как оказалось CSS3 этого делать не умеет. В русскоязычном интернете даже упоминания о такой возможности я не нашел. Пришлось искать решения за бугром. И, о чудо, решение нашлось, правда реализовано оно на jQuery.

Я всегда считал и считаю до сих пор, что верстать сайты нужно только на HTML и CSS. Использовать JS тут не уместно и совсем неправильно, тем более верстать с помощью сторонних библиотек, таких как jQuery.

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

Да и к тому же такая верстка с использованием jQuery не приведет к каким-то серьезным проблемам. Если, к примеру, у посетителя сайта окажется отключенным обработчик JS-кода — применится простое, угловатое обтекание текста, к которому мы все так привыкли.

Как это выглядит?

Выглядит это нереально, круто. Ну, а если не верите на слово, то вот доказательство в виде картинки:

See the Pen test by Ванька (@itshaman) on CodePen.

Как это сделать у себя на сайте?

Все, как всегда, просто. За это отвечает плагин jQuery – jquery.slickwrap.js (14Кб весом).

Кстати, стоит заметить, что изображение в примере используется «квадратное» и имеет белый фон. Данный метод на jQuery позволяет как-то распознавать на автомате такие места и ювелирно их огибать. Выглядит это просто шикарно.

Мне очень жаль, что такую нужную иногда штуку невозможно реализовать в новой версии CSS, но я рад, что это можно очень просто реализовать хоть и с помощью дополнительного плагина для jQuery.