Мини-коллекция поля ввода CSS3 с иконками (html form input)
↓ Также Вам будет интересно ↓
Иногда при создании сайта или чего-либо другого, Вам срочно нужны поля ввода css для какой-то формы. Это мини-коллекция полей ввода текста, с большим выбором иконок, которые выводятся с помощью шрифта иконок. В списке есть как черно-белые, так и цветные формы. Есть два вида полей (html form input): иконка перед областью ввода текста (prefix
) и иконка после поля ввода теста (postfix
). Очень полезная подборка (24 варианта и 7 цветов), которая будет, я думаю, Вам очень полезна. Также смотрите готовую форму на CSS3 и эффектами на JQuery.
Наборы
Эта коллекция содержит 24 формы и соответственно 24 различных значка, а именно: электронная почта, ссылка, внешняя ссылка, приложить, теги, дом, ключ, кредитная карта, тележка, пользователь, мусор, папка, сохранение, маркер, установка, редактирование, закладки, календарь , GPlus, Twitter, GitHub, Pinterest, LinkedIn и Facebook.
Каждая из полей имеет семь различных цветов: оранжевый, пурпурный, темно-серый, зеленый, синий, красный и серый цвет по умолчанию. Вот пример некоторых из них:
Технологии и использование
Я использую JQuery для добавления prefix
и postfix
рядом с формой входа, в качестве цвета фона я использую градиент с поддержкой до 4-х браузеров (-moz
, -webkit
, -o
& -ms
), а также стандартный код. Для вывода иконок используется соответствующий шрифт. Также добавлена поддержка placeholder
для старых браузера.
Для использования этой коллекции полей формы, подключаем minippfix.css
и minippfix.js
, вместе с modernizr.js
и jquery.js
, загружаем шрифт / папку в нужное место. Для вывода поля в тексте, используем следующую html разметку:
1 2 3 4 5 6 7 8 |
<!-- 1st prefix иконка email и цвет по умолчанию (серый) --> <input type="text" placeholder="Type here..." class="ppfix pre email"> <!-- 2nd postfix иконка Google Plus+ и цвет по умолчанию (серый) --> <input type="text" placeholder="Type here..." class="ppfix post gplus"> <!-- 3rd prefix иконка домик и синий цвет --> <input type="text" placeholder="Type here..." class="ppfix pre home blue"> |
Как Вы видите выше, есть 3-4 класса параметра, которые можно поставить в поле class
.
- Первый – ppfix, это имя класса по умолчанию, для самого поля;
- Второй – параметр pre (перед) и post (после), определяет позицию иконки;
- Третий – значок иконки, это может быть электронная почта, GPlus или любое другое название, значка;
- Четвертый – класс цвета.
Вот результат полей формы, приведенных вверху:
Вот и пожалуй все! Поля ввода css для формы готовы к использованию! В данном уроке не приведены все цвета, поэтому Вы можете выбрать цвет поля любой другой, который больше подходит к вашему сайту, или больше нравится.
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
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.