Обрезка изображений до ромбовидной формы — распространенный прием в визуальном дизайне, но реализовать его на CSS далеко не просто. На самом деле до недавнего времени это было практически невозможно.
Поэтому для воплощения своих задумок дизайнерам приходилось сперва обрезать требуемые изображения в графическом редакторе. Разумеется, не нужно и говорить, что такой вариант применения эффекта означает огромные сложности в сопровождении веб-сайта и гарантированную неразбериху в будущем, если кто-то пожелает изменить стилизацию изображений. Определенно, сегодня у нас уже должен быть способ получше. В действительности таких способов целых два!
Основная идея та же, что и в первом решении из предыдущего секрета (см. секрет «Параллелограммы» выше), — нам необходимо обернуть наше изображение в <div> , а затем применить к нему противоположную трансформацию rotate()
HTML
<div class=»picture»>
<img src=»adam-catlace.jpg» alt=»…» />
</div>
.picture {
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img {
max-width: 100%;
transform: rotate(-45deg);
}
Однако, как вы видите на рисунке, у нас не получилось с наскока добиться требуемой стилизации. Конечно, если вы планировали обрезать изображение по форме восьмиугольника, то можете сказать, что работа сделана, и заняться чем-то еще. Но для того чтобы обрезать картинку по форме ромба, придется еще попотеть.
Противоположных трансформаций rotate() недостаточно для достижения нужного эффекта (блок div с названием .picture обозначен пунктирным контуром)
Главная проблема кроется в объявлении max-width: 100% . 100% относится к стороне нашего контейнера .picture . Однако мы хотим, чтобы ширина итогового изображения была равна диагонали исходного, а не его стороне. Вы уже догадались, что нам опять требуется помощь теоремы Пифагора (если вам необходимо освежить ее в памяти, то объяснение вы найдете в секрете здесь). Как гласит теорема, диагональ квадрата равна его стороне, умноженной на .
Следовательно, имеет смысл задать значение max-width , равное 2 × 100% ≈ 141,4213562% или, округляя, 142% , так как мы ни в коем случае не хотим, чтобы изображение уменьшилось (а если оно окажется чуть больше, то все в порядке, поскольку мы все равно его обрезаем).
В действительности еще лучше увеличивать изображение посредством трансформации scale() , и тому есть две причины: мы хотим, чтобы в ситуации, когда трансформации CSS не поддерживаются, размер изображения оставался равным 100%;
При увеличении изображения посредством трансформации scale() оно масштабируется от центра (если не указано иное значение transform-origin). Если вы будете увеличивать его путем изменения значения свойства width, то оно будет масштабироваться от верхнего левого угла и для того, чтобы переместить его, нам понадобится использовать отрицательные значения полей. Складывая все вместе, получаем такой финальный вариант кода:
.picture {
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img {
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
}
Как видно на рисунке, это наконец-то дает нам желаемый результат.
ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/diamond-images
Предыдущее решение работает, но по своей природе это грязный трюк. Он требует дополнительного элемента HTML, а значит, это беспорядочное, запутанное и хрупкое решение: если нам придется иметь дело с неквадратными изображениями, результат будет печальным.
В действительности существует намного лучший способ достичь желаемого результата. Основная идея заключается в использовании свойства clip-path — еще одной возможности, позаимствованной из SVG. Это свойство теперь можно применять и к HTML-содержимому (по крайней мере, в поддерживающих браузерах), причем с использованием приятного и читабельного синтаксиса, в отличие от эквивалента в SVG, печально известного своим умением доводить людей до бешенства.
У него есть лишь один недостаток (на момент написания этой главы) — ограниченная поддержка браузерами. Однако данное решение изящно откатывается до упрощенной визуализации (без обрезки), так что это достойная кандидатура для рассмотрения. Скорее всего, вы уже знакомы с обтравочными контурами благодаря приложениям для редактирования изображений, таким как Adobe Photoshop. Обтравочные контуры позволяют обрезать элемент до любой формы, какую вы только пожелаете. В данном случае мы собираемся использовать фигуру polygon() .
Мы будем определять ромб, но в целом эта фигура позволяет задать любой многоугольник последовательностью точек, разделенных запятыми. Можно даже использовать проценты — итоговые значения будут вычисляться относительно габаритных размеров элемента. Код очень простой:
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
Верите или нет, но это все! Но вместо двух элементов HTML и восьми строк запутанного кода CSS мы достигли желаемого с помощью всего лишь одной простой строки. Но этим чудесные способности clip-path не ограничиваются. Это свойство поддерживает даже анимацию — при условии, что мы анимируем переход между двумя одинаковыми функциями фигур (в нашем случае polygon() ) с одинаковым количеством точек. Таким образом, если мы хотим плавно раскрывать полное изображение при наведении указателя мыши, это можно реализовать таким способом:
img {
clip-path: polygon(50% 0, 100% 50%,
50% 100%, 0 50%);
transition: 1s clip-path;
}
img:hover {
clip-path: polygon(0 0, 100% 0,
100% 100%, 0 100%);
}
Кроме того, этот метод прекрасно приспосабливается к неквадратным изображениям, Ах, радости современного CSS…
ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/diamond-clip
Об авторе