16 рамок на css3 для оформления содержания. часть 1 из 2

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

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

element {
  border-image-slice: 19;
}

Это свойство задает внутренние смещения от верхней, правой, нижней и левой стороны. Смещения разделяют изображение на 9 областей: четыре угла, четыре стороны и посередине:

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

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

Числа обозначают пиксели изображения, или координаты в случае, если это векторное изображение. Не добавляйте px после числа – в этом случае свойство не будет работать.

Вот как вы можете использовать border-image-slice:

<div class="box">
  Border Image
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div>
.box {
  border: 19px dotted #c905c6;
  border-image-source: url(border-bg.png);
  border-image-slice: 19; 
}

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

мы получим что-то выглядящее вот так:

Средняя область выводится полностью прозрачной, поэтому она не видна. Если вы хотите сделать ее видимой, добавьте ключевое слово fill.

Например, использовав изображение с непрозрачной центральной областью, вы получите такой же результат, как на рисунке выше.

Применив ключевое слово fill следующим образом:

.box {
  border: 19px dotted #c905c6;
  border-image-source: url(border-fill.png);
  border-image-slice: 19 fill;
}

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

мы получим область с полностью видимым изображением, хотя оно и будет размытым и деформированным:

Примеры с различными границами рамок CSS border

2.1. Пример. Разные стили оформления границы рамки border-style

Вот как это выглядит на странице:

border-style: dotted
border-style: dashed
border-style: solid
border-style: double
border-style: groove
border-style: ridge
border-style: inset
border-style: outset
Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

Вот как это выглядит на странице:

При наведении курсора мыши на блок цвет рамки изменится

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P), где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

border-radius

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

На примере ниже 2 квадрата. Один залит синим цветом, у вокруг второго нарисована рамка. Для элементов задано скругление:

See the Pen
border radius by Андрей (@adlibi)
on CodePen.

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

Так, для квадрата на примере ниже, задано такое свойство:

Значения устанавливаются для углов по часовой стрелке.

See the Pen
border radius 4 by Андрей (@adlibi)
on CodePen.

Количество значений может быть от 1 до 4. В таблице приведены результаты введения разного количества значений.

Количество значений свойства Результат
1 Все стороны выполнены в одном стиле
2 Стиль устанавливается отдельно для горизонтальных (1-е значение) и вертикальных границ (2-е значение)
3 1-е значение – верх лево;
2-е – верх право и низ лево;
3-е – низ право.
4 Все границы выполнены в разных стилях. Соответствие значениям (с 1-го по 4-е) – по часовой стрелке, начиная с верхней.

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

See the Pen
border radius 2 by Андрей (@adlibi)
on CodePen.

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

See the Pen
border radius 50percent by Андрей (@adlibi)
on CodePen.

Атрибуты бирки

Следование важные атрибуты бирки <frame>:

Атрибут
Описание
src
Этот атрибут использован для того чтобы дать имя файла которое должно быть нагружено в рамке. Свое значение может быть любым URL. Например, src=» /html/top_frame.htm» нагрузит архив HTML доступный в директории HTML.
имя
Этот атрибут позволяет вам дать имя к рамке. Он использован для того чтобы показать которую рамку документ должен быть нагружен в

Это специально важно когда вы хотите создать соединения в одном кадре которые нагружают страницы в другую рамку, в случае которой второй рамке нужно имя определить как цель соединения.
frameborder
Этот атрибут определяет ли или не показаны границы той рамки; он отвергает значение уступанное атрибут frameborder на бирке если одно дается, и это может принять значения или 1 (да) или 0, то (нет).
marginwidth
Этот атрибут позволяет вам определить ширину пространства между левое и право границ рамки и содержания рамки. Значение уступано пикселы

Например marginwidth= » 10″.
marginheight
Этот атрибут позволяет вам определить высоту пространства между верхняя часть и дно своего содержания рамки границ и. Значение уступано пикселы. Например marginheight= » 10″.
noresize
значением по умолчанию вы можете изменить размеры любая рамка путем щелкать и волочить на границах рамки. Атрибут noresize предотвращает потребителя от мочь изменить размеры рамка. Например noresize= » noresize».
перечислять
Этот атрибут контролирует возникновение scrollbars которые появляются на рамку. Это не принимает значения или «да», «нет» или «автомобиль». Например scrolling= » нет» середины оно не должен иметь линейки прокрутки.
longdesc
Этот атрибут позволяет вам снабдить соединение другая страница содержа длиннее описание содержания рамки. Например longdesc= » framedescription.htm»

border-style

С помощью border-style можно сделать рамку в виде пунктирной линии, последовательности точек, придать ей объем, а всему блоку эффект выпуклости или вдавленности. Значение по умолчанию – none (отсутствие рамок).

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

solid
сплошная линия
none
по умолчанию – линии нет
double
двойная линия
dashed
пунктир
dotted
набор точек
groove
придание линии вогнутости
ridge
придание линии выпуклости
inset
эффект вдавленности блока
outset
эффект выпуклости блока

На примере ниже показаны все стили рамок, кроме , который продемонстрирован выше.

See the Pen
border style by Андрей (@adlibi)
on CodePen.

Синтаксис CSS border

Где:

  • border-width — толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
  • border-style — стиль выводимой рамки. Может принимать следующие значения

    • none или hidden — отменяет границу
    • dotted — рамка из точек
    • dashed — рамка из тире
    • solid — простая линия (применяется чаще всего)
    • double — двойная рамка
    • groove — рифленая 3D граница
    • ridge, inset, outset — различные 3D эффекты рамки
    • inherit — применяется значение родительского элемента
  • border-color — цвет рамки. Можно задавать с помощью конкретного названия цвета или в формате RGB (см. названия html цветов для сайта)

Примечание

Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность «толщина стиль цвет».

Создавать рамки

Для использования рамок на странице мы используем бирку <frameset> вместо бирки <body>. Бирка <frameset> определяет как разделить окно в рамки. Атрибут рядков бирки <frameset> определяет горизонтальные рамки и атрибут cols определяет вертикальные рамки. Каждая рамка показана биркой <frame> и она определяет которую документ HTML раскроет в рамку.

Пример

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

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
   <frame name="top" src="/html/top_frame.htm" />
   <frame name="main" src="/html/main_frame.htm" />
   <frame name="bottom" src="/html/bottom_frame.htm" />
   <noframes>
   <body>
      Your browser does not support frames.
   </body>
   </noframes>
</frameset>
</html>

Это даст следующий:

Пример

Препятствуйте нам положить вышеуказанный пример следующим образом, здесь мы заменили атрибут рядков cols и изменили их ширину. Это создаст все 3 кадра вертикально:

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols="25%,50%,25%">
   <frame name="left" src="/html/top_frame.htm" />
   <frame name="center" src="/html/main_frame.htm" />
   <frame name="right" src="/html/bottom_frame.htm" />
   <noframes>
   <body>
      Your browser does not support frames.
   </body>
   </noframes>
</frameset>
</html>

Это даст следующий:

Второй способ

Второй способ заключается в использовании свойства CSS3 border-image. Свойство CSS3 border-image позволяет нам заполнить рамку изображением, а также градиентом CSS3. Большинство браузеров поддерживают border-image: Chrome, Internet Explorer 11, Firefox, Safari и Opera нормально выводят border-image.

Однако следует отметить, что border-image будет работать только для прямоугольных фигур или блоков. Это означает, что добавление border-radius будет отменять вывод border-image.

Ниже приведена спецификация свойства border-image:

border-image: <source> <slice> <width> <outset> <repeat|initial|inherit>;

<source> это путь, который задает изображение, используемое в рамке. При этом мы заполним его с помощью CSS3 Gradient. Для достижения такого же вида, что и в предыдущих примерах, мы применяем CSS3 Gradient в пределах border-image следующим образом:

.box{  
 width: 250px;  
    height: 250px;  
    background: #eee;  
    border: 20px solid transparent;  
    -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);  
    -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);  
    border-image: linear-gradient(to bottombottom, #3acfd5 0%, #3a4ed5 100%);  
    border-image-slice: 1;  
}

border-image не выведет ничего, если мы не зададим ширину рамки. Так что, как вы можете видеть выше, мы добавляем ширину рамки 20 пикселей с прозрачным цветом. Затем мы устанавливаем значение для border-image и linear-gradient вместе с вендорными префиксами для ранних версий Webkit и Firefox.

Добавление border-image-slice устанавливает внутреннее смещение содержимого image-border. Это свойство необходимо для отображения градиента полностью по всему блоку. Смотрите приведенный ниже пример:

Результат

HTML:

<div class="box"></div>

CSS:

.box{
	  width: 250px;
	  height: 250px;
      margin: auto;
	  background: #eee;

	  border: 20px solid transparent;

	  -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
	  -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
	  border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);

	  border-image-slice: 1;
	}

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

Слева направо

Результат

HTML:

<div class="box"></div>

CSS:

.box{
	  width: 250px;
	  height: 250px;
      margin: auto;
	  background: #eee;

	  border: 20px solid transparent;

	  -moz-border-image: -moz-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
	  -webkit-border-image: -webkit-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
	  border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);

	  border-image-slice: 1;
	}

Диагональный градиент

Результат

HTML:

<div class="box"></div>

CSS:

.box{
	  width: 250px;
	  height: 250px;
      margin: auto;
	  background: #eee;

	  border: 20px solid transparent;

	  -moz-border-image: -moz-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
	  -webkit-border-image: -webkit-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
	  border-image: linear-gradient(to bottom right, #3acfd5 0%, #3a4ed5 100%);

	  border-image-slice: 1;
	}

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

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

Допустимые значения:

  • stretch — значение по умолчанию, если вы не используете свойство border-image-repeat. Растягивает изображение, чтобы оно заполняло всю доступную площадь;
  • repeat — изображение повторяется, чтобы заполнить всю доступную площадь. Изображение может отображаться не полностью, если доступная площадь не может быть заполнена по ширине кратное количество раз;
  • round — то же самое, что repeat, но если доступного пространства недостаточно, чтобы вместить копии изображения рамки без обрезки, они растягиваются, пока не будут подогнаны соответственно. Фрагменты плитки никогда не обрезаются, но могут выглядеть немного искаженными;
  • space — то же самое, что repeat, но если доступное пространство не может вместить кратное количество копий, оставшееся пустое пространство равномерно распределяется между всеми фрагментами.

На момент написания данной статьи Firefox выводит space так же, как stretch, а Chrome выводит space так же, как repeat.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector