Мини-коллекция поля ввода CSS3 с иконками (html form input) | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSМини-коллекция поля ввода CSS3 с иконками (html form input)
Дата: 14.05.2013 в 23:26 | Просмотров: 17173

Мини-коллекция поля ввода CSS3 с иконками (html form input)

поля ввода css, (html form input)
Скачатьбесплатно с сервера
Демодемонстрация

Иногда при создании сайта или чего-либо другого, Вам срочно нужны поля ввода css для какой-то формы. Это мини-коллекция полей ввода текста, с большим выбором иконок, которые выводятся с помощью шрифта иконок. В списке есть как черно-белые, так и цветные формы. Есть два вида полей (html form input): иконка перед областью ввода текста (prefix) и иконка после поля ввода теста (postfix). Очень полезная подборка (24 варианта и 7 цветов), которая будет, я думаю, Вам очень полезна. Также смотрите готовую форму на CSS3 и эффектами на JQuery.

Наборы

Эта коллекция содержит 24 формы и соответственно 24 различных значка, а именно: ​​электронная почта, ссылка, внешняя ссылка, приложить, теги, дом, ключ, кредитная карта, тележка, пользователь, мусор, папка, сохранение, маркер, установка, редактирование, закладки, календарь , GPlus, Twitter, GitHub, Pinterest, LinkedIn и Facebook.

html form input

Каждая из полей имеет семь различных цветов: оранжевый, пурпурный, темно-серый, зеленый, синий, красный и серый цвет по умолчанию. Вот пример некоторых из них:

цвет полей ввода текста form input

Технологии и использование

Я использую JQuery для добавления prefix и postfix рядом с формой входа, в качестве цвета фона я использую градиент с поддержкой до 4-х браузеров (-moz, -webkit, -o & -ms), а также стандартный код. Для вывода иконок используется соответствующий шрифт. Также добавлена поддержка placeholder для старых браузера.

Для использования этой коллекции полей формы, подключаем minippfix.css и minippfix.js, вместе с modernizr.js и jquery.js, загружаем шрифт / папку в нужное место. Для вывода поля в тексте, используем следующую html разметку:

Как Вы видите выше, есть 3-4 класса параметра, которые можно поставить в поле class.

  • Первый – ppfix, это имя класса по умолчанию, для самого поля;
  • Второй – параметр pre (перед) и post (после), определяет позицию иконки;
  • Третий – значок иконки, это может быть электронная почта, GPlus или любое другое название, значка;
  • Четвертый – класс цвета.

Вот результат полей формы, приведенных вверху:
html form input

Вот и пожалуй все! Поля ввода css для формы готовы к использованию! В данном уроке не приведены все цвета, поэтому Вы можете выбрать цвет поля любой другой, который больше подходит к вашему сайту, или больше нравится. :)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.webstuffshare.com
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Tv Advertising:
      http://mindlessmistake62.soulcast.com/29

      Wow, that’s what I was exploring for, what a stuff!
      present here at this weblog, thanks admin of this web page.

Добавить комментарий