У создателей сайтов часто возникают вопросы по улучшению его внешнего вида (интерфейса). Всевозможные картинки, иконки, рамки, линии, выделения цветом – незаменимые атрибуты профессионального контента. Разберем простые, но популярные методы оформления сайта, которыми пользуются топовые вебмастера.
Как сделать вертикальную линию HTML
Выделить блок и сделать его более удобным помогают вертикальные линии. Существует множество способов, но не все способствуют правильному отображению в различных браузерах. Воспользуемся универсальным способом, работающим во всех браузерах. Добавим вертикаль с помощью HTML кода. Код прописываем в текстовом редакторе.
<div style="border-left:3px solid blue; padding-left:10px;">
<p>
Добро пожаловать на сайт ИнетВинегрет
</p>
</div>
Результат:
Добро пожаловать на сайт ИнетВинегрет
Где:
- border—left – устанавливает границу (вертикальную линию) с левой стороны;
- 3 px -толщина линии;
- solid – сплошная линия;
- blue – цвет линии;
- padding—left – отступ слева от линии (абзац);
- 10 px – величина отступа.
Характеристики можно менять по своему усмотрению. Например, сплошную линию, solid, можно заменить на пунктирную (dotted), двойную (double), прерывистую (dashed), объемную вдавленную (inset), объемную выпуклую (outset), объемную рифленую выпуклую (ridge), объемную рифленую вдавленную (groove). Можно изменить толщину линии, размер отступа и цвет границы, используя палитру цветов RGB.
Border—left можно заменить на границу справа — border—right, border—top – сверху, border—bottom – снизу, border – рамка вокруг текста. В этот код можно вставить изображение и отделить его рамкой или линиями.
Как создать вертикальную линию при помощи CSS
Если привычнее работать с CSS стилями, то для создания вертикальной линии присваивается класс для блока, а его свойства прописываются в CSS-файле.
HTML
<div class="block-vert-line">
<p>
Добро пожаловать на сайт ИнетВинегрет
</p>
</div>
CSS
.block-vert-line{
border-left:3px solid blue;
padding-left:15px;
}
Результат:
Добро пожаловать на сайт ИнетВинегрет
Варианты оформления рамок в HTML и CSS
Возможно воспользоваться встроенными стилями и получить рамку с фоном вокруг текста.
<p style="border: 3px solid blue;
background-color: #fcf86a;
padding: 10px;
" >Добро пожаловать на сайт ИнетВинегрет </p>
В результате:
Добро пожаловать на сайт ИнетВинегрет
В стили добавили цвет фона background—color. Если нужно отрегулировать отступ самой рамки от других объектов, то необходимо вставить margin между тегами <p></p>. Для выравнивания текста по центру рамки добавляется свойство text-align: center. В зависимости от того, с какой стороны нужно отступать, к свойствам margin и padding добавятся направления отступов:
- top–сверху;
- right–справа;
- bottom–снизу;
- left–слева.
Следующая рамка будет состоять из пунктирной линии (dashed).
<p style=" border:3px dashed blue;padding:10px; margin:20px auto; width:auto;
" >Добро пожаловать на сайт ИнетВинегрет </p>
Добро пожаловать на сайт ИнетВинегрет
Далее только заменяем dashed на dotted, double, groove, ridge.
Добро пожаловать на сайт ИнетВинегрет
Добро пожаловать на сайт ИнетВинегрет
Добро пожаловать на сайт ИнетВинегрет
Добро пожаловать на сайт ИнетВинегрет
Если хочется закругленную рамку, то вместо border, добавим border-radius и box-shadow.
<p style=" border-radius: 10px; box-shadow: 0 0 0 3px blue; padding:10px; margin:20px auto; width: auto;
" >Добро пожаловать на сайт ИнетВинегрет </p>
Добро пожаловать на сайт ИнетВинегрет
Чтобы размыть границу рамки, нужно увеличить третью цифру box-shadow с 0 до 6px.
При желании сделать разноцветную рамку, следует добавить в box-shadow дополнительные значения с разными цветами.
<p style="border-radius: 10px;
box-shadow: 0 0 6px 3px pink,
0 0 0 7px orange,
0 0 0 10px blue;
padding: 10px;
margin: 20px auto;
width: auto;
" >Добро пожаловать на сайт ИнетВинегрет </p>
Добро пожаловать на сайт ИнетВинегрет
Рамку можно сделать и в виде окружности.
<p style="border-radius: 50%/50%;
box-shadow: 0 0 0 6px blue;
padding: 40px;
margin: 20px auto;
width: 200px;
height: 200px;
text-align: center;; " >Добро пожаловать на сайт ИнетВинегрет </p>
Добро пожаловать на сайт ИнетВинегрет
Значения в border-radius можно менять. Первое число указывает на угол по вертикали, второе – по горизонтали.
Популярна рамка с цветом, меняющимся при наведении на нее курсором. Здесь используется свойство hover.
<html>
<head>
<style>
.border_hover{
border: 3px solid blue;
padding: 15px;
width: 500px;
height: 30px;
}
.border_hover:hover{
border: 3px solid #F0F;
padding: 15px;
}
</style>
</head>
<body>
<div class="border_hover">Добро пожаловать в Инетвинегрет</div>
</body>
</html>
Можно к тексту добавить изображение.
<p style="border:3px blue ridge;
width: 500px;
height:150px;
padding: 20px 0 5px 15px;
margin:20px 0 0 20px;">
<img src="https://inetvinegret.ru/wp-content/uploads/2020/02/logo-InV-e1580974537152.png">
Добро пожаловать на сайт ИнетВинегрет</p>
Добро пожаловать на сайт ИнетВинегрет
Оформить рамкой или линиями можно любой html элемент: <p> (текст), <h1>(заголовоки), <img>(картинки), <span>(слова), <blockquote>(цитаты) и др.
На некоторых сайтах есть красивое оформление рамок, которое можно применить при нажатии кнопки в текстовом редакторе.
Это очень удобно, так как не нужно постоянно прописывать и подбирать коды. В шаблоне WordPress выбираем файл functions.php и в конце вставляем код:
// кнопки для выделения
if( !function_exists('my_buttons') ){
function my_buttons()
{ ?>
<script type="text/javascript">
QTags.addButton( 'warning', 'Внимание', '<div class="warning shortcodestyle">', '</div>' );
QTags.addButton( 'info', 'Инфо', '<div class="info shortcodestyle">', '</div>' );
QTags.addButton( 'important', 'Важно', '<div class="important shortcodestyle">', '</div>' );
QTags.addButton( 'advice', 'Совет', '<div class="advice shortcodestyle">', '</div>' );
QTags.addButton( 'note', 'Заметка', '<div class="note shortcodestyle">', '</div>' );
</script>
<?php }
add_action('admin_print_footer_scripts', 'my_buttons');
}
Далее в файле style.css в конце прописываем:
/*стили заметок*/
.shortcodestyle {
font: 14px arial;
line-height: 1.4;
padding: 15px 15px 15px 75px;
word-wrap: break-word;
border-radius: 2px;
clear: both;
margin: 10px auto;
max-width: 660px;
position: relative;
text-decoration:none;
}
/*Внимание*/
.warning {
background: #fff2b8 url("images/warning.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #EAD18C;
color: #4F2012;
}
.warning a {
color: #D15225;
}
/*Информация*/
.info {
background: #bae5f8 url("images/info.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #9BBFC4;
color: #0F2B33;
}
.info a {
color: #216CAF;
}
/*Важно*/
.important {
background: #ffcaca url("images/important.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #f4a9a9;
color: #330D0D;
}
.important a {
color: #ff3a37;
}
/*Совет*/
.advice {
background: #ccfacc url("images/advice.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #b1dbb1;
color: #0b280b;
}
.advice a {
color: #5E9800;
}
/*Заметка*/
.note {
background: #f5f5f5 url("images/note.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #dfdfdf;
color: #222;
}
.note a {
color: #5587c4;
}
После применения кодов в текстовом редакторе появятся дополнительные кнопки.
В последнем файле указаны пути к файлу изображений. Картинки нужно скачать и прописать их путь (путь к файлу/….png). По своему вкусу в данных настройках кода можно поменять различные характеристики: шрифт, картинки, цвет, фон.
Элементарные правила по созданию рамок и линий с помощью HTML кодов и CSS стилей помогут придать контенту красивое оформление.
