
Октябрь 29, 2019 Запись была обновлена
Текстовое поле HTML — оригинальное оформление текстового поля HTML

На сайте находится сотни статей, в которых описывается как придать красивые стили для тех или иных элементов страницы. Данная коллекция постоянно пополняется. Ведь постоянно появляются новые возможности и место для экспериментов. На этот раз я хочу обратить внимание на текстовое поле HTML. Его можно сделать очень привлекательным. Лучше сами лично протестируйте данное поле.
Этот эффект достаточно интересный, но на сайте есть и другие способы оформления текстового поля:
Как это выглядит смотрите на реальном примере:
Посмотреть примерСкачать
Выглядит очень интересно и необычно для текстового поля, правда? Давайте посмотрим как же установить данный эффект на свой сайт.
Как сделать такой эффект для текстового поля HTML?
HTML часть
Подключаем необходимые стили (fancyInput.css) и скрипты (jquery и fancyInput.js):
1 2 3 | <link rel="stylesheet" href="css/fancyInput.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src='js/fancyInput.js'></script> |
После чего необходимо ОБЯЗАТЕЛЬНО поместить тег <input> или <textarea> </textarea> внутрь тега <div>:
1 2 3 4 5 6 | <div> <input type='text' placeholder='Введите текст...'> </div> <div> <textarea cols='1'></textarea> </div> |
jQuery часть
Чтобы всё заработало в конце документа HTML добавляем вызов функции плагина fancyInput:
1 2 3 | <script> $('div :input').fancyInput(); </script> |
На этом установка плагина fancyInput для оформления текстовых полей HTML закончена.
Вывод
А как Вам идея использовать данный эффект на продающей странице? Также можно таким образом оформить форму комментирования у себя на сайте. Конечно, установка не из простых и, возможно, сразу у Вас всё не заработает, но эффект стоит того, чтобы потратить на него время.
Успехов!
С Уважением, Юрий Немец
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
😯 очень интересная идея — эффектный пример открылся, здорово!
😎 😎 😎
Прикольно, оставлю себе…