loader

Искать шаблоны в нашем каталоге

9 кастомных input type file для Вашего сайта
  • 04.11.2018
  • 680

9 кастомных input type file для Вашего сайта

В интернте Вы можете найти много комплексных инструментов для редактирования внешнего вида Ваших форм, начиная от наборов пользовательских интерфейсов и заканчивая расширенными плагинами jQuery.

Wordpress Templates

Но одним из самых тяжелых для стилизации является поле загрузки файлов. Это стандартный HTML элемент, который позволяет пользователям загружать файлы со своего компьютера. Рестайлинг поля загрузки является серьезной проблемой по сравнению с другими элементами формы.

Посмотрите на это:
.
Неправда ли ужасно? Если вы собираетесь превратить скучную серую кнопку во что то стоящее, эта галерея поможет Вам. Я собрал 9 полей загрузки файла, которые докажут, что тяжело, не значит невозможно.


1. Snippet #1



В этом примере используется CSS&jQuery. Он заимствует тенденцию плоского дизайна , что позволяет избежать градиентов, сосредоточившись на одном цвете - часто с монохроматической цветовой схемой.

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

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


2. Snippet #2



Вот немного абстрактный дизайн, вопрощенный в поле загрузки файлов.

Вспомните эти элементы в крупных проектах, например Google или DropBox. Здесь мы так же видим большую область для перетаскаивания в нее файла.

Помимо стандартного поля HTML, здесь также обрабатывается процесс загрузки с помощью пользовательских функций JS.

Если вы хорошо знаете JavaScript, этот пример может послужить шаблоном для создания собственного пользовательского интерфейса для загрузки файлов.


3. Snippet #3.



Если вы работаете в рамках современного дизайна, тогда вы знаете, что вам нужно использовать адаптивность. Мобильные пользователи тоже хотят загружать файлы в Интрнет.

Взгляните на этот пример высококачественного поля загрузки для мобильных устройств. Это становится притяным и простым процессом с поддержкой drag & drop.

Если вы добавили этот фрагмент на свой сайт, рекомендуется добавить стандартное поле для загрузки рядом с областью перетаскивания, так как данный пример не ориентирован на пользователей персональных комппьютеров.


4. Snippet #4



Форма гибка настраивается с помощью JavaScript, так же поддерживает перетаскивание файла.

Кликабельная область - это HTML-этикетка, стилизованная с помощью CSS. Стандартный INPUT скрыт от пользователя под ней.


5. Snippet #5



Вот один из самых сложных, но впечатляющих сниппетов, которые я видел на CodePen. Он позволяет загружать фотографии в галерею прямо с вашего компьютера. Так же здесь есть функция предварительного просмотра загруженных фото.


6. Snippet #6



Здесь используется чистый CSS3 для преобразования поля ввода в одну большую кнопку, а так же иконочный шрифт Awesome.

Вы можете изменить стиль, цвет, значок или что-то еще, чтобы добиться соответсвия дизайну Вашего сайта. В итоге получаем альтернативу стандартному полю ввода на чистом CSS.


7. Snippet #7



В данном примере есть возможность изменить текст поля загрузки, размер, цвет кнопки или удалить текстовое поле совсем, чтобы использовать только кнопку.

Если вы не против jQuery, этот сниппет Вам подойдет.


8. Snippet #8



Супер кроссбраузерный вариант для IE8. Если вы беспокоитесь от достпуности функционала в страых браузерах, обратите внимание на этот пример.


9. Snippet #9



Это поле загрузки файлов выглядит довольно просто - но главная "фича" в функциональности.

Это поле является мультизагрузочным. Пользователям необходимо выбрать несколько файлов в одном окне.

На этом наша подборка полей зайгрузки файлов подходит к концу, надеюсь Вам понравились примеры, пусть они работают Вам на благо.

Palatin - восхитительный HTML шаблон для отеля

Palatin - восхитительный HTML шаблон для отеля

Красивый, стильный, адаптивный дизайн. ..

0 руб.

Bakery Бесплатный HTML шаблон для пекарни или кулинарии

Bakery Бесплатный HTML шаблон для пекарни или кулинарии

Адаптивный, эффектный сайт подойдет для вашей хлебопекарни или по..

0 руб.

Balay Бесплатный HTML шаблон для дизайнерской студии

Balay Бесплатный HTML шаблон для дизайнерской студии

Приятный, адаптивный дизайн для Вашей студии дизайна ..

0 руб.

Callie HTML шаблон для блога или новостного сайта

Callie HTML шаблон для блога или новостного сайта

Красивый bootstrap шаблон на тему путешествий, здоровья или техно..

0 руб.

Balita — Минималистичный бесплатный HTML шаблон для блога

Balita — Минималистичный бесплатный HTML шаблон для блога

Компактный шаблон со стильным светлым дизайном для Вашего блога..

0 руб.

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

06.10.2018 243

10 классных эффектов при наведении (JS&CSS3)

Продвинутые эффекты при наведении для картинок и фотографий на Вашем сайте

Читать далее...

13.10.2018 207

8 оригинальных CSS чекбоксов для формы на Вашем сайте

Чекбоксы (переключатели) могут быть не самыми заметными элементами пользовательского интерфейса в форме, но...

Читать далее...

02.11.2018 287

14 бесплатных креативных шрифтов для Ваших проектов

Шрифт как основа Вашего сайта должен быть ярким, вызывающим и в то же время гармоничным...

Читать далее...

06.11.2018 495

9 бесплатных Progress Bars (индикаторов загрузки) для Ваших проектов

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

Читать далее...