Как делается в css декоративная рамка (border-image)?

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

Отлично, чтобы начать, нам нужен реквизит, так сказать laugh Сегодня в качестве реквизита выступит моя фотография и фотка декоративной рамки. Вот они:
photo

Все мы, вебмастера и разработчики, постоянно работаем с сайтами. Хотел бы вам порекомендовать площадки, которыми пользуюсь сам:
  1. Reg.ru - здесь регистрирую и продлеваю доменные имена, очень надежная компания!
  2. HostIQ - хостинг премиум качества.
  3. Ihor - более бюджетный, но тоже очень качественный хостинг-провайдер.
  4. Telderi.ru - единственная надежная биржа в рунете, на которой можно купить готовые сайты с доходом!

border1

Тут я в четвертом классе, это было примерно 10 лет назад. Я был отличником учебы на тот момент, поэтому меня фотографировали для доски почета школы, по-моему. Короче, сейчас мы, что называется, в прямом эфире сделаем рамку для этой фотографии.

Делаем саму рамку

О разметке говорить нечего, там всего лишь изображение:

<img class = "photo" src = "photo.jpg">

А вот о css-коде, который и сделает все дело, стоит рассказать подробнее:

.photo{
display: block;
border: 30px solid red;
border-image: url(border1.png) 30 repeat;
}

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

Следующая строка кода самая важная для нас — это задание самой рамки. Как видите, это делается практически также, как и задание фона в css — с помощью слова url и пути к изображению. Следующим параметром нужно прописать толщину рамки вновь, но без px, просто числом. Посдений параметр — тип повторения. Тут есть 3 значения:

  1. repeat — рисунок сторон рамки будет повторяться, если по размерам меньше элемента, к которому применяется.
  2. stretch — рисунок будет растягиваться. Если размеры рамки меньше элемента, из-за этого может быть ухудшение качества.
  3. round — повторение рисунка таким образом, чтобы поместилось целое число повторений.

Честно, тут трудно объяснить все на словах. Лучше попрактикуйтесь, попробуйте прописывать поочередно все значения для рамок и быстро разберетесь, как они работают.
Вот что у нас получилось:
css декоративная рамка

Для лучшего понимания

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

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

А как сделать круглую рамку?

Учитывайте, что свойство border-radius сможет закруглить только саму картинку, но ни в коем случае не рамку. Просто border-radius действует только на обычные сплошные рамки, но не на декоративные.

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

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: