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

Підручник з текстового поля CSS

1

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

Вбудоване текстове поле

Якщо ви хочете створити лише одне або два текстові поля, рекомендується використовувати вбудований 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
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі