CSS. Border-image, о котором вы, возможно, не знали


Оглавление (нажмите, чтобы открыть):

Про CSS

Border-image

Border-image — свойство, которое позволяет задавать фоновое изображение для рамки элемента. Свойство заполняет рамку заданной картинкой, распределяя части изображения таким образом, чтобы угловые части находились в углах рамки, а пространства между ними заполнялись остальными частями изображения.

Это свойство позволяет легко делать невероятные штуки, для которых раньше требовалось от 3-х до 8-ми картинок и манипуляции с разметкой.

Поддержка браузерами Не поддерживается в IE10 и ниже. В старой опере работает с префиксом. Пользователи старых браузеров (или с отключенными картинками) увидят стандартную рамку, заданную в border , поэтому имеет смысл задавать ей подходящие стиль и цвет.

Можно использовать не только квадратные картинки, но и овальные:

Картинки из примера:

При этом border-radius не влияет на border-image , так что круглые картинки для рамки — единственный способ сделать округлую рамку.

Главное требование — симметричность изображений.

Рамка с изображением полность резиновая, и может быть добавлена объекту любого размера.

Поизменяйте размер браузера, чтобы увидеть как рамка адаптируется вместе с элементом:

Или откройте этот пример в отдельном окне.

В качестве рамки могут использоваться достаточно сложные изображения:

Самый короткий способ задать изображение для рамки выглядит вот так:

Для border обязательно нужно задать толщину и стиль рамки. Цвет — опционально, но рамку именно такого цвета увидят пользователи, браузеры которых не поддерживают border-image . По умолчанию это будет цвет текста. Можно задавать transparent — прозрачный.

Для border-image обязательно задавать изображение ( border-image-source ), размер угловой части ( border-image-slice ) и повторение картинки ( border-image-repeat ).

Заданная картинка режется вот по такой схеме:

Желтым выделены угловые части, размер которых задается свойством border-image-slice , зеленым — заполняющие.

Рассмотрим отдельные свойства border-image .

Border-image-source

Возможные значения: none или .

Теоретически, можно задавать и градиенты, но они работают в Хроме/Сафари и не работают в FF. С их помощью можно было бы делать резиновые тени неправильной формы, вот такие, например (смотреть в Хроме). С градиентами можно делать и более странные варианты, причем узоры сами заботятся о своей пропорциональности. Примеры ниже на момент написания статьи работают только в Хроме и Сафари. Пример 1 Пример 2 Пример 3

Upd: В Firefox работают начиная с 29-й версии.

Размер картинки равен толщине рамки. Цвет и стиль рамки игнорируются.

Если задать только border-image-source , картинка заполнит собой уголки, не зная что ей делать дальше:

Border-image-slice

Важное свойство, которое определяет размер куска изображения, которое заполнит углы рамки. Остальные части будут использованы для заполнения пространства между углами по алгоритму, заданному в border-image-repeat .

— рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты. — пиксели (для растрового изображения) или координаты (для векторного). Единицы измерения не указываются. fill — ключевое слово, дополняющее предыдущие значения. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки. Очень полезно для округлых рамок.

Чтобы определить значения для каждой стороны, несколько значений можно задать через пробел.


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

Border-image-repeat

Свойство определяет как будут заполняться промежутки между углами.

Возможные значения: stretch — растягивает заполняющий участок картинки. Значение по умолчанию; repeat — повторяет заполняющий участок, при этом видны места стыков с угловой картинкой; round — заполняет промежуток между углами. Может быть заметен стык в середине стороны. Самое аккуратное действие. space — действует похоже на repeat . Разницы не обнаружила.

Можно задать два значения сразу, первое будет отвечать за поведение картинки в верхней и нижней рамке, второе — за левую и правую.

Слева repeat , справа round .

Если рамка сложная и стороны плохо стыкуются между собой, stretch сработает корректнее, вот пример.

Border-image-width

Свойство управляет шириной видимой части рамки, масштабирует её. Если это значение больше ширины border-width , картинка рамки заползет под содержимое, даже если не заданно свойство fill .

Возможные значения: — значения в px или em; — значения в процентах относительно размера изображения; — числовое значение, на которое умножается border-width auto — ключевое слово. Если оно задано, значение равно соответственному border-image-slice . Если подходящего размера нет, используется значение border-width , при этом картинка заполняет весь угол рамки, заползая под контент. Немного странно работает.

Справа рамка с border-image-width . На примере слева видно, как картинка обрезалась внутренними краями рамки. Правая рамка засчет увеличенной ширины заползла под контент.

Border-image-outset

Интересное свойство, позволяющие отодвинуть рамку за пределы элемента. Отрицательные значения не поддерживаются.

Возможные значения: — значения в px или em; — числовое значение, на которое умножается border-width .

Справа пример с border-image-outset . Это свойство не влияет на размеры элемента, а рамка может перекрывать соседние элементы:

border-image — довольно сложное, но очень интересное свойство. Мне очень нравится идея использовать его вместо традиционного способа сделать графическую рамку для резиновых элементов. Примеры в посте несколько диковаты, но я уверена, что свойство можно применять более изящно, а от его возможностей просто захватывает дух : )

Например, Вадим Макеев предложил с помощью border-image делать тень сложной формы для блока, размеры которого могут быть заранее неизвестны.

Приготовьте подходящую картинку и посмотрите как border-image легко справится с задачей с помощью всего лишь пары строчек кода:

Можно менять размеры блока и добавлять в него сколько угодно текста — тень будет растянется вслед за ним.

Прекрасная простота. Будет здорово, когда это свойство можно будет полноценно использовать без оглядки на старые браузеры.

Изображения рамок нагуглены по запросу “рамки”. Картинка с джедаями — фотожаба.

Border-image не работает

04.04.2020, 15:09

Как работает border-image?
откуда идет отсчет размеров

Очередность border-image и background-image у вложенных элементов
Я работаю с одной графической библиотекой для настольных приложений, в которой пользовательский.

Border-image
Добрый день. Подскажите пожалуйста, как избавиться от еле видных полосок, появившихся вследствие.

Border-image
Доброго времени суток всем. Создал треугольник из бордера. А сделать его в картинке не получается.

Border-image для блока
Имеется картинка-граница. Мне нужно обернуть див в эту картинку. Как правильно прописать.


Десять приемов CSS, о которых вы возможно не знали

1. Сокращенные правила CSS для шрифта

Определить стиль шрифта в CSS можно например так:

Однако в этом нет необходимости, поскольку можно использовать следующий сокращенный вариант :

Уже лучше. НО! Такая сокращенная форма записи будет работать только в том случае, если явно заданы font-size и font-family . Если же не задать такие свойства, как font-weight , font-style или font-variant , то им будут присвоены значения по умолчанию, т.е. normal , имейте это ввиду.

2. Два класса сразу

Как правило, для тэга задается только один класс одновременно, однако это не значит, что нельзя задать больше. В действительности можно задать столько классов, сколько захочется, например:

Использование этих двух классов вместе (разделенных пробелом, а не запятой) означает, что при верстке используются правила, заданные как в text , так и в side . Если какие-то правила разных классов перекрываются, то приоритет имеет тот класс, который задан позже других в таблице стилей.

3. Значение толщины рамки в CSS по умолчанию

При написании правила CSS для рамки, как правило, устанавливаются цвет, ширина и стиль (не обязательно в таком порядке :). Например, border: 3px sol >000 даст вам черную рамку, окрашенную в сплошной черный цвет толщиной в три пикселя.

Если бы вы просто задали: border: solid , то для определения остальных параметров были бы использованы параметры по умолчанию. А они следующие: толщина имеет значение medium, т.е. где-то 3-4 пикселя, а цвет задается цветом текста внутри рамки. Если же эти параметры как раз те, которые вам нужны, вы можете не определять их явным образом!

Мастер Йода рекомендует:  Как в Photoshop создать эффект огня

4. Игнорируемое IE свойство !important

Для правил CSS характерно следующее поведение: сколько бы их не было, наивысший приоритет имеет последнее. Однако если использовать !important после команды, то эта команда CSS будет иметь наивысший приоритет вне зависимости от того, что находится после нее. Это справедливо для всех браузеров, кроме IE. Например:

В этом случае отступ будет равен 3,5em для всех браузеров, кроме IE, для которого величина отступа будет равна 2em.

(Остерегайтесь также элемента CSS child selector, содержание которого IE также игнорирует).

5. Методика замены нестандартных шрифтов изображениями

Для разметки с точки зрения скорости загрузки и преимуществ доступа (копирование и т.п.) предпочтительно использовать чистый текст, а не изображения. Однако если вы обязательно использовать именно какой-то определенный шрифт, который может быть не установлен у посетителя, то у вас нет выбора.

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

Решение само по себе нормальное, однако надо учесть, что поисковые машины не уделяют столько внимания альтернативному тексту для изобржений, сколько обычному тексту (потому что вебмастера имеют привычку писать в альтернативный текст всякую ерунду). Поэтому альтернативой будет такой способ:

Однако здесь уже не используется ваш нестандартный шрифт. Чтобы выйти из этой ситуации, поместите следующие команды в документ CSS:

Картинка с надписью нужным вам шрифтом будет отображена стандартным шрифтом, который будет безопасно расположен на расстоянии 2000 пикселей слева от документа и не будет виден.

NB! в комментах yнашось хорошее альтернативное решение от Aaron Eldreth (TheCollective4.com, His Articles), основанное на использовании вместо left:-2000px свойств visible: hidden или display: none :

6. Альтернатива box model hack в IE

Box model hack используется для устранения проблемы в браузерах младше 6-ой версии IE, где рамка и набивка включены в ширину элемента, а не добавляются. Например, при задании размеров контейнера можно использовать следующее правило:

Правило CSS применяется тогда следующим образом:

Это обозначает, что полная ширина бокса равна 150 пикселей (100 пикселей непосредственно ширина + по 5 пикселей каждая рамка + по 20 пикселей набивка с обеих сторон) во всех браузерах, кроме младших 6-го IE. В этих браузерах полная ширина будет равна 100 пикселей, причем набивка и толщина рамки уже включены в ширину. Модель позволяет исправить такое поведение, но это не самый хороший способ.

Простым решением будет использование следующей таблицы стилей:

А новый код HTML будет тогда таким:


Теперь ширина бокса всегда будет 150 пикселей, вне зависимости от браузера.

7. Выравнивание блочных элементов по центру

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

Затем каждый элемент заключается в

Таким образом мы отцентрируем основное содержимое, однако и текст будет выравниваться по середине. Для изменения последнего мы задаем свойство align: left в элементе div.

Реализовать вертикальное выравнивание в таблицах проще простого. Для того, чтобы выровнять содержание по середине (высоты ячейки), можно использовать конструкцию vertical-align: middle . Допустим, у вас есть пункт в меню навигации, чья высота равняется 2em, и вы вставляете команду вертикального выравнивания в правило CSS. Однако текст все равно останется наверху.

Хм, странное поведение. Вот решение. Установите высоту линии такой же, как и высота самого бокса в CSS. В частности, для нашего примера бокс высотой 2em, поэтому нужно вставить в правило CSS line-height: 2em , и текст теперь будет находиться посередине бокса!

9. Позиционирование внутри контейнера

Одним из неоспоримых преимуществ CSS является то, что с их помощью мы можем поместить объект в любом месте документа. Также можно (а иногда и желательно) расположить объекты в контейнере. Это тоже делается просто. Просто создайте следующее правило CSS для контейнера:

Теперь любой элемент, который находится в этом контейнере, будет располагаться относительно него. Допустим, у нас есть такой HTML-код:

Для того, чтобы поместить меню на расстоянии точно 30 пикселей слева и 5 сверху от границы контейнера, можно использовать следующее правило CSS:

В этом примере можно было также использовать правило margin: 5px 0 0 30px , , но есть некоторые случаи, когда предпочтительно использовать именно позиционирование.

10. Распространяем фоновый цвет ячейки до нижнего края страницы

Одним из недостатков таблиц стилей является невозможность контролировать положение по высоте, в отличие от табличной верстки. Допустим, вам нужно получить слева колонку с навигацией по сайту. И вы хотите, чтобы ее фон был голубым, в то время, как фон страницы белый. Для этого применятся простое правило:

Но здесь есть одна загвоздка: так как высота меню меньше высоты экрана, то под ней внизу до конца экрана будет виден белый фон страницы. Это сильно портит дизайн страницы. И что нам с этим делать?

К сожалению, единственным решением является обман — т.е. задание телу документа фоновой картинки того же цвета и той же ширины, что и наша колонка. Сделаем это так:

Ширина картинки, которую вы зададите в качестве фоновой, должна быть ровно 150 пикселей, соответственно, и ее цвет должен быть тем же, что и фоновый цвет левой колонки. Недостатком такого способа является то, что вы не можете задать ширину колонки в em, т.е. невозможно сделать «резиновую» страницу.

На момент написания статьи этот способ был единственным решением проблемы левой колонки. Будем надеяться, что CSS3 предоставит-таки кошерный способ ее решения.

CSS свойства border image

Дата публикации: 2015-12-25

От автора: еще не так давно для того, чтобы украсить какой-либо элемент необычной рамкой требовалось нарезать изображение и с помощью CSS постоянно подгонять стили до тех пор, пока результат вас не утроит. Но все изменилось. Теперь, чтобы сделать изощренную рамку, необходимо всего пара строк кода. В этой статье мы покажем, как это сделать с помощью CSS свойства border image.

Свойства border image

Стандартный способ стилизации рамки это через правило border-style, у которого есть значения dotted, dashed, solid, double, groove, ridge, inset и outset. Выбор значений достаточно большой, но можно еще больше его расширить, добавив фоновые изображения в качестве границы. Сделать это можно с помощью следующих свойств.

Свойство border-image-source

С помощью этого свойство можно установить фоновое изображение в качестве рамки объекта. Значением выступает адрес на картинку:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Также это может быть градиент:


В браузере это будет выглядеть примерно так:

Если установить значение none, или если изображение не может быть отображено, браузер применит значения свойства border-style. Так что border-style можно использовать, как фолбэк.

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

Свойство border-image-slice

После установки изображения через свойство border-image-source, необходимо его применить к рамке при помощи свойства border-image-slice.

Давайте более подробно разберем принцип работы. Свойство декорирует внутренние отступы сверху, справа, снизу и слева. Ваше изображение с помощью данного свойства дублируется в 9 областях: 4 угла, 4 стороны и середина.

Значения можно указывать от одного до четырех в целых числах или процентах. При установке всех четырех значений, они применяются каждое к своему отступу: сверху, справа, снизу, слева. Отступ слева можно не указывать, он будет такой же, как справа. Если не указать отступ снизу, то будет применено значение отступа сверху. Если указать одно значение, то оно будет применено ко всем сторонам.

Процентное значение работает относительно размера изображения – ширина для горизонтальных отступов и высота для вертикальных.

Целочисленное значение это пиксели изображения или координаты, если изображение векторное. Нельзя добавлять после px после цифр, иначе свойство не будет работать! Ниже пример использования свойства border-image-slice:

Изображение 100 x 100px в качестве рамки будет выглядеть так:

Мастер Йода рекомендует:  100+ классных инструментов для дизайнеров и не только

Центральная часть прозрачная, т.е. невидима. Если хотите, чтобы и она была с рисунком, добавьте ключевое слово fill. К примеру, если использовать изображение с прозрачной серединой без ключевого слова fill, то результат будет такой же, как выше. Однако, если применить fill:

Появляется центральная часть изображения:

Изображение отображается, но оно размыто и сплющено:

Свойство border-image-width

Данное свойство отвечает за внутреннюю область под названием border-image-area. По умолчанию границы данной зоны совпадают с border box. Как и свойство border-image-slice, border-image-width работает с отступами, которые делят изображение на 9 зон.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Свойство принимает от одного до четырех значений (верх, право, низ, лево), значения указываются в числах или процентах. Проценты высчитываются от размера зоны border-image, т.е. ширина зоны отвечает за горизонтальный отступ, а высота за вертикальный. Если указывать просто цифры без px, это значит, ширина border image будет равна значению, указанному в свойстве умноженному на border-width. К примеру, код ниже:

… ширина изображения-рамки в 3 раза больше значения свойства border-width, т.е. больше 19px в 3 раза. Выглядит это так:

Я заметил, что если задать свойствам border-image-width и border-image-slice одинаковые значения, то изображение-рамка будет отображаться без искажений.

Свойство border-image-outset

До сих пор все свойства отвечали за внутреннюю область рамки. Однако рамку можно выдвинуть за область блока. Сделать это можно с помощью свойства border-image-outset:

Свойство принимает от одного до четырех значений (верх, право, низ, лево), значение указывается в цифрах или единицах измерения типа px, em и т.д. Если указать просто цифры, то рамка вылезет за область блока на результат умножения данного значения на значение свойства border-width.

Ниже я нарисовал блок: зеленые точки указывают границу border box. Зона border-image это розовая граница. По умолчанию со значением inset розовая область находится внутри зеленой. Т.е. border image внутри border box.

Если добавить border-image-outset: 19px;, то розовая область вылезет за границу зеленых точек. Ото значит, что border image теперь расположен за границей border box:

Будьте внимательны, так как область border image, лежащая за границей border box не поддается прокрутке и событиям мыши. Все примеры в демо CodePen:

Свойство border-image-repeat

Данное свойство предлагает несколько вариантов масштабирования и расположения изображения на гранях и центральной части рамки. Первое значение работает с горизонтальными гранями (верх и низ), второе – с вертикальными (правая и левая). Если установить одно значение, то оно применится ко всем сторонам. Доступные значения:


stretch – Значение по умолчанию, если не используется свойство border-image-repeat. Изображение растягивается и заполняет всю область.

repeat – Для заполнения области изображение дублируется. Если ширина изображения не вмещается в видимую область поля, то оно обрезается.

round – то же самое, что repeat, но если изображение не вписывается в область, то оно будет масштабироваться пока не впишется. Изображения никогда не обрезаются, но могут быть немного сплющенными.

space – То же самое, что repeat, но если суммарная ширина всех изображений не совпадает с шириной области, то между изображениями появятся пробелы.

На момент написания статьи в Firefox значения space и stretch никак не отличались друг от друга, а в Chrome одинаково работали значения space и repeat.

Сокращенное свойство border-image

Все свойства, описанные выше, можно преобразовать в одно сокращенное:

border-image

Используется для отображения рисованной рамки вокруг элемента. Толщина рамки задаётся свойством border, при этом если указано border: 0 , то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой.

Краткая информация

Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам, за исключением тех, у кого border-collapse задан как collapse
Анимируется Нет

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Значения

Само изображение для создания рамки продемонстрировано на рис. 1 и состоит из девяти областей: четырёх уголков, верхней, правой, нижней, левой стороны и центральной части, в которой выводится содержимое элемента.

Рис. 1. Изображение для создания рамки

Одно, два, три или четыре значения, которые указывают размеры частей изображения в пикселях, задавая тем самым области деления. Сами единицы не пишутся, только число (10, а не 10px).На рис. 2 красными линиями выделены необходимые для создания рамки области.

Рис. 2. Деление исходного изображения на области

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.

Табл. 1. Зависимость от числа значений

Число значений Результат
1 Устанавливает границы одинаковой толщины на каждой стороне рисунка.
2 Первое значение устанавливает высоту верхней и нижней границы, второе — левой и правой.
3 Первое значение определяет высоту верхней границы, второе — левой и правой, а третье — высоту нижней границы.
4 Поочерёдно устанавливается размеры верхней, правой, нижней и левой границы.

Аналогично , но значения задаются в процентах. Тот или другой параметр обязателен. Через слэш пишется одно, два, три или четыре значения толщины границы на каждой стороне элемента. Является аналогом border-width и использует тот же синтаксис. stretch Растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию. repeat Повторяет рисунок границы. round Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.

Влияние этих параметров на вид рамки показано на рис. 3.

stretch repeat round

Рис. 3. Результат использования параметров stretch, repeat и round

CSS. Border-image, о котором вы, возможно, не знали

В CSS3 появилось новое свойство border-image, которое выглядит немного запутанным. Это свойство позволит вам создавать элементы с границей, сформированной из картинки. В этой статье я расскажу как свойство border-image работает с сегодняшними браузерами.

Основная идея

Сокращённая запись свойства состоит из трёх частей:


Таким образом, вы можете указать:

  1. Файл с изображением, которое будет использоваться для границы;
  2. Каким образом разбивать изображение при показе, изображение разбивается на 9 частей;
  3. Каким образом браузер должен применять каждую часть изображения к соответствующим частям элемента.

Необходимые подробности

Давайте рассмотрим каждую часть процесса более детально. Первый пункт очень прост, источник изображения записывается точно также как и в свойстве background-image. Для нашего примера я буду использовать изображение размером 100px на 100px:

Разбиение изображения

Вторая часть может иметь от одного до четырёх значений, как например свойство border-width, которые применяются в привычном нам порядке: top, right, bottom и left.

В нашем случае, поскольку изображение размером 100px x 100px, два правила из примера эквивалентны — картинка будет разбиваться на части в одних и тех же местах. Я добавил разметку на рисунок, чтобы продемонстрировать это:

Repeat, Round, Stretch

Свойство border-image всегда располагает угловые секции вашего изображения в соответствующие углы вашего элемента. Третья часть правила говорит браузеру как расположить средние секции вашей картинки, как они будут вести себя на границах элемента. Значения repeat (повторять часть изображения) и stretch (растягивать) говорят сами за себя. Значение round подразумевает что картинку надо повторять, но только целое количество раз, если же осталось свободное пространство, то результат надо растянуть. Однако Safari и Opera интерпретируют round также как и repeat. Всего может быть два значения, для верхней и нижней границ, а также для левой и правой. Рассмотрим пример, в котором значения для верхней и нижней границ установлено в repeat, а для левой и правой в stretch:

Border-width

Свойство border-image не позволяет указать толщину границы элемента. Браузер просто растягивает изображение вдоль границы с уже имеющейся шириной. Если вы будете использовать дополнительно свойство border, то вы обеспечите хорошую обратную совместимость для браузеров, которые не поддерживают border-image.

Также вы можете указать ширину каждой границы отдельно (в следующем примере я указал ширины так, чтобы они совпадали с ширинами картинок):

Использование простой границы вмести изображения не всегда будет выглядеть идеально, поэтому для IE вы можете использовать собственные таблицы стилей.

Особенности браузеров

Как и ожидалось, IE не поддерживает это свойство. Браузеры, которые поддерживают border-image, на самом деле поддерживают только короткую его запись и не все свойства, которые описаны в спецификации. Некоторые полезные свойства не поддерживаются всеми браузерами, например border-image-outset, которое бы решило вот эту проблему.

Также, поведение по умолчанию предполагает что центральная часть изображения будет отброшена. Для того чтобы задействовать её, необходимо использовать ключевое слово fill для свойства border-image-slice

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

Пример

Поэкспериментируйте с примером. Вы можете выбирать исходное изображение, а также параметры каждого свойства в отдельности.

5 приемов работы с CSS, о которых вам следует знать

Наблюдая за потоком вопросов по CSS уже давно заметил, что многие из них повторяются много-много раз. Да, есть совсем глупые вопросы, на которые так и тянет ответить RTFM! Но есть и более занятные. Они связаны с не совсем стандартной версткой. Не такой, чтобы глаза на лоб лезли, но и заметно выходящей за рамки условного бутстрапа и традиционных туториалов для новичков. Похожие вопросы довольно сложно загуглить — обычно вся суть в картинке, но и отвечать каждый раз надоедает. В этой статье мы постараемся посмотреть некоторые приемы, охватывающие довольно широкий круг подобных вопросов. Информация в первую очередь адресуется начинающим верстальщикам, но возможно и опытным будет, чем вдохновиться.

1. Туда-сюда-обратно

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

Довольно просто, ничего лишнего. Из нее мы получаем вот такой результат:

Как это произошло? Здесь мы применили transform: skew(-15deg) для блока и transform: skew(15deg) для контента — картинок и ссылок. Собственно вот и все. Применили трансформацию и отменили ее для потомков. Выглядит это примерно так:

При использовании transform: skew может возникать необходимость компенсировать длину контента или немного его подвинуть, что мы и сделали с помощью transform: translate .

В подобных компонентах часто применяются картинки в виде тега img . Будет очень не лишним вспомнить про object-fit: cover .


Разумеется, подобные действия можно совершить и с другими трансформациями. Например rotate дает нам возможность сделать циферблат или расположить фотографии по кругу:

Принцип работы тот же. Применили трансформацию и отменили ее для дочерних элементов:

CSS свойство border-image

Определение и применение

CSS свойство border-image позволяет указать изображение, которое будет использовано вместо границы вокруг элемента. Свойство является универсальным и позволяет установить в одном объявлении значения следующих свойств:

В настоящее время браузер Chrome не отображает изображение-границу если у элемента не задано свойство border.

Если в объявлении не были указаны значения одного из вышеприведенных свойств, то оно устанавливается в значение по умолчанию.

Поддержка браузерами

Свойство Chrome

Firefox Opera Safari IExplorer Edge
border-image 16.0
4.0
-webkit-
15.0
3.5
-moz-
15
11.0
-o-
6.0
3.1
-webkit-
11.0 12.0

Значения свойства

Значение Описание
border-image-source Указывает путь к изображению, которое будет использовано в качестве границы. Допускается использование градиентов вместо изображения. Значение по умолчанию none.
border-image-slice Определяет, как разделить изображение, используемое в роли изображения-границы и указанное в свойстве border-image-source . Значение по умолчанию 100%.
border-image-width Задает ширину границы-изображения путем определения смещения (внутрь элемента от края границы). Значение по умолчанию 1.
border-image-outset Определяет величину, на которую область границы изображения выходит за пределы блока границы. Значение по умолчанию 0.
border-image-repeat Определяет, должна ли граница изображения быть повторена, масштабируема или растянута. Значение по умолчанию stretch.
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.

Версия CSS

Наследуется

Анимируемое

Пример использования

В этом примере мы используем изображение 800 на 687, которое мы установили в качестве изображения рамки. Кроме того, установили смещение 100px от верхней, правой, нижней и левой кромки изображения и указали, что изображение масштабируемо и должно повторяться, пока не заполнит зазор между двумя границами.

Результат нашего примера:

Пример использования изображения в качестве границы.

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

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

Результат нашего примера:

Пример использования свойства border-image. CSS свойства

Граница CSS вокруг картинки

-1 Jim [2014-07-21 14:32:00]

Существует граница вокруг фото на этом сайте www.waynesboroheritagefoundation.com, но способ достижения этой границы заключается в размещении границы вокруг изображения в фотошопе или в зависимости от того, какую программу они используют.

Мне было интересно, можно ли добиться того же или подобного эффекта, используя только css?

Я думаю, что чисто CSS-решение было бы гораздо более гибким, и вам не пришлось бы беспокоиться о времени загрузки изображения (о котором я знаю, как правило, сейчас не очень интересно, но я старая школа :))

Спасибо за чтение и любые предложения! Джим


css image border

2 ответа

Вероятно, вы имеете в виду этот эффект:

Как вы можете видеть, это в самой картине, сделанной с каким-то фоторедактором.

Вы также можете сделать это с помощью чистого CSS, обернув изображение в промежутке (или другом элементе):

РЕДАКТИРОВАТЬ

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

Очередной блог фрилансера

коротко и полезно о веб-разработке

Кое-что интересное о CSS-свойстве border

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

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

Так, во время чтения книги Smashing Book 2, в главе Кристиана Хейлмана был приведен пример следующего CSS-кода:

Первое, о чем я подумал: «Это какая-то ошибка. С каких пор свойство border-color позволяет в сокращенной форме указывать цвет для каждой границы блока?». А затем, я вспомнил, что за 10 лет разработки, я использовал это свойство один или два раза, следовательно, что я могу о нем знать? Плюс, я думаю что Кристиан, как опытный разработчик, знает о чем говорит.

Фактически, каждый раз, когда мне нужно было указать цвет границы, я использовал сокращенную версию свойства border, вот так:

Редко когда мне действительно приходится использовать свойства типа: border-color, border-style, border-left-style или любые другие версии этих длинных свойств. В 99% случаев, свойство border реализует все, что мне требуется.

В CSS-справочнике на sitepoint.com сказано:

Сокращенная запись свойства border-color, устанавливает цвет границы для всех четырех сторон элемента, используя от одного до четырех, указанных значений. Каждая граница может иметь собственное значение.

Следовательно, точно так же как для свойств margin и padding, цвет для каждой границы задается в следующем порядке: верхняя граница, правая граница, нижняя граница, левая граница (по часовой стрелке, начиная сверху).

Стиль и ширина границы

Это правило работает также для свойств border-style и border-width, так что вы можете указать разную толщину и стиль границы для каждой из сторон элемента.

Ну и конечно, вы можете сокращать свойства, при необходимости:

Снова, также как у margin и padding, мы указываем только первые два значения, а остальные просто наследуются от первых.

Запомните

Нельзя использовать эту технику мульти-объявления для сокращенного CSS-свойства border (несмотря на то, что это кажется вполне логичным). Оно применяется только к трем, указанным выше, свойствам, так что следующий код будет неправильным:

Еще, такой метод не получится применить к свойствам outline-width, outline-style и outline-color.

Перевод статьи «Here’s Something Interesting About CSS Borders», автор Louis Lazaris

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

Добавить комментарий