Веселый форум!

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

solid – сплошная рамка;

dashed – пунктирная рамка;

dotted – точечная рамка;

double – рамка двойной линией;

groove – рамка с тенью;

ridge — с рельефом;

Ещё два свойства необходимые для создания простых рамок — это

widht – толщина рамки;

color – цвет рамки;

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

p{
  border: 2px solid #ffff00;
}

Далее задаются отступы для рамок. Задаются они следующими свойствами:

padding – внутренний (отступ рамки от содержания);

margin — внешний (отступ рамки от внешних объектов);

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

top – отступ сверху;

righnt – отступ cправа;

bottom – отступ снизу;

left – отступ слева

Записываются значения этих свойств в сокращённом варианте друг за другом (padding: 10px 30px 15px 20px), и первым ставится значение top, а дальше по часовой стрелке остальные.

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

p{
  border: 2px solid #ffff00;
  padding: 10px 20px 10px 20px;
  margin: 20px;
}

Если нужно разместить текст, или изображение по центру рамки, то в селектор «p» можно добавить свойство text-align: center;

Далее рассмотрим, как задаются высота и ширина рамки. Высота рамки задаётся браузером автоматически, и выбирается таким образом, чтобы в нем уместилось содержание, с учётом заданных отступов. А вот ширину мы с вами будем задавать самостоятельно.

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

p{
  border: 2px solid #ffff00;
  padding: 10px 20px 10px 20px;
  margin: 20px;
  width: 400px;
}

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

И последнее, что необходимо сделать — это расположить рамку на странице. Делается это при помощи, уже имеющегося, свойства margin.

А если нужно просто расположить блок рамки по центру страницы, то в свойство margin добавляется значение auto.

p{
  border: 2px solid #ffff00;
  padding: 10px 20px 10px 20px;
  margin: 20px auto;
  width: 400px;
}

Для первого примера создадим html документ, и создадим рамки solid для блока body (тело документа), и одному абзацу.

В следующих примерах будет изменяться только CSS (то, что заключено в тег style).

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
  <style>
    body{
      border: 2px solid #E5FA05; }
    p{
      text-indent: 30px;
      border: 2px solid #ffff00;
      padding: 10px 20px 10px 20px;
      margin: 20px auto;
      width: 400px; }
  </style>
</head>
<body>
  <p> Здравствуйте уважаемые будущие веб-мастера! Мне 55 лет и я рад приветствовать Вас на своём сайте.
  </p>
</body>
</html>

Результат:

Рамки средствами css

Следующая рамка dashed (пунктир).

p{
text-indent: 30px;
border: 2px dashed #ff4f00;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}

Результат:

MuRka

Рамка dotted:

p{
text-indent: 30px;
border: 3px dotted #ff4f00;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}
MuRka

Рамка double:

p{
text-indent: 30px;
border: 5px double #ff4f00;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}
MuRka

Рамка groove:

p{
text-indent: 30px;
border: 7px groove #ff4f00;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}
MuRka

Рамка ridge:

p{
text-indent: 30px;
border: 10px ridge #ff4f00;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}
MuRka

Дальше немного интереснее. Создадим рамку с закруглёнными уголками.

Для этого уберём border, и добавим border-radius и box-shadow.

p{
border-radius: 10px;
box-shadow: 0 0 0 3px #ff4f00;
text-indent: 30px;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}
MuRka

Размоем внешний край рамки. Для этого в свойстве box-shadow, увеличим третью цифру.

p{
border-radius: 10px;
box-shadow: 0 0 7px 3px #ff4f00;
text-indent: 30px;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}
MuRka

Сделаем разноцветную рамку. Для этого в свойство box-shadow, через запятую, добавим ещё несколько комплектов значений с разными цветами.

p{
border-radius: 10px;
box-shadow: 0 0 0 3px #ff4f00,
0 0 0 7px #ffdb00,
0 0 0 10px #00ffa2;
text-indent: 30px;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}
MuRka

Можно сделать круг в рамке. Для этого зададим абзацу одинаковую высоту и ширину, то есть сделаем квадрат, изменим значение border-radius

p{
border-radius: 50%/50%;
box-shadow: 0 0 0 3px #ff4f00,
0 0 0 7px #ffdb00,
0 0 0 10px #00ffa2;
padding: 40px;
margin: 20px auto;
width: 130px;
height: 130px;
text-align: center;
}
Рамки CSS

Если поиграть с дробным значением border-radius, можно сделать эллипс любого вида.

Первое число в дроби — это изгиб вертикальной составляющей угла, второе — горизонтальной.

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

Реализуется эта опция при помощи псевдокласса :hover.

p{
border-radius: 10px;
box-shadow: 0 0 0 4px #ff4f00;
text-indent: 30px;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}
p:hover {
border-radius: 10px;
box-shadow: 0 0 0 4px #00ff62;
text-indent: 30px;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}

Онлайн: 1 из 51