Как сделать красивое текстовое поле
Время от времени я встречаюсь с достаточно необычными текстовыми полями, которые сделать обычными возможностями HTML и CSS не представляется возможным. Там присутствуют закругления, градиенты, тени и другие графические навороты. И в этой статье я расскажу, как сделать красивое текстовое поле на HTML-странице, имеющее все эти графические навороты.
Первым делом, Вам необходимо сделать 3 картинки из текстового поля:
- Левый угол. Должен затрагивать самое начало текстового поля (например, его тень) слева и идти до момента, когда уже закругления нет.
- Правый угол. Аналогично левому углу, но с другой стороны.
- Полоска основной части. Эта полоска должна быть в ширину 1 пиксель и должна быть вырезана где-нибудь посередине текстового поля.
Очень важный момент заключается в том, что все 3 картинки должны быть одинаковой высоты. Следующий этап - это HTML-код:
<table cellpadding="0" cellspacing="0">
<tr>
<td class="input_left"></td>
<td>
<input type="text" name="text" />
</td>
<td class="input_right"></td>
</tr>
</table>
Как видите, мы сделали таблицу из 1-й строки и 3-х столбцов. В первом столбце у нас планируется левый угол, во втором - само текстовое поле, в третьем - правый угол.
И теперь CSS-код:
.input_left {
background: url("input_left.jpg") no-repeat scroll 0 0 transparent; //Фон с левым углом
}
.input_right {
background: url("input_right.jpg") no-repeat scroll 0 0 transparent; //Фон с правым углом
}
input {
background: url("bg_input.jpg") repeat-x scroll 0 0 transparent; //Фон текстового поля
border: none; //Убрать стандартную рамку у текстового поля
height: 35px; //Высота картинки
outline: none; //Убрать рамку фокуса в IE
width: 200px; //Требуемая ширина текстового поля
}
Если Вы всё сделали правильно, то теперь Вы можете любоваться на своей странице красивым текстовым полем. На практике данный способ используется постоянно (не только для текстовых полей), поэтому знать его надо любому верстальщику.
-
Создано 28.05.2012 13:07:55
-
Михаил Русаков
Комментарии (17):
Еще бы картинки приложить к статье и было бы вообще класс:)
Ответить
Можно сделать тоже самое, тока без картинок (jQuery)! Будет Круче))))
Ответить
Будет хуже из-за JavaScript. Там где можно обойтись без JS (а уж тем более без такой библиотеки как JQuery), надо обходиться без JS.
Ответить
Михаил, скажите почему если я создаю папку допустим на рабочем столе и там верстаю сайт то всё ок! Но как я создаю index.php и с index.html и естественно все картинки и css скидываю туда, то у меня дизайн съезжает
Ответить
Верстать изначально надо не на рабочем столе, а в корневой директории локального сервера, и в нем же проверять.
Ответить
А что делать если я допустим скачал шаблон сайта НО он в HTML и если его кинуть потом в php файл(или HTML) Тоже самое получается
Ответить
Во всех браузерах такое? Просто не понимаю в чем может быть разница, если код один и тот же. Учитывая что все css правильно подключились, конечно.
Ответить
Вот почему я вам и пишу. Да во всех
Ответить
Возможно проблема в кодировке, которая меняется когда Вы редактируете шаблон. В шаблоне может стоят совсем другая, например. Или если кодировка utf-8, то не стоит "utf-8 без BOM".
Ответить
Хм. А вот на это я внимания не обратил. Спасибо
Ответить
Чтобы выглянули края текстового поля, мне пришлось применить в стилях width: 8px; - ширину этих краёв, не знаю как насчет правильности, но без этого никак не получилось.
Ответить
а где картинки взять bg_input.jpg, input_left.jpg, input_right.jpg ????
Ответить
Вырезать из картинки самого input, например, в том же photoshop.
Ответить
Не понимаю, что значит "scroll 0 0"? Я забыл..
Ответить
scroll нужен, чтобы фон двигался вместе с элементом.
Ответить
Я так понял это старый способ? (в css3 вроде добавилось свойство закругления)
Ответить
а вы могли бы посмотреть на дату публикации статьи и тогда бы не просто поняли,а точно поняли)
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.