Лого www.SiteHere.ru

Текстовое поле HTML — оригинальное оформление текстового поля HTML

На сайте находится сотни статей, в которых описывается как придать красивые стили для тех или иных элементов страницы. Данная коллекция постоянно пополняется. Ведь постоянно появляются новые возможности и место для экспериментов. На этот раз я хочу обратить внимание на текстовое поле HTML. Его можно сделать очень привлекательным. Лучше сами лично протестируйте данное поле.

Этот эффект достаточно интересный, но на сайте есть и другие способы оформления текстового поля:

Как это выглядит смотрите на реальном примере:

Посмотреть примерСкачать

Выглядит очень интересно и необычно для текстового поля, правда? Давайте посмотрим как же установить данный эффект на свой сайт.

Как сделать такой эффект для текстового поля HTML?

HTML часть

Подключаем необходимые стили (fancyInput.css) и скрипты (jquery и fancyInput.js):

HTML КОД
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>:

HTML КОД
1
2
3
4
5
6
<div>
    <input type='text' placeholder='Введите текст...'>
</div>
<div>
    <textarea cols='1'></textarea>
</div>

jQuery часть

Чтобы всё заработало в конце документа HTML добавляем вызов функции плагина fancyInput:

HTML&JS КОД
1
2
3
<script>
    $('div :input').fancyInput();
</script>

На этом установка плагина fancyInput для оформления текстовых полей HTML закончена.

Вывод

А как Вам идея использовать данный эффект на продающей странице? Также можно таким образом оформить форму комментирования у себя на сайте. Конечно, установка не из простых и, возможно, сразу у Вас всё не заработает, но эффект стоит того, чтобы потратить на него время.

Успехов!

С Уважением, Юрий Немец

Текстовое поле HTML — оригинальное оформление текстового поля HTML 5.00/5 (100.00%) 2 голос(ов)

Понравилась статья - расскажи друзьям! :)

3 комментария к записи
  • Инна

    😯 очень интересная идея — эффектный пример открылся, здорово!

     
  • Сергей

    😎 😎 😎

     
  • Logic

    Прикольно, оставлю себе…

     

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *