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

Поля для ввода информации являются отличными кандидатами для применения визуальных эффектов. Бумажные бланки невозможно оживить, чего нельзя сказать об электронных формах. Сегодня мы бы хотели поделиться с вами нашими наработками. В большинстве из них используются CSS3 анимации и псевдо-элементы.

Стоит отметить, что данные примеры являются экспериментальными и работают должным образом в последних версиях браузеров.

В качестве контейнера мы использовали span, в который помещаем элементы input и его label. Для достижения нужного эффекта помещаем label после input. Данное расположение обычно используется при работе с чекбоксами и радио кнопками. Для отслеживания фокусировки будем использовать псевдо-класс :focus.

<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>

В нашем примере тег label будет играть главную роль. Для оформления различных сторон данного элемента воспользуемся псевдо-классами :before и :after. Так же мы можем создать дополнительный слой, которым воспользуемся в эффекте под названием "Kyo":

В первом эффекте, "Haruki", может сложиться впечатление, что мы анимируем высоту объекта. На самом деле анимация применяется к нескольким псевдо-классам label-а (браузерные префиксы не указаны):

.input--haruki {
    margin: 4em 1em 1em;
}
 
.input__field--haruki {
    padding: 0.4em 0.25em;
    width: 100%;
    background: transparent;
    color: #AFB5BB;
    font-size: 1.55em;
}
 
.input__label--haruki {
    position: absolute;
    width: 100%;
    text-align: left;
    pointer-events: none;
}
 
.input__label-content--haruki {
    transition: transform 0.3s;
}
 
.input__label--haruki::before,
.input__label--haruki::after {
    content: '';
    position: absolute;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 4px;
    background: #6a7989;
    transition: transform 0.3s;
}
 
.input__label--haruki::before {
    top: 0;
}
 
.input__label--haruki::after {
    bottom: 0;
}
 
.input__field--haruki:focus + .input__label--haruki .input__label-content--haruki,
.input--filled .input__label-content--haruki {
    transform: translate3d(0, -90%, 0);
}
 
.input__field--haruki:focus + .input__label--haruki::before,
.input--filled .input__label--haruki::before {
    transform: translate3d(0, -0.5em, 0);
}
 
.input__field--haruki:focus + .input__label--haruki::after,
.input--filled .input__label--haruki::after {
    transform: translate3d(0, 0.5em, 0);

При фокусировке на элементе input, его label будет анимирован с двух сторон.

В Firefox (для Mac) отображение текста может быть нечетким. В Chrome так же есть подобный лаг, который можно заметить во время анимации. Примеры где используются SVG не работают в Internet Explorer.