Html рамка


Здравствуйте, уважаемые друзья и гости блога! Сегодня я вам расскажу и покажу примеры, как можно сделать красивые рамки html для оформления на своем сайте. И Вы конечно же сможете создать свои, уникальные рамки html после того, как прочтете данный материал. Это я вам обещаю!

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

Вот сейчас мы с вами и разберемся в этом вопросе подробно!

Начнем …

Как самому сделать рамки html?

Все до банальности просто!

По скольку это у нас с вами практическое занятие, то давайте и перейдем сразу к изготовлению рамки html. Рамку можно создать для любого из перечисленных далее html элементов: <p>, <h1>, <img>, <span>, <blockquote>, <marquee> и так далее.

Давайте на пример создадим рамку для тега <p>:


Ваш любой текст

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

<p style="border: 3px solid #ffa500; width: 160px; text-align: center;">Ваш любой текст</p>

Теперь давайте сделаем несколько видоизменений нашей рамки. И для этого нам с вами нужно всего лишь изменить одно значение «solid». А изменения будут такими:
«dotted» — точечная рамка

<p style="border: 3px dotted #ffa500; width: 160px; text-align: center;">Ваш любой текст</p>

Ваш любой текст

«dashed» — пунктирная рамка

<p style="border: 3px dashed #ffa500; width: 160px; text-align: center;">Ваш любой текст</p>

Ваш любой текст

«solid» — сплошная рамка

<p style="border: 3px solid #ffa500; width: 160px; text-align: center;">Ваш любой текст</p> 

Ваш любой текст

«double» — двойная рамка

<p style="border: 3px double #ffa500; width: 160px; text-align: center;">Ваш любой текст</p>

Ваш любой текст


«ridge» — рельефная рамка

<p style="border: 3px ridge #ffa500; width: 160px; text-align: center;">Ваш любой текст</p>

Ваш любой текст

Ширина нашей рамки задается значением «width», просто измените цифирные значения подобрав их под свои нужды. А значением «padding» можно равнять текст:

<p style="border:3px #ffa500 ridge; width: 160px; padding: 5px 0 5px 15px;" > Ваш любой текст</p>

Ваш любой текст

А если добавить значение «margin», то можно выравнять саму рамку по наружним краям от окружающих ее «предметов», где первая цифра — отступ сверху, вторая — отступ справа, третья — отступ снизу, четвёртая — отступ слева:

<p style="border:3px #ffa500 ridge; width: 160px; padding: 5px 0 5px 15px; margin:20px 0 0 20px;" > Ваш любой текст</p>

Ваш любой текст

Еще можно создавать более красивые рамки css, но это будет в другом моем материале, который Вы не должны пропустить!

Вот здесь появился материал про рамки css. Смотрите и делайте сами!

Если вам понравился материал пожалуйста сделайте следующее…

  1. Поставьте «лайк».

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

Спасибо за внимание!

Всегда ваш Валерий Бородин

pribylwm.ru

html рамка с помощью html таблицы

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

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

HTML код в данном случае может выглядеть вот так:

<table border=»1″ bordercolor=»red» width=»350″ bgcolor=»white» cellspacing=»0″ cellpadding=»10″>

<tr>

<td>Текст в рамке. Толщина и цвет рамки зависят от значения параметров таблицы</td>

</tr>

</table>


html рамка

 

 

Вот какую рамку формирует выше приведенный код, если его открыть в окне браузера

 

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

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

border=»1″ толщина рамки

bordercolor=»red» цвет рамки

width=»350″ ширина блока с рамкой

bgcolor=»white» цвет фона ячейки

cellspacing=»0″ расстояние между ячейками

cellpadding=»10″ отступ от рамки до текста

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

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

html рамка с помощью стиля style


Если Вы не хотите использовать таблицу для создании рамки вокруг текста, тогда можно воспользоваться стилем border. Применение стилей в html, возможно в блочных элементах, таких как параграф <p></p> или <div></div>.

Так и сделаем, вот пример html кода, выводящего вокруг текста рамку с использованием стилей:

<p align=»center» style=’border: 1px solid red; padding: 5px;’>Есть ли возможность сделать рамку вокруг текста средствами html?</p>

 

Обрабатывая данный html код, браузер выведет в окно текст в рамке. Внешний вид рамки будет определятся значением параметров стиля style, следующим образом:

border: 1px solid red; — Толщина и цвет рамки

padding: 5px; — Отступ рамки от текста

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

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

В первом способе рамка была создана с помощью html тега <table>, то есть с помощью таблицы, а во втором способе, рамка вокруг текста была создана с использованием стиля style.

Автор: Виктор Милованов

sozdavaite-sait.ru

Здравствуйте уважаемые начинающие веб мастера.

Рамка является одним из самых популярных вариантов оформления контента, и в этой статье мы подробно рассмотрим, как они создаются средствами html.


Рамку можно создать для любого html элемента, будь то <p>, <h1>, <img>, <span>, <blockquote>, <marquee> и так далее.

Разница между рамками блочных и встраиваемых элементов состоит в том, что у блочных рамка образуется на всю ширину блока, но её можно ограничивать.

Рамка же встроенного создаётся непосредственно вокруг элемента, заключённого в тег.

Для создания рамки применяется стилевое свойство border которому задаются три значения по порядку

Толщина Вид Цвет.

Так как руководство это практическое, то перейдём непосредственно к примерам.

Толщина и размер рамки

Для примера возьмём тег <p> и создадим ему простую рамку толщиной 3 px

Результат

текст текст текст текст

Как видите — рамка заняла всё пространство, которое занимает тег.

Так ведёт себя рамка созданная для блочных элементов, таких как <p>, <div> и т.д.

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

текст текст текст текст

Если задать меньшую ширину, то слова в рамке будут размещаться в несколько строк, то есть автоматически будет увеличиваться высота.

текст текст текст текст


Рамка для встроенных или строчных элементов, таких как <img>, <span>, <hr> и т.п., располагается непосредственно вокруг элемента.

Бла-бла-бла Бла-бла-бла текст текст текст текст Бла-бла-бла Бла-бла-бла

Вид рамки

Можно изменить вид рамки, для этого в значении меняется её название.

Названия:

solid — сплошная

текст текст текст текст

dotted — точечная

текст текст текст текст

dashed — пунктирная

текст текст текст текст

double — двойная

текст текст текст текст

ridge —  рельефная

текст текст текст текст

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

Не полная рамка

Для создания неполной рамки в код вместо свойства border вводятся свойства border-top, border-right, border-bottom, border-left, по отдельности или в различных комбинациях, в зависимости от того, какая граница вам нужна.

текст текст текст текст

Выравнивание и отступы рамки


Текст внутри рамки можно выровнять по центру или правому краю, добавив в код свойство text-align, которое принимает значения

left — выравнивание по левому краю (по умолчанию)

center — выравнивание по центру

right — выравнивание по правому краю

текст текст текст текст

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

Для этого в код рамки вводится свойство padding, которое принимает 4 цифровых значения:

первая цифра — отступ сверху;

вторая цифра — отступ справа;

третья цифра — отступ снизу;

четвёртая цифра — отступ слева.

Отступы задаются в любых доступных в веб единицах размеров.

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

Если указать два значения, то первая цифра укажет отступы сверху и снизу, а вторая — справа и слева.

текст текст текст текст

Можно задать отступ от предметов находящихся снаружи рамки.

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

Сделаем отступы слева, сверху и снизу

текст текст текст текст


Дизайн рамки

Можно внутри рамки сделать фоновый цвет.

Для этого в код рамки вводится свойство background, в значении которого указывается код цвета.

текст текст текст текст

Можно вместе с текстом  в рамку вставить картинку. В примере .gif картинка.

РамкиТекст текст текст

 
А если задать ширину рамки ridge пикселей в 15-20, то есть в свойстве border вместо 3px задать 15px, то получится багет.

РамкиТекст текст текст

 

Так же в дизайне рамки можно использовать стилевые свойства border-radius — закругление и box-shadow — тень.

Текст текст текст

Текст текст текст

Как пишутся рамки в CSS и как делается тень, читайте в статьях Рамки CSS и Как сделать тень для блока.

Желаю творческих успехов.


Html рамка«>
Перемена

Вовочка папе: — Папа, а тебя била когда нибудь твоя мама ?
— Нет, только твоя…

Прямая линия HTML < < < В раздел > > > Кнопка HTML.

starper55plys.ru

Свойство outline

Самое простое свойство для создания рамок. Имеет те же параметры, что и border, но существенно отличается от него некоторыми деталями:

  • outline выводится вокруг элемента (border внутри);
  • outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
  • outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
  • на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Возникает вопрос — в каких случаях нужен outline, когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border? Ситуаций не так и много, но они встречаются:

  • создание сложных разноцветных рамок;
  • добавление рамки к элементу при наведении на него курсора мыши;
  • сокрытие рамки, добавляемой браузером автоматически для некоторых элементов при получении фокуса;
  • для outline можно задать расстояние от края элемента до рамки с помощью свойства outline-offset, для создания различных дизайнерских эффектов.

Разноцветные рамки

Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.

Пример 1. Создание рамки

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>border и outline</title>  <style>  div {  width: 100px;	height: 100px; /* Размеры */  background: #fc0; /* Цвет фона */  outline: 2px solid #000; /* Чёрная рамка */  border: 3px solid #fff; /* Белая рамка */  border-radius: 10px; /* Радиус скругления */  }  </style>  </head>  <body>  <div></div>  </body> </html>

В данном примере вокруг элемента добавляется чёрная рамка, которая отделена от фона белой каймой (рис. 1).

Рамка вокруг элемента

Рис. 1. Рамка вокруг элемента

Рамка при использовании :hover

При добавлении рамки через border происходит увеличение ширины элемента, что довольно заметно при сочетании border и псевдокласса :hover. Есть два способа, как это «победить». Самое простое — заменить border на outline, которое, как мы знаем, не оказывает влияния на размеры элемента (пример 2).

Пример 2. Рамка при наведении

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>outline</title>  <style>  div {  width: 100px; height: 100px; /* Размеры */  background: #fc0; /* Цвет фона */  border: 3px solid #fff; /* Белая рамка */  border-radius: 10px; /* Радиус скругления */  display: inline-block;  }  div:hover {  outline: 2px solid #000; /* Чёрная рамка */  }  </style>  </head>  <body>  <div></div>  <div></div>  </body> </html>

outline не всегда годится, хотя бы потому, что на него скругление уголков не действует. Здесь подойдёт второй метод — добавляем невидимую рамку или рамку, совпадающую с цветом фона, а затем меняем её параметры при наведении (пример 3). Тогда никакого смещения элемента происходить не будет, поскольку рамка изначально уже есть. Но всегда помним, что ширина элемента при этом складывается из значений width, border слева и border справа. Аналогично обстоит и с высотой.

Пример 3. Рамка при наведении

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>border</title>  <style>  div {  width: 100px; height: 100px; /* Размеры */  background: #fc0; /* Цвет фона */  border: 3px solid #fff; /* Белая рамка */  border-radius: 10px; /* Радиус скругления */  display: inline-block;  border: 2px solid transparent; /* Невидимая рамка */  }  div:hover {  border: 2px solid black; /* Чёрная рамка */  }  </style>  </head>  <body>  <div></div>  <div></div>  </body> </html>

Рамка вокруг полей формы

В некоторых браузерах (Chrome, Safari, последние версии Opera) вокруг полей формы при получении ими фокуса отображается небольшая цветная рамка (рис. 2). Чтобы её убрать, достаточно в стилях добавить к свойству outline значение none, как показано в примере 4.

Рамка вокруг полей

Рис. 2. Рамка вокруг полей

Пример 4. Убираем рамку

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>input</title>  <style>  input:focus {  outline: none; /* Скрываем рамку */  }  </style>  </head>  <body>  <input>  </body> </html>

Рамки через box-shadow

Хотя свойство box-shadow предназначено для добавления тени вокруг элемента, с его помощью можно и создавать рамки, причём такие, которые невозможно сделать через border или outline. Всё благодаря тому, что число теней может быть неограниченным, параметры которых перечисляются через запятую.

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

В примере 4 показано добавление двух рамок и одной границы справа с помощью одного свойства box-shadow.

Пример 4. Использование box-shadow

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>box-shadow</title>  <style>  div {  width: 100px;  height: 100px;  box-shadow: 0 0 0 3px red,   0 0 0 6px blue,  3px 0 0 6px orange;  }  </style>  </head>  <body>  <div></div>  </body> </html>

Результат данного примера показан на рис. 3.

Рамки, созданные свойством box-shadow

Рис. 3. Рамки, созданные свойством box-shadow

htmlbook.ru

/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */    .box13{    	margin: 50px;    	width: 300px;    	min-height: 150px;    	padding: 0 0 1px 0;    	position:relative;    	background:#fff;    	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));    	background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);    	border-top: 1px solid #ccc;    	border-right: 1px solid #ccc;    	border-left: 1px solid #ccc;    	-webkit-border-top-left-radius: 60px 5px;    	-moz-border-radius-topleft:60px 5px;    	border-top-left-radius:60px 5px;    	-webkit-border-top-right-radius: 60px 5px;    	-moz-border-radius-topright:60px 5px;    	border-top-right-radius:60px 5px;    	-webkit-border-bottom-right-radius: 60px 60px;    	-moz-border-radius-bottomright:60px 60px;    	border-bottom-right-radius: 60px 60px;    	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;    	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;    	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;    }        /* Нижний правый загиб */    .box13:before{    	content:'';    	width: 25px;    	height: 20px;    	position: absolute;    	bottom:0;    	right:0;    	-webkit-border-bottom-right-radius: 30px;    	-moz-border-radius-bottomright: 30px;    	border-bottom-right-radius: 30px;    	-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);    	-moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);    	box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);    	-webkit-transform:    						rotate(-20deg)    						skew(-40deg,-3deg)    						translate(-13px,-13px);    	-moz-transform:	rotate(-20deg)    					skew(-40deg,-3deg)    					translate(-13px,-13px);    	-o-transform:	rotate(-20deg)    					skew(-40deg,-3deg)    					translate(-13px,-13px);    	transform:	rotate(-20deg)    						skew(-40deg,-3deg)    						translate(-13px,-13px);    }        /* Тень загиба */    .box13:after{    	content: '';    	z-index: -10;    	width: 100px;    	height: 100px;    	position:absolute;    	bottom:0;    	right:0;    	background: rgba(0, 0, 0, 0.2);    	display: inline-block;    	-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);    	-moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2);    	box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);    	-webkit-transform: rotate(0deg)    						translate(-45px,-20px)    					 	skew(20deg);    	-moz-transform: rotate(0deg)    						translate(-45px,-20px)    					 	skew(20deg);    	-o-transform: rotate(0deg)    						translate(-45px,-20px)    					 	skew(20deg);    	transform: rotate(0deg)    			 translate(-45px,-20px)    			 skew(20deg);    }        /* Верхняя тень слева */    .box13_corner_lf{    	width: 100px;    	height: 100px;    	top:0; left:0;    	position:absolute;    	z-index:-6;    	display: inline-block;    	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);    	-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);    	box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);    	-webkit-transform: rotate(2deg)    						translate(20px,25px)    					 	skew(20deg);    	-moz-transform: rotate(2deg)    						translate(20px,25px)    					 	skew(20deg);    	-o-transform: rotate(2deg)    						translate(20px,25px)    					 	skew(20deg);     transform: rotate(2deg)    				translate(20px,25px)    				skew(20deg);    }        /* Верхняя тень справа */    .box13_corner_rt{    	content: '';    	width: 50px;    	height: 50px;    	top:0; right:0;    	position:absolute;    	display: inline-block;    	z-index:-6;    	-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);    	-moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);    	box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);    	-webkit-transform: rotate(2deg)    						translate(-14px,20px)    					 	skew(-20deg);    	-moz-transform: rotate(2deg)    						translate(-14px,20px)    					 	skew(-20deg);    	-o-transform: rotate(2deg)    						translate(-14px,20px)    					 	skew(-20deg);    	transform: rotate(2deg)    			 translate(-14px,20px)    			 skew(-20deg);    }        /* Левая прозрачная ленточка */    .box13_tape:before{    	content: '';    	position:absolute;    	top:0; left: 0;    	width: 130px;    	height: 40px;    	background:rgba(0,0,0,0.2);    	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));    	background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));    	border-left: 1px dashed rgba(0, 0, 0, 0.1);    	border-right: 1px dashed rgba(0, 0, 0, 0.1);    	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);    	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);    	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);    	-webkit-transform: rotate(90deg) skew(0,0) translate(100px,65px);    	-moz-transform: rotate(90deg) skew(0,0) translate(100px,65px);    	-o-transform: rotate(90deg) skew(0,0) translate(100px,65px);    	transform: rotate(90deg) skew(0,0) translate(100px,65px);    }        /* Правая прозрачная ленточка */    .box13_tape:after{    	content: '';    	position:absolute;    	top:0; right: 0;    	width: 130px;    	height: 40px;    	background:rgba(0, 0, 0, 0.1);    	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));    	background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));    	border-left: 1px dashed rgba(0, 0, 0, 0.1);    	border-right: 1px dashed rgba(0, 0, 0, 0.1);    	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);    	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);    	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);    	-webkit-transform: rotate(90deg) skew(0,0) translate(100px,-65px);    	-moz-transform: rotate(90deg) skew(0,0) translate(100px,-65px);    	-o-transform: rotate(90deg) skew(0,0) translate(100px,-65px);    	transform: rotate(90deg) skew(0,0) translate(100px,-65px);    }    

ruseller.com

Анонимный
Ничего особенного здесь нет! Инфа устарела уже на лет 8..как минимум.
NMitra
А какую рамку вы хотите? Что вы ожидали увидеть? Что значит устарела? Вы не пользуетесь свойством border?

Предлагайте, а я подумаю как реализовать.

Tamara Pullo
Мне очень полезна статья — потому что я "чайничек", сама вымучиваю свой сайт))) Спасибо.
NMitra
Пожалуйста, сама порой возвращаюсь к ней.
Анонимный
Спасибо.
NMitra
А взгляните ещё на http://shpargalkablog.ru/2013/12/border.html
Эту статью хочу переписать. Какая вам больше нравится?
Жека 🙂
Блин! Я уже просто не могу сдержать восторга от Вас и Вашего сайта! ну так же все доступно описано, расписано, показано, разжевано и донесено до читателя… просто аплодисменты стоя!!! Браво! Я чайник чайником и казалось бы и не понять мне все эти нюансы CSS, но тут все так хорошо описаны все процессы, при том любой урок какой не возьми, что волей не волей уже начинаешь понимать!!! Спасибо Вам за такой труд! Сколько не бегал по сайтам в поисках таких наглядных примеров лучше Вас, как мне кажется, этого сделать не смогли! Респект и уважуха!!!
NMitra
Благодарю, Жека, ваши слова греют мне душу 🙂
Светлана Титова
Спасибо за статью. А не могли бы вы мне подсказать, как прикрепить тень к рамке (в виде PNG-картинки или стиля)?
NMitra
Посмотрите про box-shadow
пример http://jsfiddle.net/NMitra/4hackgor/
статья http://shpargalkablog.ru/2011/06/css-box-shadow.html

shpargalkablog.ru

Для добавления вокруг изображения цветной рамки применяется стилевое свойство border. В стилях добавляем это свойство к селектору img и указываем толщину рамки, её цвет и стиль. Тогда рамка добавится для всех изображений на странице. Для выбранных рисунков можно ввести собственный класс и писать его только для выбранных элементов <img> (пример 1).

Пример 1. Добавление рамки

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Изображения</title>   <style>   .border {   border: 3px solid #00af64;   }   </style>   </head>   <body>   <img src="image/thumb1.jpg" alt="" class="border">   <img src="image/thumb2.jpg" alt="" class="border">   <img src="image/thumb3.jpg" alt="">   </body>  </html>

В данном примере к двум изображениям добавляется класс border, через который устанавливается зелёная рамка (рис. 1).

Рамка вокруг фотографий

Рис. 1. Рамка вокруг фотографий

Рамку можно добавлять и при наведении курсора на изображение через псевдокласс :hover. Но это ожидаемо приведёт к сдвигу картинки, поскольку свойство border влияет на общую ширину и высоту элемента. Чтобы избежать такого поведения к селектору img предварительно добавляется невидимая рамка, как показано в примере 2.

Пример 2. Рамка вокруг изображений

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Изображения</title>   <style>   img {   border: 3px solid transparent; /* Прозрачная рамка */   }   img:hover {   border: 3px solid #00af64; /* Цветная рамка */   }   </style>   </head>   <body>   <img src="image/thumb1.jpg" alt="">   <img src="image/thumb2.jpg" alt="">   <img src="image/thumb3.jpg" alt="">   </body>  </html>

Другой способ добавления рамки — использование свойства outline. Оно, в отличие от border, не влияет на размеры элемента, поэтому прозрачная рамка уже не нужна.

img:hover {   outline: 3px solid #00af64; /* Цветная рамка */  }

Несмотря на схожесть этих свойств, у них есть небольшие различия:

  • outline выводится вокруг элемента (border внутри);
  • outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
  • outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
  • на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Ещё один способ создания рамки заключается в добавлении фона к <img>. Сам фон сразу не виден, поэтому надо установить ещё свойство padding, его значением выступает толщина рамки (пример 3).

Пример 3. Использование background и padding

img {   padding: 10px; /* Толщина рамки */   background: #6dcff6; /* Цвет рамки */  }

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

webref.ru

Для чего нужна рамка html

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

Особенности создания рамки вокруг текста

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

На первом этапе необходимо уяснить то, что рамку можно сделать для каждого html элемента в независимости, что это за тег <h1>, <p>, <img>, <span> и т.д.

В свою очередь существует разница между рамками встраиваемых и блочных элементов.

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

Блочные рамки формируются во всю ширину блока, что провоцирует потребность задания команд связанных с ограничением ширины.

Конечно же для того чтобы сделать текст в рамке html нам придется обратиться к встроенным стилям. Данный способ станет наиболее приемлемым для выделения некоторых отдельно взятых фраз, абзацев в тексте и картинок. Если же вам необходимо выделить какую-то определенную часть шаблона, отображающуюся на всех страницах сайта, разумно обратиться к правке файла style.css шаблона.

Как вокруг текста сделать рамку в html

Думаю теории предостаточно. Пришло время попрактиковаться. В качестве примера я заключу в яркую салатовую рамку с серым фоном одно из важных предложений этой статьи.

Для реализации такой же рамки необходимо обратиться к тегу <p> и заключить между ним ниже опубликованный код.

Так как в данном примере использовались встроенные css стили, считаю не менее важным ознакомить вас с каждым из них.

1. border – свойство, отвечающее за отображение рамки. Для упрощения поставленной задачи я не стал по отдельности прописывать каждое свойство — border-width (толщина границ рамки), border-color (цвет рамки html). А вместо этого немного сократил html код, прописав все свойства после двоеточия.

Для изменения внешнего вида рамки достаточно изменить значение solid. Существуют следующие границы рамок:

— ridge – рельефная.

— dotted – точечная.

— double – двойная.

— dashed – пунктирная.

— solid – сплошная.

2. padding – свойство, отвечающее за расстояние между рамкой и объектом, заключенным в нее.

При желании можно еще немного побаловаться со стилями добавив к числу команд заключенных между открывающимся и закрывающимся тегом <p> свойство margin. Таким способом можно осуществить отступы элементов, которые находятся снаружи рамки.

Чтобы изменить задний фон достаточно прописать свойство background-color, указав после двоеточия код желанного цвета.

Рамка вокруг картинки html делается тем же самым способом, поэтому у вас с этим не должно возникнуть проблем. Единственное что нужно знать новичку, это то, что для ее отображения свойства необходимо прописать в одиночном теге <img>.

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

Спасибо за внимание и до скорых встреч на страницах Stimylrosta.

stimylrosta.com.ua


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.