CSS Text Box Tutorial

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

Встроенное текстовое поле

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

<p align=justify style="background-color:#02f3e5;
border-radius:4px;
font-size:16px;
padding:15px;
margin:5px;"><b>
This is a Sample Textbox</b>
</p>

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

Это образец текстового поля с цветом фона, добавленным с помощью встроенного CSS. Это самый простой способ добавить текстовые поля на ваш сайт.

Вы можете настроить цвет фона и атрибуты шрифта, чтобы выровнять поле на вашем сайте.

Текстовые поля как информационные сообщения

Информационные сообщения полезны для показа вашей аудитории различных стилей сообщений, таких как предупреждение, предупреждение, объявление, опасность и т. Д. Мы используем отличные шрифтовые значки для добавления значков перед текстом, а CSS для окна информационного сообщения приведен ниже:

<link rel="stylesheet" href="https://www.webnots.com/resources/font-awesome/css/font-awesome.min.css">

.webnots-notification-box {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #ffffff;
font-family: verdana, 'open sans', sans-serif;
margin-bottom: 25px;
padding: 10px 14px 10px 44px;
position: relative;
box-shadow: 0px 1px 5px #999;
}
.webnots-notification-box:before {
font-family: FontAwesome;
font-size: 21px;
left: 14px;
position: absolute;
}
.webnots-information {
background-color: #3498db;
}
.webnots-information:before {
content: "f129";
margin-left: 4px;
}
.webnots-question {
background-color: #f1c40f;
}
.webnots-question:before {
content: "f128";
margin-left: 2px;
}
.webnots-tip {
background-color: #16a085;
}
.webnots-tip:before {
content: "f0eb";
margin-left: 2px;
}

HTML-код для информационного окна показан ниже:

<div class="webnots-information webnots-notification-box">
This is the info box - You can input as much or as little information!
</div>
<div class="webnots-question webnots-notification-box">
This is the help box - You can input as much or as little information!
</div>
<div class="webnots-tip webnots-notification-box">
This is the tip box - You can input as much or as little information!
</div>

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

Это информационное окно – вы можете ввести как много, так и мало информации!

Это окно справки – вы можете ввести как много, так и мало информации!

Это окно с подсказками – вы можете ввести как много, так и мало информации!

Это окно с уведомлением – вы можете ввести как много, так и мало информации!

Это поле успеха – вы можете ввести как много, так и мало информации!

Это поле опасности – вы можете ввести как много, так и мало информации!

Это окно с предупреждением – вы можете ввести как много, так и мало информации!

Подробнее о создании окон уведомлений.

Блокировать цитаты с текстовым полем

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

blockquote {
font-style:italic;
line-height:32px;
font-size:20px;
color:#fff;
background: #3F51B5;
margin:10px;
padding: 15px 20px 15px 20px;
border-radius: 5px;
}
blockquote:before,
blockquote:after {
position: relative;
vertical-align: middle;
font-family: 'Playfair Display', serif;
font-size: 56px;
font-weight: 700;
line-height: 0;
color: #FBC02D;
}
blockquote:before {
left: -5px;
content: '201C';
}
blockquote:after {
content: '201D';
}

HTML должен быть таким, как показано ниже:

<blockquote>
This is block quote element customized with CSS text box properties. You can customize more as you need...
</blockquote>

Регулируя цвет фона и кавычек, вы можете получить следующие результаты:

Это элемент цитаты блока, настроенный с помощью свойств текстового поля CSS. Вы можете настроить больше, если вам нужно …

Это элемент цитаты блока, настроенный с помощью свойств текстового поля CSS. Вы можете настроить больше, если вам нужно …

Это элемент цитаты блока, настроенный с помощью свойств текстового поля CSS. Вы можете настроить больше, если вам нужно …

Узнайте больше о создании индивидуальных цитат в стиле начальной загрузки для вашего сайта.

Окна меню

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

CSS для окна меню 1:

.container-box {
width: 300px;
padding: 20px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.block {
display: block;
width: 100%;
padding-right: 0;
padding-left: 0;
background-color: #5cb85c;
}
.item-list {
display: inline-block;
padding: 6px 12px;
margin-bottom: 5px;
font-size: 20px;
font-weight: 600;
line-height: 28px;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
color: lightyellow;
}

HTML для окна меню 1:

<div class="container-box">
<button class="item-list block"> Help </button>
<button class="item-list block"> Help </button>
<button class="item-list block"> Help </button>
<button class="item-list block"> Help </button>
<button class="item-list block"> Help </button>
<button class="item-list block"> Help </button>
</div>

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






CSS для меню 2:

.box-column {
width: 350px;
border: 1px groove;
padding: 5px;
}
.color-box {
padding: 0;
margin: 0;
list-style: none;
}
.color-box li {
color: #fff;
padding: 10px 10px 10px 15px;
background-color: brown;
margin-bottom: 3px;
font-size: 26px;
}

HTML для окна меню 2:

<div class="box-column">
<h3>Opening Hours</h3>
<ul class="color-box">
<li>Breakfast: 8AM - 11AM</li>
<li>Grill Menu: 12AM - 12PM</li>
<li>Live Music: 8AM - 11AM</li>
</ul>
</div>

Поле меню 2 будет выглядеть следующим образом:

Часы работы

  • Завтрак: 8.00 – 11.00
  • Гриль-меню: 12:00 – 12:00
  • Живая музыка: с 8:00 до 11:00

Заключение:

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

Похожие записи

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

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