TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Учебное пособие по текстовым полям CSS

54

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

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

Если вы хотите создать только одно или два текстовых поля, рекомендуется использовать встроенный 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. Выше только несколько примеров, и вы можете настроить фон, границы, цвета и текст по своему усмотрению. Вы можете поиграть с этими базовыми примерами и создать больше настраиваемых текстовых полей для ваших нужд.

Источник записи: www.webnots.com
Leave A Reply

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