Поля для ввода информации являются отличными кандидатами для применения визуальных эффектов. Бумажные бланки невозможно оживить, чего нельзя сказать об электронных формах. Сегодня мы бы хотели поделиться с вами нашими наработками. В большинстве из них используются CSS анимации и псевдо-элементы. Стоит отметить, что данные примеры являются экспериментальными и работают должным образом в последних версиях браузеров. В качестве контейнера мы использовали span, в который помещаем элементы input и его label. Для достижения нужного эффекта помещаем label после input-а. Данное расположение обычно используется при работе с чекбоксами и радио кнопками. Для отслеживания фокусировки будем использовать псевдо-класс :focus. 1 <span class="input input--haruki"> 2 <input class="input__field input__field--haruki" type="text" id="input-1" /> 3 <label class="input__label input__label--haruki" for="input-1"> 4 <span class="input__label-content input__label-content--haruki">First Name</span> 5 </label> 6 </span> В нашем примере label будет играть главную роль. Для оформления различных сторон данного элемента воспользуемся псевдо-классами :before и :after. Так же мы можем создать дополнительный слой, которым воспользуемся в эффекте под названием “Kyo”: В первом эффекте, “Haruki”, может сложиться впечатление, что мы анимируем высоту объекта. На самом деле анимация применяется к нескольким псевдо-классам label-а (браузерные префиксы не указаны): 01 .input--haruki { 02 margin: 4em 1em 1em; 03 } 04 05 .input__field--haruki { 06 padding: 0.4em 0.25em; 07 width: 100%; 08 background: transparent; 09 color: #AFB5BB; 10 font-size: 1.55em; 11 } 12 13 .input__label--haruki { 14 position: absolute; 15 width: 100%; 16 text-align: left; 17 pointer-events: none; 18 } 19 20 .input__label-content--haruki { 21 transition: transform 0.3s; 22 } 23 24 .input__label--haruki::before, 25 .input__label--haruki::after { 26 content: ''; 27 position: absolute; 28 left: 0; 29 z-index: -1; 30 width: 100%; 31 height: 4px; 32 background: #6a7989; 33 transition: transform 0.3s; 34 } 35 36 .input__label--haruki::before { 37 top: 0; 38 } 39 40 .input__label--haruki::after { 41 bottom: 0; 42 } 43 44 .input__field--haruki:focus + .input__label--haruki .input__label-content--haruki, 45 .input--filled .input__label-content--haruki { 46 transform: translate3d(0, -90%, 0); 47 } 48 49 .input__field--haruki:focus + .input__label--haruki::before, 50 .input--filled .input__label--haruki::before { 51 transform: translate3d(0, -0.5em, 0); 52 } 53 54 .input__field--haruki:focus + .input__label--haruki::after, 55 .input--filled .input__label--haruki::after { 56 transform: translate3d(0, 0.5em, 0); 57 } При фокусировке на элементе input, его label будет анимирован с двух сторон. В Firefox (для Mac) отображение текста может быть нечётким. В Chrome так же есть подобный лаг, который можно заметить во время анимации. Примеры где используются SVG не работают в Internet Explorer.