Как сделать сплошные рамки у изображений

Оцените материал
(0 голосов)

Проблема

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

Как создать нечто подобное с помощью CSS? Возможно, у вас в голове сейчас звучит громкий крик: «border-image,  border-image, мы можем использовать  border-image , это больше не проблема!!!» Не так быстро, юный падаван. Вспомните, как на самом деле работает  border-image : по сути, это масштабирование девяти фрагментов. Вы разрезаете изображение на девять блоков и применяете их к углам и сторонам соответственно. Как с помощью  border-image нарезать изображение, чтобы воспроизвести пример с рисунка выше? Даже если мы потратим кучу времени и правильно разделим его для элемента конкретного размера с конкретной шириной рамки, оно не будет масштабироваться при изменении размера элемента. Проблема в том, что мы не собираемся всегда использовать в углах лишь определенные части изображения; то, какой фрагмент изображения будет отображаться в углу, зависит от размера элемента и ширины рамки. Попробуйте поэкспериментировать, и, скорее всего, вы поймете, что с  border-image это невозможно. Но что же тогда делать? Самый простой способ — использовать два элемента HTML: один, для которого фоном будет служить наша картинка с камнем, и второй — с белым фоном для области содержимого элемента:
HTML
<div class="something-meaningful"><div>
I have a nice stone art border,
don't I look pretty?
</div></div>
.something-meaningful {
background: url(stone-art.jpg);
background-size: cover;
padding: 1em;
}
.something-meaningful > div {
background: white;
padding: 1em;
}


Это решение хорошо работает и создает «рамку», показанную на рисунке, но требует наличия дополнительного элемента HTML. Таким образом, оно не оптимально: оно не только смешивает представление и структуру, но в определенных случаях изменить HTML-код  вообще невозможно. Существует ли способ реализовать то же самое с помощью одного элемента?

 

Решение

Благодаря градиентам CSS и расширениям для фона, мы можем достичь того же самого эффекта с одним элементом. Главная идея заключается в использовании второго фона чисто-белого цвета, который будет закрывать изображение с камнем. Однако для того, чтобы изображение камня проглядывало сквозь область рамки, к этим двум изображениям необходимо применить разные значения  background-clip.

И последнее, о чем нужно помнить: мы можем использовать только фоновыйцвет последнего слоя, поэтому нам потребуется имитировать белый фон с помощью градиента CSS от белого до белого цвета. Вот как могла бы выглядеть первая попытка воплотить эту идею:
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white), url(stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;

Как видно на рисунке, результат очень близок к тому, чего мы хотели достичь, но все же наблюдается какое-то странное повторение. Причина в том, что значение по умолчанию для  background-origin равно  padding-box , и поэтому размер изображения вычисляется в зависимости от размера области забивки, а также помещается в точку 0, 0 относительно области забивки. Все остальное — это всего лишь повторения первой фоновой плитки. Чтобы исправить ситуацию, необходимо также установить значение border-box для свойства  background-origin:

padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white), url(stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;

Эти новые свойства также доступны в сокращении background , которое способно помочь нам здорово уменьшить объем кода:
padding: 1em;
border: 1em solid transparent;
background:
linear-gradient(white, white) padding-box, url(stone-art.jpg) border-box 0 / cover;

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/continuous-image-borders
Разумеется, ту же технику можно применять и с узорами, основанными на градиентах. Например, взгляните на следующий код, в котором мы генерируем рамку в стиле старомодного конверта:


padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%,#58a 0, #58a 37.5%,transparent 0, transparent 50%) 0 / 5em 5em;

Результат показан на рисунке. Ширину полос можно с легкостью поменять с помощью свойства background-size, а ширина рамки регулируется объявлением  border. В отличие от нашего примера с изображением камня, этот эффект также можно
воплотить с помощью  border-image:
padding: 1em;
border: 16px solid transparent;
border-image: 16 repeating-linear-
gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
Однако подход с  border-image влечет за собой несколько проблем: ‰ значение  border-image-slice необходимо обновлять каждый раз, когда мы меняем  border-width , для того чтобы они соответствовали друг другу‰ так как с  border-image-slice невозможно использовать значения, выраженные в  em, мы ограничены исключительно пикселами при определении толщины рамки;
‰ толщину полос необходимо кодировать в позициях границ перехода цвета, поэтому для ее изменения потребуется внести четыре правки.

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/vintage-envelope
Еще одно интересное применение данной техники — создание рамок из марширующих муравьев! Рамки из марширующих муравьев — это пунктирные рамки, переливающиеся так, что создается впечатление, будто по периметру бежит цепочка муравьев. Они чрезвычайно часто встречаются в графических интерфейсах пользователя; в графических редакторах они практически повсеместно используются для обозначения выделенных областей.
Для того чтобы создать марширующих муравьев, мы воспользуемся одной из вариаций эффекта «старомодного конверта». Мы сделаем полосы черными и белыми, уменьшим ширину рамки до  1px (вы заметили, что полосы уже превратились в пунктирную рамку?) и заменим  background-size чем-нибудь более подходящим. Затем мы анимируем  background-position до  100% , чтобы создать переливающийся эффект:
@keyframes ants { to { background-position: 100% } }
.marching-ants {
padding: 1em;
border: 1px solid transparent;
background:
linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg,
black 0, black 25%, white 0, white 50%) 0 / .6em .6em;
animation: ants 12s linear infinite;
}
Результат вы можете видеть на рис. 2.63. Очевидно, этот трюк полезен не только для имитации марширующих муравьев, но и для создания всевозможных необычных пунктирных рамок, например многоцветных и с промежутками нестандартной величины между черточками. Единственный способ добиться схожего эффекта с помощью  border-image — использовать анимированное изображение в формате GIF в качестве  border-image-source, как демонстрирует пример на странице 

  http://chrisdanford.com/blog/2014/04/28/marching-ants-animated-selection-rectangle-in-css. Когда в браузерах появится поддержка градиентной интерполяции, это можно будет делать и посредством градиентов, хотя и грубым, хаотичным путем с большим количеством WET-кода.

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/marching-ants
Однако свойство  border-image также обладает большой мощью и может быть весьма полезным в сочетании с градиентами. Например, предположим, что нам требуется только фрагмент верхнего края рамки, скажем, для оформления сноски. Все, что нам для этого нужно, — это  border-image и вертикальный градиент, в котором жестко закодирована точка обрезки рамки. Шириной рамки управляет…  border-width . Соответствующий код мог бы выглядеть так:
border-top: .2em solid transparent;
border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);
padding-top: 1em;

Помимо этого, так как мы указали все значения в единицах  em , этот эффект будет подстраиваться под изменения значения  font-size . А благодаря использованию  currentColor он также будет адаптироваться к изменениям  color (в предположении, что мы хотим, чтобы
рамка была того же цвета, что и текст).
ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/footnote

 Десерт на сегодня - видео о том, как электроминивен Edna спокойно обогнал Феррари и Теслу:

Прочитано 319 раз Последнее изменение Суббота, 11 февраля 2017 14:23
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Wix.com INT

TemplateMonster

Поиск по сайту

Kwork

Google+