5 658 Скрипты / Form

Эффекты для текстовых полей

Несколько интересных эффектов для текстовых полей включающих некоторые новые методы реализации и идеи.
В основном используются CSS transitions и изредка CSS animations на label тегах или на псевдо-элементах.

HTML

В качестве примера посмотрим оформление инпутов из первой демки (Haruki):

<span class="input input--haruki">
    <input class="input__field input__field--haruki" type="text" id="input-1" />
    <label class="input__label input__label--haruki" for="input-1">
        <span class="input__label-content input__label-content--haruki">Имя</span>
    </label>
</span>
<span class="input input--haruki">
    <input class="input__field input__field--haruki" type="text" id="input-2" />
    <label class="input__label input__label--haruki" for="input-2">
        <span class="input__label-content input__label-content--haruki">Фамилия</span>
    </label>
</span>
<span class="input input--haruki">
    <input class="input__field input__field--haruki" type="text" id="input-3" />
    <label class="input__label input__label--haruki" for="input-3">
        <span class="input__label-content input__label-content--haruki">Email</span>
    </label>
</span>

CSS

Базовые стили для всех полей из демо 1:

И конкретные стили для оформления полей:

Скачать 1181Загрузок 265,32 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи