Время от времени я встречаюсь с достаточно необычными текстовыми полями, которые сделать обычными возможностями HTML и CSS не представляется возможным. Там присутствуют закругления, градиенты, тени и другие графические навороты. И в этом материале я расскажу, как сделать красивое текстовое поле на HTML-странице , им...
Время от времени я встречаюсь с достаточно необычными текстовыми полями, которые сделать обычными возможностями 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; //Требуемая ширина текстового поля
}
Если Вы всё сделали правильно, то теперь Вы можете любоваться на своей странице красивым текстовым полем. На практике данный способ используется постоянно (не только для текстовых полей), поэтому знать его надо любому верстальщику.
