inuasparwil.ru

Як зробити красиве текстове поле

Відео: HTML для початківців - Урок №9 - Текстове поле input

Як зробити красиве текстове поле

Відео: Як зробити поля в Ворді, word поля

Час від часу я зустрічаюся з досить незвичайними текстовими полями, які зробити звичайними можливостями HTML і CSS не уявляється можливим. Там присутні заокруглення, градієнти, тіні та інші графічні навороти. І в цій статті я розповім, як зробити гарне текстове поле на HTML-сторінці, має всі ці графічні навороти.

Насамперед, Вам необхідно зробити 3 картинки з текстового поля:

  1. лівий кут. Повинен зачіпати самий початок текстового поля (наприклад, його тінь) зліва і йти до моменту, коли вже заокруглення немає.
  2. правий кут. Аналогічно лівому кутку, але з іншого боку.
  3. Смужка основної частини. Ця смужка повинна бути в ширину 1 піксель і повинна бути вирізана де-небудь посередині текстового поля.



Дуже важливий момент полягає в тому, що всі 3 картинки повинні бути однакової висоти. Наступний етап - це HTML-код:

Відео: 4 Поля введення в PHP Devel Studio

cellpadding="0"cellspacing="0"gt;

class="Input_left"gt;

type="Text"name="Text"/ Gt;

class="Input_right"gt;




Як бачите, ми зробили таблицю з 1-го рядка і 3-х стовпців. У першому стовпці у нас планується лівий кут, у другому - саме текстове поле, в третьому - правий кут.

Відео: Текстове поле

І тепер CSS-код:

.input_left {
background: url("Input_left.jpg")no-repeat scroll 00 transparent-// Фон з лівим кутом
}
.input_right {
background: url("Input_right.jpg")no-repeat scroll 00 transparent-// Фон з правим кутом
}
input {
background: url("Bg_input.jpg") repeat-x scroll 00 transparent-// Фон текстового поля
border: none-// Прибрати стандартну рамку у текстового поля
height:35px-// Висота картинки
outline: none-// Прибрати рамку фокусу в IE
width:200px-// Необхідна ширина текстового поля
}

Якщо Ви все зробили правильно, то тепер Ви можете милуватися на своїй сторінці красивим текстовим полем. На практиці даний спосіб використовується постійно (не тільки для текстових полів), тому знати його треба будь-якому верстальщику.

Поділися в соціальних мережах:

Схожі
Як зробити поля з плаваючими мітками на jаvascript.Як зробити поля з плаваючими мітками на jаvascript.
Титульний лист word.Титульний лист word.
Створення форм в htmlСтворення форм в html
Текстове поле word.Текстове поле word.
Як зробити бланк в word.Як зробити бланк в word.
Як порахувати кількість слів у word.Як порахувати кількість слів у word.
Лист в клітку в word.Лист в клітку в word.
Html 5 атрибути для роботи з полями форми.Html 5 атрибути для роботи з полями форми.
Як зробити буклет в word.Як зробити буклет в word.
Як збільшити значення поля на 1 через sqlЯк збільшити значення поля на 1 через sql
» » Як зробити красиве текстове поле