
Наверное в Интернете теперь и не найдёшь сайт который бы не содержал каких либо форм, для регистрации, поиска, голосования и т.д. И красивое оформление этих форм и кнопок немаловажный момент в создании сайта. Именно этому посвящён данный урок в котором мы рассмотрим правильное и красивое оформление форм и кнопок средствами CSS.
И так начнём, для начала пишем простейшую форму:
<form> <span>Имя:</span> <input type="text" name="yourname" size="20"> <span>E-mail:</span> <input type="text" name="email" size="20"> <input type="button" value="Отправить"> </form>
И вот что мы получаем:
Довольно просто и неинтересно, но мы это изменим. Для начала давайте зададим точные размеры и сделаем фон и рамочку вокруг нашей формы:
<form style=" font: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FF9900; font-weight:bold; width:460px; height: 30px; background-color: #0099CC; border: 3px; border-style:double; border-color: #ff9900; padding: 5px;">
border-style: double; - это стиль обводки, в данном случае двойной именно поэтому мы выставили параметр Border: 3px; конечно вы можете выбрать любой стиль обводки ну это уже другая тема… ну и background и border-color это цвета фона и рамки соответственно. font: Verdana, Arial, Helvetica, sans-serif; - здесь указываем шрифт, далее font-size: 12px; color: #FF9900; размер и цвет шрифта.
и в итоге получаем:
Идем дальше давайте теперь обработаем поля и кнопочку. Добавляем в оба поля следующий код:
style="border:1px; border-style:dashed; border-color:#ff9900;"
И редактируем кнопку:
<input name="button" type="button" value="Отправить" style="width: 100px; background: url(accept.png) no-repeat left; height: 20px; border: 1px; border-color:#ff9900; background-color:#0099CC; text-align: right; font-size: 12px; color: #ff9900; font-weight:bold; border-style:solid;">
Поясняю: background: url(accept.png) no-repeat left; - этот параметр указывает что фоновым рисунком будет файл accept.png, а no-repeat left; -означает, что он не будет повторятся и будет смещаться в лево.
Остальные параметры нам уже знакомы, ну и конечный результат будет выглядеть так:
И конечный код целиком:
<form style="font:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color: #FF9900; font-weight:bold; width:460px; height: 30px; background-color: #0099CC; border: 3px; border-style:double; border-color: #ff9900; padding: 5px;"> <span>Имя:</span> <input type="text" name="yourname" size="20" style="border:1px; border-style:dashed; border-color:#ff9900;"> <span>E-mail:</span> <input type="text" name="email" size="20" style="border:1px; border-style:dashed; border-color:#ff9900;"> <input name="button" type="button" value="Отправить" style="width: 100px; background: url(accept.png) no-repeat left; height: 20px; border: 1px; border-color:#ff9900; background-color:#0099CC; text-align: right; font-size: 12px; color: #ff9900; font-weight:bold; border-style:solid;"> </form>
Это простейший вариант адаптации форм под ваши нужды, но если вы его поймете то сможете внедрить любые формы как вам надо в любой дизайн!
Дата публикации:2009-03-11
Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!